ConstraintLayout 内的 CardView 重叠边缘答案

【问题标题】：CardView inside ConstraintLayout overlapping edgeConstraintLayout 内的 CardView 重叠边缘
【发布时间】：2020-10-31 10:24:15
【问题描述】：

我想让两个 CardView 并排放置，但由于其中的 ImageView 比 CardView 大，它的边缘重叠。两边的边距应与其他卡片相等。

        <androidx.cardview.widget.CardView
                android:id="@+id/card_facebook"
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:layout_gravity="start"
                android:layout_marginStart="20dp"
                android:layout_marginTop="20dp"
                android:layout_marginEnd="10dp"
                app:cardCornerRadius="12dp"
                app:cardElevation="12dp"
                app:layout_constraintEnd_toStartOf="@id/card_instagram"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/card_register">
            <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">
                <ImageView
                        android:id="@+id/img_facebook"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:scaleType="centerCrop"
                        app:srcCompat="@drawable/img_facebook" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
                android:id="@+id/card_instagram"
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:layout_gravity="end"
                android:layout_marginStart="10dp"
                android:layout_marginTop="20dp"
                android:layout_marginEnd="20dp"
                app:cardCornerRadius="12dp"
                app:cardElevation="12dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/card_facebook"
                app:layout_constraintTop_toBottomOf="@id/card_register">

            <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">

                <ImageView
                        android:id="@+id/img_instagram"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:scaleType="centerCrop"
                        app:srcCompat="@drawable/img_instagram" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

如何保持边缘的边距并阻止 CardViews 重叠？无论图像的某些部分不可见，图像仍应填满整个 CardView。

【问题讨论】：

标签： java android android-layout android-constraintlayout

【解决方案1】：

您已将宽度设置为 CardViews wrap_content。这就是为什么它需要宽度。给0dp 而不是wrap_content。这样就可以正常工作了。

<androidx.cardview.widget.CardView
    android:id="@+id/card_facebook"
    android:layout_width="0dp"
    android:layout_height="100dp"
    android:layout_gravity="start"
    android:layout_marginStart="20dp"
    android:layout_marginTop="20dp"
    android:layout_marginEnd="10dp"
    app:cardCornerRadius="12dp"
    app:cardElevation="12dp"
    app:layout_constraintEnd_toStartOf="@id/card_instagram"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/card_register">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
        <ImageView
            android:id="@+id/img_facebook"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            app:srcCompat="@drawable/img_facebook" />
    </LinearLayout>
</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
    android:id="@+id/card_instagram"
    android:layout_width="0dp"
    android:layout_height="100dp"
    android:layout_gravity="end"
    android:layout_marginStart="10dp"
    android:layout_marginTop="20dp"
    android:layout_marginEnd="20dp"
    app:cardCornerRadius="12dp"
    app:cardElevation="12dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/card_facebook"
    app:layout_constraintTop_toBottomOf="@id/card_register">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/img_instagram"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            app:srcCompat="@drawable/img_instagram" />
    </LinearLayout>
    
</androidx.cardview.widget.CardView>

【讨论】：

谢谢！请问为什么0dp有效？这是否意味着 CardView 是不可见的，因为它的宽度为零？
在ConstraintLayout 中，如果任何孩子在任何轴上都有约束（如结束和开始，或顶部和底部），则 0dp 表示取全长。您的卡片视图对结束和开始都有约束。这就是为什么使用 0dp 可以解决您的问题。