Android自带控件样式修改

我们在做项目时经常会碰到要求改变系统的自带控件如CheckBox、RadioButton、AlertDialog等的颜色或者样式的要求，采用的方式往往也有很多种，这里将常用的几种方式记录一下。

以RadioButton为例，通常UX会给两张切图，分别是选中和非选中状态的圆形选择框图标，然后在drawable中新建一个radio_button_bg.xml的文件作为选择框的背景：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/radio_button_on" />
    <item android:drawable="@drawable/radio_button_off" />
</selector>

接着采用的方式可以是
1、直接设置android:button属性：

<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/radio_button_bg"
    android:text="选项一"/>

这种方式的缺陷是UX给的图标往往是固定尺寸的，可能显示出来的大小效果很差，但又无法设置button图标的尺寸。

2、采用RadioButton和TextView结合的方式，其中RadioButton仅用于显示图标，因此可以直接设置宽高，由TextView来显示文字：

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <RadioButton
        android:layout_width="@dimen/x36"
        android:layout_height="@dimen/x36"
        android:button="@drawable/radio_button_bg"
        android:checked="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="选项一"/>
</LinearLayout>

然而这种方式仅在点击RadioButton的时候有效果，点击文字无反应，如果需要点击整个视图都选中，必须实现自定义View，并且这样封装后，即使放在RadioGroup中，也无法实现单选的效果，必须自己实现单选逻辑以及选择的监听。另外还可以将RadioButton换成ImageView，但同样也需要自定义View来完成点击整个选中以及单选的功能。

3、实现继承自RadioButton的自定义View：

public class CustomRadioButton extends RadioButton {

    public CustomRadioButton(Context context) {
        super(context);
        initDrawable();
    }

    public CustomRadioButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        initDrawable();
    }

    public CustomRadioButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initDrawable();
    }

    private void initDrawable() {
        int size = Utils.getDimen(R.dimen.x36);
        int padding = Utils.getDimen(R.dimen.x10);
        Drawable drawable = Utils.getDrawable(R.drawable.radio_button_bg);
        drawable.setBounds(0, 0, size, size);
        setCompoundDrawables(drawable, null, null, null);
        setCompoundDrawablePadding(padding);
        setButtonDrawable(null);
    }
}

这里通过设置leftDrawable来设置图标，由于leftDrawable可以设置Bounds和Padding，因此可以将图标设置成合适的尺寸。另外需要将ButtonDrawable设成null，以去掉系统自带的图标。接着就可以像使用RadioButton一样使用CustomRadioButton了。

4、之前我往往采用的第三种方式，直到今天突然发现了一种更好更方便的方式，那就是利用系统的Theme。
起因在于UX对项目中的弹框AlertDialog的按钮文字颜色不满意，想要换成应用统一的主题色，但是我们的AlertDialog是直接采用的系统的，并没有做自定义的弹框，又不想为了这个小细节另外做自定义的弹框，然后搜寻一下，就看到了这篇文章：http://www.jianshu.com/p/fb671e11e455 在此感谢一下作者。总的来说，就是根据应用的Theme一层层点进去寻找跟自己要改动的目标有关的属性，找到后仿照系统的属性值，在自己的styles.xml里面重写：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <!--弹框样式-->
    <item name="alertDialogTheme">@style/AlertDialog</item>
    <!--单选框-->
    <item name="android:listChoiceIndicatorSingle">@drawable/radio_button_bg</item>
    <!--多选框-->
    <item name="android:listChoiceIndicatorMultiple">@drawable/checkbox_bg</item>
</style>

<style name="AlertDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="colorAccent">#12b7f5</item>
</style>

找寻AlertDialog的按钮文字颜色的过程这里就不重复了，可以参考上面提到的文章，这里主要讲一下RadioButton和CheckBox的图标的修改。同样从Theme.AppCompat.Light.DarkActionBar的parent一层层点进去，最后找到Platform.AppCompat.Light里面的：

<item name="android:listChoiceIndicatorSingle">@drawable/abc_btn_radio_material</item>
<item name="android:listChoiceIndicatorMultiple">@drawable/abc_btn_check_material</item>

这两个属性分别对应单选框RadioButton和多选框CheckBox的图标，点开abc_btn_radio_material和abc_btn_check_material可以看到这两个xml文件的内容分别是：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/abc_btn_radio_on_mtrl" />
    <item android:drawable="@drawable/abc_btn_radio_off_mtrl" />
</selector>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/abc_btn_checkbox_checked_mtrl" />
    <item android:drawable="@drawable/abc_btn_checkbox_unchecked_mtrl" />
</selector>

再次点进里面的具体图片如abc_btn_radio_on_mtrl，发现是svg格式的图片，难怪尺寸不用适配就很合适：

<vector
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:name="btn_radio_to_off_mtrl"
        android:width="32dp"
        android:viewportWidth="32"
        android:height="32dp"
        android:viewportHeight="32">
    <group
            android:name="btn_radio_to_off_mtrl_0"
            android:translateX="16"
            android:translateY="16" >
        <group
                android:name="ring_outer" >
            <path
                    android:name="ring_outer_path"
                    android:strokeColor="#FF000000"
                    android:strokeWidth="2"
                    android:pathData="M 0.0,-9.0 c 4.9705627482,0.0 9.0,4.0294372518 9.0,9.0 c 0.0,4.9705627482 -4.0294372518,9.0 -9.0,9.0 c -4.9705627482,0.0 -9.0,-4.0294372518 -9.0,-9.0 c 0.0,-4.9705627482 4.0294372518,-9.0 9.0,-9.0 Z" />
        </group>
        <group
                android:name="dot_group" >
            <path
                    android:name="dot_path"
                    android:pathData="M 0.0,-5.0 c -2.7619934082,0.0 -5.0,2.2380065918 -5.0,5.0 c 0.0,2.7619934082 2.2380065918,5.0 5.0,5.0 c 2.7619934082,0.0 5.0,-2.2380065918 5.0,-5.0 c 0.0,-2.7619934082 -2.2380065918,-5.0 -5.0,-5.0 Z"
                    android:fillColor="#FF000000" />
        </group>
    </group>
</vector>

其中里面的 android:strokeColor 和 android:fillColor 就是我们想要改变的选择框的边框和内部填充的颜色。因此，直接将这四个svg图片和两个selector的xml文件都拷到自己的res/drawable下面，改个名字，然后将svg文件里面的 android:strokeColor 和 android:fillColor 改成想要的颜色就可以了。

其实之前的主要问题就在于图标的尺寸不好做适配，如果UX直接提供了svg的图标，那么直接采用第一种方式也是ok的，当然，采用第四种方式可以避免在每个RadioButton和CheckBox里面去设置android:button属性，更加方便。总的来说，以后要是想修改系统的控件的样式，可以先尝试去寻找Theme里面对应的属性，然后仿造系统的属性值来实现我们自己的属性值。