Android Java 动态修改 CheckBox 样式

      小菜一直在处理动态配置页面颜色方面的工作，包括各布局，各控件等，而小菜却在最常用最基本的 CheckBox 选项框这个控件却栽了跟头，折腾了好久，今天有机会总结整理一下。

      大家都很熟悉，xml 在很多时候大大节省了我们的开发时间，但 xml 里面配置的样式只有默认的，在动态修改方面还是要靠 Java/Kotlin 代码优化。基本上 xml 中可以配置的属性在 Java/Kotlin 代码中都有相对应的方法，然而小菜在对应使用 CheckBox 控件的 **android:buttonTint="@color/colorAccent"** 属性时，却不尽如人意，不仅在设置过程中需要版本大于21，更重要的是设置完之后并不起效果。小菜也查阅了不少资料，请教了几位大神，依旧没有解决问题。

      实在没办法，小菜决定放弃 CheckBox 转投 v7 包中的 AppCompatCheckBox，通过设置 setSupportButtonTintList 方法来动态修改选项框颜色。


***

小菜的步骤如下：

1. 设置两个默认的 CheckBox 选中/未选中 状态作为参照，如图中第一行；

2. 设置两个 AppCompatCheckBox 默认通过设置 style.xml 主题色配置，可实现与 CheckBox 效果一致，如图中第二行，但并非小菜想要的方式；

```

<style name="MyCheckBox" parent="Theme.AppCompat.Light">

    <item name="colorControlNormal">@color/avoscloud_feedback_text_gray</item>

    <item name="colorControlActivated">@color/colorPrimary</item>

</style>

<style name="MyCheckBox2" parent="Theme.AppCompat.Light">

    <item name="colorControlNormal">@color/avoscloud_feedback_text_gray</item>

    <item name="colorControlActivated">@color/colorPrimaryDark</item>

</style>

```

3. 设置两个 AppCompatCheckBox 在 Java/Kotlin 代码中设置 setSupportButtonTintList 方法，但是在未选中状态下，选择框依旧是配置的主题色，与 CheckBox 默认的灰色不一致，如图中第三行，仍需优化；

```

accb.setSupportButtonTintList(ColorStateList.valueOf(getResources().getColor(R.color.colorAccent)));

```

4. 设置两个 AppCompatCheckBox 在 Java/Kotlin 代码中不仅设置 setSupportButtonTintList 方法，且监听 CompoundButton.OnCheckedChangeListener 方法，再监听选中和未选中状态中对选项框颜色做处理。

```Java

accb.setSupportButtonTintList(BitmapUtil.createColorStateList(Color.GRAY, Color.RED, Color.RED,Color.RED));

accb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

    @Override

    public void onCheckedChanged(CompoundButton compoundButton, boolean b)

    {

        if(b){

            accb.setSupportButtonTintList(BitmapUtil.createColorStateList(Color.RED, Color.RED, Color.RED,Color.RED));

        }else{

            accb.setSupportButtonTintList(BitmapUtil.createColorStateList(Color.GRAY, Color.RED, Color.RED,Color.RED));

        }

    }

});

```

***

**Tips1：** 若 Java/Kotlin 代码与 style.xml 均设置样式，以 Java/Kotlin 代码样式为主。

**Tips2：** 在设置 setSupportButtonTintList 方法时，初始状态为选中时，颜色列表第一个应为配置的颜色值；若为未选中时，颜色列表第一个应为默认系统灰色。

```

// 工具类 绘制不同状态的颜色

public class BitmapUtil {

    /**

     * 对TextView设置不同状态时其文字颜色

     * @param normal

     * @param pressed

     * @param focused

     * @param unable

     * @return

     */

    public static ColorStateList createColorStateList(int normal, int pressed, int focused, int unable) {

        int[] colors = new int[] { pressed, focused, normal, focused, unable, normal };

        int[][] states = new int[6][];

        states[0] = new int[] { android.R.attr.state_pressed, android.R.attr.state_enabled };

        states[1] = new int[] { android.R.attr.state_enabled, android.R.attr.state_focused };

        states[2] = new int[] { android.R.attr.state_enabled };

        states[3] = new int[] { android.R.attr.state_focused };

        states[4] = new int[] { android.R.attr.state_window_focused };

        states[5] = new int[] {};

        ColorStateList colorList = new ColorStateList(states, colors);

        return colorList;

    }

}

```

```

// Java 对 AppCompatCheckBox 绘制颜色

public class CheckBoxActivity extends AppCompatActivity {

    AppCompatCheckBox accb1, accb2, accb3, accb4, accb5, accb6;

    TextView mTitleTv;

    @Override

    protected void onCreate(@Nullable Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_checkbox);

        mTitleTv = (TextView) this.findViewById(R.id.tv_toolbar_title);

        mTitleTv.setText("Java 动态修改 CheckBox 颜色");

        accb1 = (AppCompatCheckBox) this.findViewById(R.id.accb1);

        accb2 = (AppCompatCheckBox) this.findViewById(R.id.accb2);

        accb3 = (AppCompatCheckBox) this.findViewById(R.id.accb3);

        accb4 = (AppCompatCheckBox) this.findViewById(R.id.accb4);

        accb5 = (AppCompatCheckBox) this.findViewById(R.id.accb5);

        accb6 = (AppCompatCheckBox) this.findViewById(R.id.accb6);

        accb3.setSupportButtonTintList(ColorStateList.valueOf(getResources().getColor(R.color.colorAccent)));

        accb4.setSupportButtonTintList(ColorStateList.valueOf(Color.GREEN));

        accb5.setSupportButtonTintList(BitmapUtil.createColorStateList(getResources().getColor(R.color.colorAccent), getResources().getColor(R.color.colorAccent), getResources().getColor(R.color.colorAccent), getResources().getColor(R.color.colorAccent)));

        accb5.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

            @Override

            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {

                if (b) {

                    accb5.setSupportButtonTintList(BitmapUtil.createColorStateList(getResources().getColor(R.color.colorAccent), getResources().getColor(R.color.colorAccent), getResources().getColor(R.color.colorAccent), getResources().getColor(R.color.colorAccent)));

                } else {

                    accb5.setSupportButtonTintList(BitmapUtil.createColorStateList(Color.GRAY, getResources().getColor(R.color.colorAccent), getResources().getColor(R.color.colorAccent), getResources().getColor(R.color.colorAccent)));

                }

            }

        });

        accb6.setSupportButtonTintList(BitmapUtil.createColorStateList(Color.GRAY, Color.GREEN, Color.GREEN, Color.GREEN));

        accb6.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

            @Override

            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {

                if (b) {

                    accb6.setSupportButtonTintList(BitmapUtil.createColorStateList(Color.GREEN, Color.GREEN, Color.GREEN, Color.GREEN));

                } else {

                    accb6.setSupportButtonTintList(BitmapUtil.createColorStateList(Color.GRAY, Color.GREEN, Color.GREEN, Color.GREEN));

                }

            }

        });

    }

}

```

```

// xml 布局

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

    <include layout="@layout/common_title" />

    <TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:paddingLeft="12dp"

        android:paddingTop="12dp"

        android:text="系统默认 CheckBox"

        android:textColor="@color/colorAccent" />

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal"

        android:padding="12dp">

        <CheckBox

            android:id="@+id/cb1"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:layout_weight="1"

            android:checked="true"

            android:text="默认已选中" />

        <CheckBox

            android:id="@+id/cb2"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:checked="false"

            android:text="默认未选中" />

    </LinearLayout>

    <TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:paddingLeft="12dp"

        android:paddingTop="12dp"

        android:text="AppCompatCheckBox style.xml 主题色配置"

        android:textColor="@color/colorPrimary" />

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal"

        android:padding="12dp">

        <android.support.v7.widget.AppCompatCheckBox

            android:id="@+id/accb1"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:layout_weight="1"

            android:checked="true"

            android:text="默认已选中"

            android:theme="@style/MyCheckBox" />

        <android.support.v7.widget.AppCompatCheckBox

            android:id="@+id/accb2"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:layout_weight="1"

            android:checked="false"

            android:text="默认未选中"

            android:theme="@style/MyCheckBox2" />

    </LinearLayout>

    <TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:paddingLeft="12dp"

        android:paddingTop="12dp"

        android:text="AppCompatCheckBox Java 代码颜色配置"

        android:textColor="@color/colorAccent" />

    <TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:paddingLeft="12dp"

        android:paddingTop="12dp"

        android:text="但未选中状态中与系统灰色不一致，需修改" />

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal"

        android:padding="12dp">

        <android.support.v7.widget.AppCompatCheckBox

            android:id="@+id/accb3"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:layout_weight="1"

            android:checked="true"

            android:text="默认已选中"

            android:theme="@style/MyCheckBox" />

        <android.support.v7.widget.AppCompatCheckBox

            android:id="@+id/accb4"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:layout_weight="1"

            android:checked="false"

            android:text="默认未选中"

            android:theme="@style/MyCheckBox" />

    </LinearLayout>

    <TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:paddingLeft="12dp"

        android:paddingTop="12dp"

        android:text="与系统默认的 CheckBox 样式基本一致" />

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal"

        android:padding="12dp">

        <android.support.v7.widget.AppCompatCheckBox

            android:id="@+id/accb5"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:layout_weight="1"

            android:checked="true"

            android:text="默认已选中" />

        <android.support.v7.widget.AppCompatCheckBox

            android:id="@+id/accb6"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:layout_weight="1"

            android:checked="false"

            android:text="默认未选中" />

    </LinearLayout>

</LinearLayout>

```

***