如何制作带有独立选择按钮的自定义颜色选择器（color picker）

你的方案完全合理，RadioGroup原生支持单选互斥逻辑，不用自己手写多按钮的选中状态同步代码，开发和维护成本都很低，完全可以满足需求。具体实现步骤如下：

1. 编写状态背景drawable #

首先在res/drawable目录下创建三个文件：

• 未选中状态样式shape_color_picker_unchecked.xml（只有纯色填充，无边框）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/transparent" />
    <!-- 需要圆角可以加下面这行，不需要就删除 -->
    <corners android:radius="2dp" />
</shape>

• 选中状态样式shape_color_picker_checked.xml（带1dp选中边框）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/transparent" />
    <stroke
        android:width="1dp"
        android:color="@color/white" />
    <corners android:radius="2dp" />
</shape>

• 状态选择器bg_color_radio_selector.xml，关联选中/未选中状态

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/shape_color_picker_checked" android:state_checked="true" />
    <item android:drawable="@drawable/shape_color_picker_unchecked" android:state_checked="false" />
</selector>

2. 自定义RadioButton样式 #

在res/values/styles.xml中添加专用样式，隐藏原生的圆形单选按钮，绑定我们写的背景：

<style name="ColorPickerRadioBtn" parent="Widget.AppCompat.CompoundButton.RadioButton">
    <item name="android:button">@null</item>
    <item name="android:background">@drawable/bg_color_radio_selector</item>
    <item name="android:layout_width">40dp</item>
    <item name="android:layout_height">40dp</item>
    <item name="android:layout_marginHorizontal">6dp</item>
</style>

3. 布局中引入RadioGroup和自定义样式的RadioButton #

通过backgroundTint属性给每个按钮设置对应的填充色即可：

<RadioGroup
    android:id="@+id/color_picker_group"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <androidx.appcompat.widget.AppCompatRadioButton
        android:id="@+id/color_red"
        style="@style/ColorPickerRadioBtn"
        android:backgroundTint="@color/red" />

    <androidx.appcompat.widget.AppCompatRadioButton
        android:id="@+id/color_yellow"
        style="@style/ColorPickerRadioBtn"
        android:backgroundTint="@color/yellow" />

    <!-- 剩余4个颜色按上述格式补充，修改backgroundTint为对应颜色即可 -->

</RadioGroup>

4. 选中监听 #

直接给RadioGroup设置选中监听即可拿到选中的颜色：

// Kotlin示例
color_picker_group.setOnCheckedChangeListener { _, checkedId ->
    when(checkedId) {
        R.id.color_red -> { /* 选中红色的逻辑 */ }
        R.id.color_yellow -> { /* 选中黄色的逻辑 */ }
    }
}

// Java示例
colorPickerGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        if (checkedId == R.id.color_red) {
            // 选中红色的逻辑
        } else if (checkedId == R.id.color_yellow) {
            // 选中黄色的逻辑
        }
    }
});

注意事项：如果需要兼容API21以下版本，不要使用backgroundTint，可以给每个颜色单独创建对应的drawable文件设置填充色即可。

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