羊皮书APP（Android版）开发系列（二十七）一分钟轻松修改

我们在开发过程中经常会用到CheckBox、RadioButton、RatingBar、SeekBar 这几个控件，而系统默认的样式却不能满足我们的要求，通常我们会直接采用github的开源库来完成，但是，这么一个简单的小功能引入其他的开源库实在不划算，因此还是自己定义样式比较好。

先看下效果图：

效果图

要是实现上图效果，首先我们在colors.xml中定义四种颜色：

    <color name="firstColor">#00BCD4</color>
    <color name="secondColor">#E91E63</color>
    <color name="thirdColor">#FF5722</color>
    <color name="fourthColor">#4CAF50</color>

然后在styles.xml中定义四种样式：

<style name="FirstControl" parent="Theme.AppCompat.Light">
        <item name="colorControlNormal">@color/firstColor</item>
        <item name="colorControlActivated">@color/firstColor</item>
    </style>

    <style name="SecondControl" parent="Theme.AppCompat.Light">
        <item name="colorControlNormal">@color/secondColor</item>
        <item name="colorControlActivated">@color/secondColor</item>
    </style>

    <style name="ThirdControl" parent="Theme.AppCompat.Light">
        <item name="colorControlNormal">@color/thirdColor</item>
        <item name="colorControlActivated">@color/thirdColor</item>
    </style>

    <style name="GreenControl" parent="Theme.AppCompat.Light">
        <item name="colorControlNormal">@color/fourthColor</item>
        <item name="colorControlActivated">@color/fourthColor</item>
    </style>

最后在布局文件中使用这四种样式即可：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    >

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

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            android:theme="@style/FirstControl" />

        <RadioButton
            android:layout_weight="1"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            android:theme="@style/SecondControl" />
    </LinearLayout>

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

        <RadioButton
            android:layout_weight="1"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            android:theme="@style/ThirdControl" />

        <RadioButton
            android:layout_weight="1"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            android:theme="@style/GreenControl" />
    </LinearLayout>

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

        <CheckBox
            android:layout_weight="1"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            android:theme="@style/FirstControl" />

        <CheckBox
            android:layout_weight="1"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            android:theme="@style/SecondControl" />
    </LinearLayout>

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

        <CheckBox
            android:layout_weight="1"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            android:theme="@style/ThirdControl" />

        <CheckBox
            android:layout_weight="1"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            android:theme="@style/GreenControl" />
    </LinearLayout>

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

        <RatingBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:numStars="3"
            android:rating="1"
            android:theme="@style/FirstControl" />

        <RatingBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:numStars="3"
            android:rating="1"
            android:theme="@style/SecondControl" />
    </LinearLayout>

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

        <RatingBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:numStars="3"
            android:rating="2"
            android:theme="@style/ThirdControl" />

        <RatingBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:numStars="3"
            android:rating="3"
            android:theme="@style/GreenControl" />
    </LinearLayout>

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

        <SeekBar
            android:layout_weight="1"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:theme="@style/FirstControl" />

        <SeekBar
            android:layout_weight="1"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:theme="@style/SecondControl" />

        <SeekBar
            android:layout_weight="1"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:theme="@style/ThirdControl" />

        <SeekBar
            android:layout_weight="1"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:theme="@style/GreenControl" />

    </LinearLayout>

</LinearLayout>

总结：通过一个简单的样式定义，即可完成对android原生控件样式的修改，省时省力省资源。赶紧试试吧！