Android 自定义RadioButton

最近需要做一个Theme切换的功能，想法是列出不同颜色的RadioButton，用户点击后切换theme。这就需要对RadioButton的样式进行修改。

我们知道RadioButton的xml属性中有这样一个属性：android:button; 那么，我们试着修改这个属性。

首先，创建一个drawable文件 rdobtn_blue.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false">
        <shape
            android:shape="oval">
            <solid android:color="@color/colorPrimaryDark"/>
            <size android:height="40dp" android:width="40dp"/>
        </shape>
    </item>
    <item android:state_checked="true">
        <layer-list>
            <item>
                <shape
                    android:shape="oval">
                    <solid android:color="@color/colorPrimaryDark"/>
                    <size android:height="40dp" android:width="40dp"/>
                    <padding android:left="8dp" android:bottom="8dp" android:right="8dp" android:top="8dp"/>
                </shape>
            </item>
            <!--ic_check_white_24dp 是一个 √ 样式的图片 大小是24dp-->
            <item android:drawable="@drawable/ic_check_white_24dp"/>
        </layer-list>
    </item>
</selector>

然后再创建一个类似的文件 rdobtn_pink.xml，其中将颜色切换成pink颜色.

最后，在布局文件中：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.fadai.icontopbutton.MainActivity">
    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <RadioButton
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="4dp"
            android:button="@drawable/rdobtn_pink"/>
        <RadioButton
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="4dp"
            android:button="@drawable/rdobtn_blue"/>
    </RadioGroup>
</LinearLayout>

效果图：

可以看到，在xml中修改RadioButton的样式，还是比较简单的。可是，我们要选择的Theme有十几种的话，那是不是就要定义十几个drawable文件呢？当然不用，我们可以自定义一个RadioButton，然后通过对其自定义属性的改变，让其显示不同的颜色：

首先，在values目录中创建attrs.mxl：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyRadioButton">
        <attr name="rdoBtnBg" format="color"/>
    </declare-styleable>
</resources>

然后，创建MyRadioButton类，并对自定义的属性进行处理，赋值给backgroundColor：

TypedArray ta=context.obtainStyledAttributes(attrs, R.styleable.MyRadioButton);
backgroundColor=ta.getColor(R.styleable.MyRadioButton_rdoBtnBg,0);
ta.recycle();

然后，重写父类的onDraw方法：

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint=new Paint();
        paint.setColor(backgroundColor);
        canvas.drawCircle(getMeasuredWidth()/2,getMeasuredWidth()/2, dp2px(20),paint);
        if(isChecked()){
            Bitmap bitmap = BitmapFactory.decodeResource(this.getContext().getResources(), R.drawable.ic_check_white_24dp);
            canvas.drawBitmap(bitmap,getMeasuredWidth()/2-dp2px(12),getMeasuredWidth()/2-dp2px(12),paint);
        }
    }

可以看到，我们在super.onDraw(canvas)后，绘制了一个圆形，圆心是在控件区域中心，半径为20dp（dp2px()方法是将dp转换为px，用的别人的工具类，所以就不贴了，感兴趣的搜一下即可）。 然后判断是否是选中的状态，是的话在圆中间绘制一个对号的图片。

最后，在布局文件中：

<com.example.fadai.test.MyRadioButton
            android:layout_width="40dp"
            android:layout_height="40dp"
            app:rdoBtnBg="@color/colorPrimary"
            android:layout_margin="4dp" />
<com.example.fadai.test.MyRadioButton
            android:layout_width="40dp"
            android:layout_height="40dp"
            app:rdoBtnBg="@color/colorAccent"
            android:layout_margin="4dp"/>

效果图：

可以看到，效果是和设置android:button属性是差不多的，而且解决了重复使用的问题，不用定义那么多的drawable文件了。可是，效果也仅是差不多而已，因为很多细节没有做出来。比如，原本的RadioButton按上去，是有一个波纹的效果的，可我们自定义的控件，只是在原本的RadioButton绘制完成后，在上面另外绘制了一个圆形，把原来的button给覆盖住了，而波纹效果还是发生在原来的button上面的。如果我们将布局和圆形的绘制位置修改一下，是可以让原来的button露出来的：

我的解决办法是：将第一种方法中定义的drawable文件中的颜色改为透明。然后在layout中给我们的MyRadioButton添加属性： android:button="@null"   android:drawableTop="@drawable/rdobtn_blue"

经过我的测试，如果只添加android:button="@null"   的话，RadioButton就不能从被选中状态切换为未选中状态了。添加android:drawableTop="@drawable/rdobtn_blue"的话，就解决了这个问题，而且因为我们的drawable文件使用透明色的原因，他是不可见的。而且我们通过对布局的控制，将这两个圆形位置重叠在一起的话，原来的波纹效果是可以正常显示的。当然，如果不想要这个波纹效果，可以直接添加属性：android:backgroup="@null"。 这几个属性，大家可以自行测试一下。