Android开发：CardView实现圆形ImageView的跨机型适配问题解决

问题根因 #

• 代码里混了大量无效属性：android:shape、android:innerRadius、android:thicknessRatio、android:useLevel 这些全是shape drawable的专属配置，直接写在CardView标签上根本不会被组件解析，部分机型显示异常就是这些无效属性触发了ROM的View自定义属性解析bug。
• 圆角参数设置存在逻辑错误：给宽高74dp的CardView设置了app:cardCornerRadius="74dp"，正圆的正确圆角半径应该是控件边长的一半也就是37dp，设置超出控件尺寸的圆角值，不同系统版本的绘图路径计算逻辑不一致，很容易出现裁切不完整的问题。
• CardView本身的裁切逻辑有版本差异：CardView默认不会主动把内部子View的内容裁切到圆角边界，只有部分开启了子View硬裁切的ROM能刚好压出圆形效果，其余机型会直接露出方形的ImageView边角，和实际看到的异常效果完全匹配。
• 缺失CardView的兼容配置：没有开启圆角重叠防护、兼容内边距开关，进一步放大了不同系统版本的渲染差异。

实际修复方案 #

方案1：修正CardView配置（改动最小） #

先删掉所有无效的shape类属性，把参数修正到正确值，补全跨版本兼容配置，修正后的代码：

<androidx.cardview.widget.CardView
    android:id="@+id/card01"
    android:layout_width="74dp"
    android:layout_height="74dp"
    android:layout_marginStart="3dp"
    android:layout_marginTop="3dp"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    app:cardCornerRadius="37dp"
    app:cardElevation="0dp"
    app:cardPreventCornerOverlap="true"
    app:cardUseCompatPadding="true">

    <ImageView
        android:id="@+id/profile_image1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        app:srcCompat="@mipmap/ic_person_foreground" />

</androidx.cardview.widget.CardView>

小提醒：把cardCornerRadius设为控件边长的1/2，而不是和边长相等，是因为当圆角值等于或超过控件边长时，部分版本的CardView会直接判定参数无效跳过圆角渲染，37dp的设置刚好能形成完整正圆形边界，兼容性更好。

方案2：零嵌套的更稳妥实现 #

如果改完CardView还是遇到机型适配问题，直接换用Material库提供的ShapeableImageView实现圆形展示，不需要嵌套CardView，渲染逻辑全版本统一无差异，适配性更好：
布局代码：

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/profile_image1"
    android:layout_width="74dp"
    android:layout_height="74dp"
    android:layout_marginStart="3dp"
    android:layout_marginTop="3dp"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:scaleType="centerCrop"
    app:srcCompat="@mipmap/ic_person_foreground"
    app:shapeAppearanceOverlay="@style/CircleImageShape" />

在themes.xml中补充对应样式：

<style name="CircleImageShape">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

内容的提问来源于stack exchange，提问作者levi.hrb