ConstraintLayout布局异常：小屏双CardView无间距问题求助

我明白你遇到的麻烦了——在小尺寸屏幕上，原本横向并排的两个CardView会失去间距，变得紧紧贴在一起。虽然你已经用左右Guideline控制了整体的边距，但两个CardView之间缺少相互的约束和间距设置，这就导致屏幕宽度不足时，它们会直接挤在一起。

下面是针对性的解决方案，完全基于你的ConstraintLayout布局来调整：

核心修改思路 #

• 给两个CardView之间添加横向关联约束，让它们的位置相互依赖
• 设置固定的横向间距，确保无论屏幕大小，中间都有留白
• 给CardView添加最小宽度，避免在极小屏幕上被过度压缩导致内容变形

修改后的完整布局代码 #

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 假设你的view7和左右Guideline已定义 -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="16dp" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_end="16dp" />

    <View
        android:id="@+id/view7"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.cardview.widget.CardView
        android:id="@+id/id_sale_card"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="7dp"
        android:layout_marginEnd="8dp" <!-- 两个CardView之间的间距 -->
        android:minWidth="120dp" <!-- 防止过度压缩的最小宽度 -->
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@+id/view7"
        app:layout_constraintEnd_toStartOf="@+id/id_card_earning"> <!-- 关联到第二个CardView的起始位置 -->

        <!-- 内部控件保持原有设置不变 -->
        <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"
        android:layout_marginStart="8dp" <!-- 和第一个CardView的间距对应 -->
        android:minWidth="120dp" <!-- 防止过度压缩的最小宽度 -->
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintTop_toBottomOf="@+id/view7"
        app:layout_constraintStart_toEndOf="@+id/id_sale_card"> <!-- 关联到第一个CardView的结束位置 -->

        <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.constraintlayout.widget.ConstraintLayout>

调整说明 #

1. 相互约束关联：通过app:layout_constraintEnd_toStartOf和app:layout_constraintStart_toEndOf让两个CardView建立横向依赖，系统会自动维护它们的相对位置，不会出现重叠。
2. 固定间距：给两个CardView分别设置方向相反的margin，确保中间始终有8dp的留白（你可以根据需求调整这个数值）。
3. 最小宽度保护：android:minWidth可以避免CardView在极小屏幕上被压缩到内容无法正常显示，保证UI的可用性。

如果你希望两个CardView在屏幕空间充足时自动平分剩余宽度，可以把android:layout_width改成0dp，再给每个CardView添加app:layout_constraintHorizontal_weight="1"，这样它们会自动分配空间，同时保持中间的间距。

内容的提问来源于stack exchange，提问作者Abdelaziz Waheed