Android Kotlin：圆形头像编辑图标被CardView裁剪问题求助

嘿，这个问题我之前也碰到过！原因很简单——CardView默认开启了clipToOutline属性，它会强制所有子视图都限制在CardView的圆角范围内，所以你的编辑图标超出头像的部分就被无情切掉了。给你两个解决方案，优先推荐第一个哦：

方案一：将编辑图标移出CardView（推荐） #

把CardView和编辑图标放在一个父布局（比如ConstraintLayout）里，让编辑图标脱离CardView的子层级，这样就不会受到CardView的裁剪限制了。这种方式布局结构更清晰，也更易维护。

示例代码：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="30dp">

    <!-- 圆形头像的CardView -->
    <androidx.cardview.widget.CardView
        android:id="@+id/profileCard"
        android:layout_width="120dp"
        android:layout_height="120dp"
        app:cardCornerRadius="60dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/Profile_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/profile_img" />

    </androidx.cardview.widget.CardView>

    <!-- 编辑图标，独立于CardView -->
    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/Edit_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/edit_photo"
        android:layout_marginTop="80dp"
        android:layout_marginStart="90dp"
        app:srcCompat="@drawable/edit"
        app:layout_constraintStart_toStartOf="@id/profileCard"
        app:layout_constraintTop_toTopOf="@id/profileCard" />

</androidx.constraintlayout.widget.ConstraintLayout>

解释：用ConstraintLayout作为父容器，通过约束将编辑图标定位到头像的角落，这样编辑图标不在CardView的子视图列表里，自然不会被CardView的圆角裁剪，超出部分能正常显示。

方案二：关闭CardView的裁剪，让头像自己实现圆形 #

如果一定要把编辑图标放在CardView内部，可以关闭CardView的clipToOutline属性，同时让头像ImageView自己实现圆形裁剪，这样既保留头像的圆形效果，又不会裁剪编辑图标。

示例代码：

<androidx.cardview.widget.CardView
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="30dp"
    app:cardCornerRadius="60dp"
    android:clipToOutline="false"> <!-- 关闭CardView的裁剪 -->

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/Profile_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/profile_img"
        android:outlineProvider="background"
        android:clipToOutline="true"> <!-- 让ImageView自己裁剪成圆形 -->
        <android:background>
            <shape android:shape="oval">
                <solid android:color="@android:color/transparent" />
            </shape>
        </android:background>
    </androidx.appcompat.widget.AppCompatImageView>

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/Edit_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end" <!-- 用重力定位更灵活，代替固定margin -->
        android:layout_margin="8dp"
        android:contentDescription="@string/edit_photo"
        app:srcCompat="@drawable/edit" />

</androidx.cardview.widget.CardView>

解释：关闭CardView的clipToOutline后，它不会再裁剪子视图；给头像ImageView设置圆形背景并开启自身的clipToOutline，这样头像依然是圆形，而编辑图标超出CardView圆角的部分就能正常显示了。不过这种方式在部分Android版本上可能存在兼容性问题，所以还是优先推荐方案一。

内容的提问来源于stack exchange，提问作者Mubashir Hassan Minhas