Android之RadioButton

默认效果

默认的RadioButton点击时出现粉色的波纹，点击后圆圈变为粉色，RadioButton常配合RadioGrop成组使用。

修改圆圈、波纹、文字效果

布局文件

<RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/radiobtn_ripplecolor"
        android:buttonTint="@drawable/radiobtn_circlecolor"
        android:text="语文"
        android:textColor="@drawable/radiobtn_textcolor" />

1、设置选中时圆圈的颜色为蓝色，radiobtn_circlecolor.xml

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

    <item android:state_checked="false"
        android:color="@color/gray"/>
</selector>

设置android:buttonTint="@drawable/radiobtn_circlecolor"属性后，选中时圆圈已经变成了蓝色，但是点击时的波纹还是粉色。

2、设置点击时的波纹颜色为蓝色，radiobtn_ripplecolor.xml

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

设置android:background="@drawable/radiobtn_ripplecolor"属性后，点击时会出现蓝色波纹。

3、设置选中时文字的颜色为橙色，radiobtn_textcolor.xml

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

    <item android:state_checked="false"
        android:color="@color/gray"/>
</selector>

设置android:textColor="@drawable/radiobtn_textcolor"属性后，选中时文字为橙色。

多组RadioButton的单选

像上面有多行RadioButton的情况，如果在RadioGroup内部添加布局的话会导致失去单选的功能，所以只能使用多个RadioGroup（上面图片两行使用了两个RadioGroup），或者自定义RadioButton（网络上有重写RadioButton的代码）。如果RadioGroup不是很多的情况还是使用RadioGroup的clearCheck()函数比较方便，在一个RadioGroup中点击时调用另一个RadioGroup的clearCheck()函数来保持单选。

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.sample.mycustomcomponent.RadioBtnActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="课程" />

    <RadioGroup
        android:id="@+id/rg1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="5dp">

        <RadioButton
            android:id="@+id/rb1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/radiobtn_ripplecolor"
            android:buttonTint="@drawable/radiobtn_circlecolor"
            android:text="语文"
            android:textColor="@drawable/radiobtn_textcolor" />

        <RadioButton
            android:id="@+id/rb2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:background="@drawable/radiobtn_ripplecolor"
            android:buttonTint="@drawable/radiobtn_circlecolor"
            android:text="数学"
            android:textColor="@drawable/radiobtn_textcolor" />

        <RadioButton
            android:id="@+id/rb3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:background="@drawable/radiobtn_ripplecolor"
            android:buttonTint="@drawable/radiobtn_circlecolor"
            android:text="英语"
            android:textColor="@drawable/radiobtn_textcolor" />
    </RadioGroup>

    <RadioGroup
        android:id="@+id/rg2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="5dp">

        <RadioButton
            android:id="@+id/rb4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/radiobtn_ripplecolor"
            android:buttonTint="@drawable/radiobtn_circlecolor"
            android:text="物理"
            android:textColor="@drawable/radiobtn_textcolor" />

        <RadioButton
            android:id="@+id/rb5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:background="@drawable/radiobtn_ripplecolor"
            android:buttonTint="@drawable/radiobtn_circlecolor"
            android:text="化学"
            android:textColor="@drawable/radiobtn_textcolor" />

        <RadioButton
            android:id="@+id/rb6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:background="@drawable/radiobtn_ripplecolor"
            android:buttonTint="@drawable/radiobtn_circlecolor"
            android:text="生物"
            android:textColor="@drawable/radiobtn_textcolor" />
    </RadioGroup>

</LinearLayout>

Java文件

package com.sample.mycustomcomponent;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.RadioButton;
import android.widget.RadioGroup;

public class RadioBtnActivity extends AppCompatActivity {
    private RadioGroup rg1;
    private RadioGroup rg2;

    private RadioButton rb1, rb2, rb3;
    private RadioButton rb4, rb5, rb6;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_radio_btn);

        rg1 = (RadioGroup) findViewById(R.id.rg1);
        rg2 = (RadioGroup) findViewById(R.id.rg2);

        rb1 = (RadioButton) findViewById(R.id.rb1);
        rb2 = (RadioButton) findViewById(R.id.rb2);
        rb3 = (RadioButton) findViewById(R.id.rb3);
        rb4 = (RadioButton) findViewById(R.id.rb4);
        rb5 = (RadioButton) findViewById(R.id.rb5);
        rb6 = (RadioButton) findViewById(R.id.rb6);

        OnCheckedChanged onCheckedChanged = new OnCheckedChanged();
        rb1.setOnCheckedChangeListener(onCheckedChanged);
        rb2.setOnCheckedChangeListener(onCheckedChanged);
        rb3.setOnCheckedChangeListener(onCheckedChanged);
        rb4.setOnCheckedChangeListener(onCheckedChanged);
        rb5.setOnCheckedChangeListener(onCheckedChanged);
        rb6.setOnCheckedChangeListener(onCheckedChanged);
    }

    private class OnCheckedChanged implements CompoundButton.OnCheckedChangeListener {
        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            switch (buttonView.getId()) {
                case R.id.rb1:
                    rg2.clearCheck();
                    break;
                case R.id.rb2:
                    rg2.clearCheck();
                    break;
                case R.id.rb3:
                    rg2.clearCheck();
                    break;
                case R.id.rb4:
                    rg1.clearCheck();
                    break;
                case R.id.rb5:
                    rg1.clearCheck();
                    break;
                case R.id.rb6:
                    rg1.clearCheck();
                    break;
                default:
                    break;
            }
        }
    }
}

自定义RadioButton外观

布局文件

<RadioGroup
    android:id="@+id/rgSex"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:gravity="center"
    android:orientation="horizontal"
    android:padding="5dp">

    <RadioButton
        android:id="@+id/rbMan"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:gravity="center"
        android:button="@null"
        android:background="@drawable/radiobtn_bg"
        android:text="男生"
        android:textColor="@drawable/radiobtn_textcolor" />

    <RadioButton
        android:id="@+id/rbWaman"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:gravity="center"
        android:layout_marginLeft="10dp"
        android:button="@null"
        android:background="@drawable/radiobtn_bg"
        android:text="女生"
        android:textColor="@drawable/radiobtn_textcolor" />

</RadioGroup>

这里的android:button="@null"属性设置不显示圆圈，android:textColor属性延用了上面定义过的radiobtn_textcolor.xml，这里添加了radiobtn_bg.xml来改变RadioButton的外观

<?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="rectangle">
            <!--内部填充-->
            <solid android:color="@color/lightGray"/>
            <!--圆角-->
            <corners android:radius="5dp"/>
        </shape>
    </item>

    <item android:state_checked="true" >
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimaryDark"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>
</selector>