RadioButtn单选按钮详解

RadioButtn单选按钮，常用UI控件之一，当需要多选一的时候就需要用到RadioButtn了，通常系统自带的样式不能直接使用，大部分都是需要自定义样式，下面详细介绍一下如何使用及如何自定义样式

预览

基本使用

RadioButtn需要放在RadioGroup中
xml文件

          <RadioGroup
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <RadioButton
                    android:id="@+id/rb_left"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/rb_left_selector"
                    android:button="@null"
                    android:checked="true"
                    android:gravity="center"
                    android:text="左"
                    android:textColor="@color/rb_selector"
                    android:textSize="20sp" />

                <RadioButton
                    android:id="@+id/rb_right"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/rb_right_selector"
                    android:button="@null"
                    android:gravity="center"
                    android:text="右"
                    android:textColor="@color/rb_selector"
                    android:textSize="20sp" />
            </RadioGroup>

重要属性介绍：

• android:orientation=" " horizontal | vertical 水平或垂直显示
• android:checked=" " 设置默认选中
• android:button=" "
  修改自带图片的样式。如果只是单纯的图片，可以直接添加drawable，如果带文字效果，建议设置为@null并使用android:background或android:drawable
• android:background=" " 设置背景
• android:drawableTop=" "|android:drawableBottom=" "|android:drawableLeft=" "|android:drawableRight=" "
  这四个分别对应显示在文字的上下左右
• android:drawablePadding=" "文字距离图片的距离

图片切换的selector.xml，放到res/drawable下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@mipmap/rb_left_select"/>
    <item android:state_selected="true" android:drawable="@mipmap/rb_left_select"/>
    <item android:state_checked="true" android:drawable="@mipmap/rb_left_select"/>
    <item android:drawable="@mipmap/rb_left"/>
</selector>

文字颜色切换的selector.xml，这个放到res/color下，如果没有color请新建

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

监听事件

        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                // 判断选中哪个
                switch (checkedId) {
                    case R.id.rb_man:
                        Log.e(TAG, "rb_left");
                        break;
                    case R.id.rb_woman:
                        Log.e(TAG, "rb_right");
                        break;
                    default:
                        break;
                }
            }
        });
        
    //  获取选中的值
    RadioButton radioButton = (RadioButton)findViewById(rg.getCheckedRadioButtonId());
    tv.setText(radioButton.getText().toString());

注意事项：

1. 选择时如果点击没有切换，都为选中状态，请为每个radiobutton设置id
2. 使用android:background或android:drawable时需要设置android:button="@null"
3. 如果三个或三个以上选项时，选择的时候出现两个同时选中的状态，在代码中设置选中rg.check(R.id.rb_left);

Demo下载地址：TestRadioButton