自定义Chechbox样式

自定义checkbox样式
开发中，很多时候我们需要去单选选择，而系统默认提供的选择框实在是比较丑，大部分时候需要进行定制，默认创建单选框的代码如下：

<RadioGroup        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="60dp"        android:layout_marginLeft="60dp"        android:orientation="horizontal">        <RadioButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="选项1"/>        <RadioButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="选项2"/>        <RadioButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="选项3"/>    </RadioGroup>

效果图：

那么首先，我们需要去掉圆圈，这个很简单，加上一个属性即可：

android:button="@null"android:padding="10dp"

也增加了一点间距，不然就比较紧凑，效果如下：

但是这样还是比较难看，下面增加一个边框，这个需要自己写一个xml作为边框背景：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <stroke android:width="1dp" android:color="#0000ff"></stroke></shape>

上面添加了一个1dp的蓝色边框，效果如下：

稍微好看一点，但是发现中间有边框重叠了，这样不好看，那怎么去掉重叠的部分呢，给中间的checkbox的左右设置一个负的margin即可解决，margin的大小和边框大小一致，为1dp，代码如下：

android:layout_marginLeft="-1dp"android:layout_marginRight="-1dp"

效果图如下：

但是这样的效果还不令人满意，现在大部分都用圆角的效果，这里我们也加上，由于是两边有圆角，中间是不需要的，所以我们需要定义三个xml文件，分别左边添加左上角和左下角圆角效果，中间不添加，右边添加右上角和右下角圆角效果，具体代码如下：
左边背景：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <corners android:bottomLeftRadius="6dp" android:topLeftRadius="6dp" android:bottomRightRadius="0dp" android:topRightRadius="0dp"></corners>    <stroke android:width="1dp" android:color="#0000ff"></stroke></shape>

中间背景：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <stroke android:width="1dp" android:color="#0000ff"></stroke></shape>

右边背景：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <corners android:bottomLeftRadius="0dp" android:topLeftRadius="0dp" android:bottomRightRadius="6dp" android:topRightRadius="6dp"></corners>    <stroke android:width="1dp" android:color="#0000ff"></stroke></shape>

这里就多增加了一个corners的属性，这个就是定义圆角的，我们可以根据需要定义左右上下四个圆角。
最终的效果如下：

最后我们需要选中某个选项，它的背景变成选中状态，这个时候就需要用到selector了：
左边背景：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <!--选中时的背景-->    <item android:state_checked="true">        <shape>            <corners android:bottomLeftRadius="6dp" android:topLeftRadius="6dp" android:bottomRightRadius="0dp" android:topRightRadius="0dp"></corners>            <solid android:color="#0000ff"></solid>        </shape>    </item>    <!--未选中时的背景-->    <item>        <shape>            <corners android:bottomLeftRadius="6dp" android:topLeftRadius="6dp" android:bottomRightRadius="0dp" android:topRightRadius="0dp"></corners>            <stroke android:width="1dp" android:color="#0000ff"></stroke>        </shape>    </item></selector>

中间的背景：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_checked="true">        <shape>            <solid android:color="#0000ff"></solid>        </shape>    </item>    <item>        <shape>            <solid android:color="#00ffffff"></solid>            <stroke android:width="1dp" android:color="#0000ff"></stroke>        </shape>    </item></selector>

右边的背景：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_checked="true">        <shape>            <corners android:bottomLeftRadius="0dp" android:topLeftRadius="0dp" android:bottomRightRadius="6dp" android:topRightRadius="6dp"></corners>            <solid android:color="#0000ff"></solid>        </shape>    </item>    <item>        <shape>            <corners android:bottomLeftRadius="0dp" android:topLeftRadius="0dp" android:bottomRightRadius="6dp" android:topRightRadius="6dp"></corners>            <stroke android:width="1dp" android:color="#0000ff"></stroke>        </shape>    </item></selector>

最终，当我们点击某个选项时，它的背景就会发生变化，具体效果如下：

最后还有一点点需要修改，那就是我们希望选中时候，文字颜色也发生变化，那我们需要给checkbox添加一个textcolor的选择器，具体代码如下：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:color="#ffffff" android:state_checked="true"></item>    <item android:color="#000000"></item></selector>

这个文件创建在res/color文件夹下面，当选中时为白色，默认是黑色字体，最终整个checkbox代码如下：

<RadioGroup        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="60dp"        android:layout_marginLeft="60dp"        android:orientation="horizontal">        <RadioButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:button="@null"            android:padding="10dp"            android:textColor="@color/text_black_white"            android:background="@drawable/rb_left_bg"            android:text="选项1"/>        <RadioButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:button="@null"            android:padding="10dp"            android:layout_marginLeft="-1dp"            android:layout_marginRight="-1dp"            android:textColor="@color/text_black_white"            android:background="@drawable/rb_center_bg"            android:text="选项2"/>        <RadioButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:button="@null"            android:padding="10dp"            android:textColor="@color/text_black_white"            android:background="@drawable/rb_right_bg"            android:text="选项3"/>    </RadioGroup>

最终效果图如下：

需要注意一点，开发工具的效果预览有时候是不准确的，需要把代码部署看效果。