[英]constraint layout strange behavior
我想讓 Ui 包含兩個水平相鄰的卡片視圖,但在較小尺寸的屏幕中,它們之間的空間並未顯示它們似乎相互接觸,我添加了屏幕左側和右側的指南以檢測開始邊距和結束邊距,我將兩張卡片都設置為 wrap_content,因此它們應該適合屏幕編輯:我使用約束布局作為根布局
<androidx.cardview.widget.CardView
android:id="@+id/id_sale_card"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="7dp"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toBottomOf="@+id/view7">
<ImageView
android:id="@+id/imageView4"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginStart="90dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="25dp"
android:background="@drawable/card_images"
android:scaleType="center"
android:src="@drawable/sale" />
<TextView
android:id="@+id/id_sale_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="19dp"
android:layout_marginTop="34dp"
android:layout_marginEnd="98dp"
android:layout_marginBottom="11dp"
android:text="$0.00"
android:textColor="#ff565659" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="18dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="109dp"
android:layout_marginBottom="31dp"
android:text="Sale"
android:textAllCaps="true"
android:textColor="#ff565659"
android:textSize="12sp" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/id_card_earning"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="7dp"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintTop_toBottomOf="@+id/view7">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/imageView8"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="15dp"
android:background="@drawable/card_images"
android:scaleType="center"
android:src="@drawable/earning"
app:layout_constraintStart_toStartOf="@+id/guideline3"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent="0.65" />
<TextView
android:id="@+id/id_earning_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="19dp"
android:layout_marginTop="34dp"
android:layout_marginEnd="44dp"
android:layout_marginBottom="11dp"
android:text="$0.00"
android:textColor="#ff565659"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/guideline3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView59"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="17dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="29dp"
android:maxLines="1"
android:text="Earning"
android:textAllCaps="true"
android:textColor="#ff565659"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="@+id/guideline3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
你可以在app:layout_constraintGuide_percent
使用指南來告訴你的卡片視圖在某個時候停止,並通過這樣做在它們之間獲得空間。
這是布局:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:id="@+id/first"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/guideline"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/imageView1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="@drawable/ic_launcher_background"
android:scaleType="center"
android:src="@drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/guideline1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent="0.65" />
<TextView
android:id="@+id/id_earning_txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="19dp"
android:layout_marginTop="34dp"
android:layout_marginEnd="44dp"
android:layout_marginBottom="11dp"
android:text="$0.00"
android:textColor="#ff565659"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/guideline1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="17dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="29dp"
android:maxLines="1"
android:text="Earning"
android:textAllCaps="true"
android:textColor="#ff565659"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="@+id/guideline1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/second"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/guideline2"
app:layout_constraintTop_toTopOf="@+id/first">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/imageView8"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="15dp"
android:background="@drawable/ic_launcher_background"
android:scaleType="center"
android:src="@drawable/ic_launcher_background"
app:layout_constraintStart_toStartOf="@+id/guideline3"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent="0.65" />
<TextView
android:id="@+id/id_earning_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="19dp"
android:layout_marginTop="34dp"
android:layout_marginEnd="44dp"
android:layout_marginBottom="11dp"
android:text="$0.00"
android:textColor="#ff565659"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/guideline3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView59"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="17dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="29dp"
android:maxLines="1"
android:text="Earning"
android:textAllCaps="true"
android:textColor="#ff565659"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="@+id/guideline3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.45" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.55" />
</androidx.constraintlayout.widget.ConstraintLayout>
它看起來像這樣:
現在,請注意這張圖片是從布局編輯器中獲取的,而不是真正的手機——我想讓你看看這些指南。
它也適用於您的設備。
嘗試這個 :-
<androidx.cardview.widget.CardView
android:id="@+id/id_sale_card"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="7dp"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintEnd_toStartOf="@+id/id_card_earning" //include this line
app:layout_constraintTop_toBottomOf="@+id/view7">
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/id_card_earning"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="7dp"
app:layout_constraintStart_toEndOf="@+id/id_sale_card" //include this line
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintTop_toBottomOf="@+id/view7">
</androidx.cardview.widget.CardView>
此外,如果您希望卡片視圖填滿整個屏幕,您可以傳遞android:layout_width="0dp"
這基本上是匹配約束。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.