ConstraintLayout 内的 CardView 重叠边缘

Question

我想让两个 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>

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

Answer 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>

ConstraintLayout 内的 CardView 重叠边缘

CardView inside ConstraintLayout overlapping edge

java

android

android-layout

android-constraintlayout