Android布局问题：移除CardView与旋转方形的重叠区域

布局右下角的旋转45度方形ImageView与CardView存在重叠，要让两者呈现为完整视觉整体，可通过以下几种方案解决：

现有代码片段 #

CardView代码：

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="8dp">

    <!-- Content inside the CardView -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@drawable/no_border">

方形ImageView代码：

<ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/square"
            android:layout_marginTop="-12dp"
            android:rotation="45"
            android:scaleType="centerInside"/>

方案1：用ConstraintLayout精准定位偏移 #

将CardView和ImageView放在同一个ConstraintLayout中，通过约束和偏移让旋转后的方形刚好衔接CardView右下角，避免重叠：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">

        <!-- CardView内部内容 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:background="@drawable/no_border">
        </LinearLayout>
    </androidx.cardview.widget.CardView>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/square"
        android:rotation="45"
        android:scaleType="centerInside"
        app:layout_constraintBottom_toBottomOf="@id/card_view"
        app:layout_constraintEnd_toEndOf="@id/card_view"
        <!-- 根据方形尺寸和CardView圆角微调偏移值 -->
        android:translationX="16dp"
        android:translationY="16dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>

通过translationX和translationY将旋转后的方形向右下方偏移，避开CardView的圆角区域，同时保持视觉上的连贯。

方案2：将方形整合到CardView背景（彻底消除重叠） #

把旋转方形作为CardView背景的一部分，通过自定义Drawable实现，从根源上避免布局层级重叠：

1. 在res/drawable目录创建card_with_square_bg.xml：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- CardView主体背景 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/card_background"/>
            <corners android:radius="8dp"/>
        </shape>
    </item>
    <!-- 右下角旋转方形 -->
    <item
        android:right="0dp"
        android:bottom="0dp">
        <rotate
            android:fromDegrees="45"
            android:pivotX="50%"
            android:pivotY="50%">
            <shape android:shape="square">
                <solid android:color="@color/square_color"/>
                <!-- 方形尺寸按需调整 -->
                <size android:width="32dp" android:height="32dp"/>
            </shape>
        </rotate>
    </item>
</layer-list>

2. 修改CardView的背景设置：

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="8dp"
    android:background="@drawable/card_with_square_bg">

    <!-- 内部内容 -->
</androidx.cardview.widget.CardView>

这种方式将两者合并为一个视觉元素，完全不存在重叠问题。

方案3：FrameLayout下调整margin与定位 #

如果使用FrameLayout作为父布局，通过layout_gravity和margin调整方形位置：

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="8dp">

        <!-- 内部内容 -->
    </androidx.cardview.widget.CardView>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/square"
        android:rotation="45"
        android:scaleType="centerInside"
        android:layout_gravity="bottom|right"
        <!-- 根据实际尺寸调整margin，避开CardView圆角 -->
        android:layout_marginBottom="12dp"
        android:layout_marginRight="12dp"/>
</FrameLayout>

内容的提问来源于stack exchange，提问作者lucas lootan