Android 如何基于CircleImageView实现带选中/未选中态的动态设色圆形选色控件

你的核心冲突是不能把选中态逻辑绑在CircleImageView的src属性上——因为src通道要留出来给动态设置圆形底色的逻辑用，直接把selector设置到src上一定会覆盖代码动态设置的颜色值。下面是最适配你现有代码的落地方案。

方案原理 #

把选中态的内层白圆+对勾效果，从CircleImageView的绘制层拆出来，用上层叠加View的方式实现，完全不干扰底层CircleImageView的src动态设色逻辑。

具体实现步骤 #

• 准备两个drawable资源
  1. 内层选中态组合资源（居中白圆+对勾，尺寸小于底层32dp的圆形）：
     新建drawable/check_mark_overlay.xml，用layer-list实现：

     <layer-list>
         <!-- 居中白色小圆 -->
         <item android:gravity="center">
             <shape android:shape="oval">
                 <solid android:color="#FFFFFF"/>
                 <size android:width="16dp" android:height="16dp"/>
             </shape>
         </item>
         <!-- 居中对勾图形 -->
         <item
             android:gravity="center"
             android:width="10dp"
             android:height="10dp"
             android:drawable="@drawable/ic_baseline_check_24"/>
     </layer-list>
     

  2. 状态选择器资源，根据选中态控制叠加层的显示：
     新建drawable/selection_state_selector.xml：

     <selector>
         <item android:state_selected="true" android:drawable="@drawable/check_mark_overlay"/>
         <item android:drawable="@android:color/transparent"/>
     </selector>
     

• 调整布局结构
  把原来单独使用的CircleImageView用FrameLayout包裹，完全保留CircleImageView原有属性，不占用它的src通道：

  <FrameLayout
      android:id="@+id/color_option_item"
      android:layout_width="32dp"
      android:layout_height="32dp"
      android:layout_gravity="center">
  
      <!-- 原有CircleImageView，完全保留动态设置底色的能力 -->
      <de.hdodenhof.circleimageview.CircleImageView
          android:id="@+id/circle_crop"
          android:layout_width="match_parent"
          android:layout_height="match_parent"/>
  
      <!-- 上层叠加层，用来显示选中态的对勾效果 -->
      <View
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="@drawable/selection_state_selector"
          android:duplicateParentState="true"/>
  </FrameLayout>
  

  说明：duplicateParentState="true"的作用是让上层叠加View直接继承父容器的选中/按压等状态，不需要单独给叠加层设置状态切换逻辑。
• 交互逻辑实现
  你原来动态给circle_crop设置任意颜色作为圆形底色的代码完全不用改动，只需要在点击选色项时控制父容器的选中状态即可：

  // 绑定每个选色项的点击事件
  colorOptionItem.setOnClickListener {
      // 同组选项先全部置为未选中
      colorGroup.forEach { it.isSelected = false }
      // 当前点击项设为选中
      it.isSelected = true
  }
  

方案优势 #

• 完全没有占用CircleImageView的src属性通道，动态修改圆形底色的逻辑不受任何影响
• 不需要修改CircleImageView的源码，也不需要自定义View重写绘制逻辑，兼容性最好
• 状态切换完全走系统原生的selector机制，不需要额外写if-else判断选中态，维护成本低

不推荐的替代实现 #

如果不想用FrameLayout的包裹结构，也可以继承CircleImageView重写onDraw方法，在选中状态下额外绘制白圆和对勾，但这种方式需要自己处理尺寸适配、状态映射、触摸反馈等逻辑，开发成本远高于叠加层方案。

内容的提问来源于stack exchange，提问作者Michael Abyzov