博客

Android 自定义 RadioButton 单选按钮样式

项目开发中系统自带的radioButton可能满足不了我们实际的需要，配合APP整体的风格我们要对按钮进行改变，所以只能自定义一下，其实RadioButton自定义实现与checkBox区别不是很大，上篇博客编写了自定义checkBox的实现，该兴趣的同学可以去看一下。下面来实现自定义RadioButton

一、首先准备选中与未选中的两张图片,将它们存放在res下的drawable里面

radio_check.png

radio_nor.png

二、然后准备选中与为选中的radio_style.xml

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

三、准备好选中与未选中的xml后，我们在style.xml中添加。

 <!-- CustomRadiotheme -->
    <style name="CustomRadioTheme" parent="@android:style/Widget.CompoundButton.CheckBox">
        <item name="android:button">@drawable/radio_style</item>
    </style>

四、最后在我们需要应用的radioButton的地方添加上style就可以

<RadioButton
        android:id="@+id/rb_message_radio"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/CustomRadioTheme" />

这样下来我们就可以应用自己的自定义的单选按钮了

Android 自定义 RadioButton 单选按钮样式 第二种写法

这种写法可以避免出现文字与图片间距太近的问题

自定义：

设置一个selector给button属性（给RadioButton设置）：

android:button="@drawable/radiobutton_selector"

selector如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/ic_select_yes" android:state_checked="true" android:state_enabled="true"/>
    <item android:drawable="@drawable/ic_select_no" android:state_checked="false" android:state_enabled="true"/>

</selector>

这样设置好之后样式就ok了，

但此时会出现文字与图片间距太近的问题

，那么这时候在设置几个属性（给RadioButton设置）就可以调整距离了，代码如下：

android:background="@null"
android:button="@drawable/radiobutton_selector"
android:drawableLeft="@drawable/radiobutton_selector"
android:drawablePadding="5dp"

如果只要一个按钮可以把  android:button 设置为 @null

android:button="@drawable/radiobutton_selector"

下面是一个RadioGroup的完整代码(当然这里只有xml代码)：

<RadioGroup
                        android:id="@+id/radio_group"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_marginRight="18dp"
                        android:gravity="left|center_vertical"
                        android:orientation="horizontal" >

                        <RadioButton
                            android:id="@+id/radio_one"
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:layout_marginRight="18dp"
                            android:background="@null"
                            android:button="@null"
                            android:drawableLeft="@drawable/radiobutton_selector"
                            android:drawablePadding="5dp"
                            android:text="@string/net_wired"
                            android:textColor="@color/text_color_black"
                            android:textSize="15sp" />

                        <RadioButton
                            android:id="@+id/radio_two"
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:background="@null"
                            android:button="@null"
                            android:drawableLeft="@drawable/radiobutton_selector"
                            android:drawablePadding="5dp"
                            android:text="@string/net_wifi"
                            android:textColor="@color/text_color_black"
                            android:textSize="15sp" />
                    </RadioGroup>

参考：

https://blog.csdn.net/tiger_gy/article/details/83340209

https://my.oschina.net/u/2473169/blog/860410