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里面对应的属性,然后仿造系统的属性值来实现我们自己的属性值。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 132,020评论 20 560
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 9,834评论 2 43
  • 今年的冬天 很冷很冷 大家都贴着暖宝宝 抱着暖手宝 穿着大绵袄 唯有我 抱着冰块想取暖
    奈奈的简书阅读 26评论 10 2
  • 罗振宇在罗辑思维中谈到张艺谋的故事。周晓枫为张艺谋写传,周问张,你为什么年年出一部电影,为什么不五六年才出一部,这...
    隔壁村的教主阅读 70评论 0 3
  • 想在这儿写点东西,记录一下自己这漫长又无奈的假期……
    做梦成痴阅读 21评论 0 0