Android 约束布局奇怪的行为
我想制作一个包含两个卡片视图的界面,两个卡片视图水平相邻,但在较小尺寸的屏幕中,这两个视图之间的空间不显示它们似乎相互接触,我为屏幕的左侧和右侧添加了一些准则,以检测开始页边距和结束页边距,我将两张卡片都设置为包装内容,这样它们就可以放在屏幕内 编辑:我使用约束布局作为根布局Android 约束布局奇怪的行为,android,android-layout,responsive-design,android-constraintlayout,Android,Android Layout,Responsive Design,Android Constraintlayout,我想制作一个包含两个卡片视图的界面,两个卡片视图水平相邻,但在较小尺寸的屏幕中,这两个视图之间的空间不显示它们似乎相互接触,我为屏幕的左侧和右侧添加了一些准则,以检测开始页边距和结束页边距,我将两张卡片都设置为包装内容,这样它们就可以放在屏幕内 编辑:我使用约束布局作为根布局 <androidx.cardview.widget.CardView android:id="@+id/id_sale_card" android:layout_w
<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>
试试这个:-
<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\u width=“0dp”,这基本上是匹配约束。你可以使用app:layout\u constraintGuide\u 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>
现在,请注意,这张图片是从版面编辑器中拍摄的,不是真实的手机-我想让你看看指南。
它也可以在您的设备上工作。您没有将这两张卡相互约束。您只约束了从第一条到左的准则的起点和从第二条到右的准则的终点。如果屏幕尺寸较小,这可能会与卡片重叠。您可以发布完整的xml代码吗?特别是“@+id/指南”。因为在您的图像中看不到两个CardView之间的任何垂直方向。@kaveh这是我要测试的全部代码,即使我在它们之间添加约束,正确的卡的一部分也在屏幕外谢谢先生,但两张卡仍然在小屏幕上合并。您是否可以尝试删除指导原则并在其位置写入父卡,因此代码应如下所示:-app:layout\u constraintStart\u toStartOf=“parent”//cardview sale app:layout\u constraintEnd\u toStartOf=“家长”//cardwiew赚钱,你也尝试过android:layout_width=“0dp”(基本上是匹配约束)哦,你还忘了在你的销售卡视图中包含布局,所以你的销售卡视图中的所有视图都不能正确显示。@Mistart有帮助吗?当然,如果这有帮助,你能接受答案吗?这样其他有同样问题的人就可以使用它了。先生,没有使用很多嵌套布局消耗大量内存吗?你可以替换嵌套布局查看片段,设计片段(案例中的卡片视图)没有更多的嵌套视图。但我认为这会增加很多复杂性,例如:这个布局是针对主片段的,所以你想让我在主片段中包含4个片段。如果我错了,请纠正我,因为下次你练习时,难度会降低。如果这个布局工作正常,你可以继续使用它(唯一的嵌套对象是包含所有其他图像的卡片视图)