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>