你不能錯過的RadioButton實踐

前言

上一篇給你們留的「課後做業」登陸和註冊相信小夥伴們根據咱們提供的demo都已經完成啦，那麼這一篇文章咱們繼續講實戰中會遇到的一些主要功能，話很少說，讓咱們進入今天的正文環節！！！

場景

RadioButton 單選按鈕 ，在實際開發中應用很普遍。通常用於實現控件設置選擇樣式或者有一組控件設置其中一個效果選中效果，例如微信底部Tab欄切換效果等。這種需求下通常會將幾個RadioButton放在一個RadioGroup中控制。RadioGroup繼承自LinearLayout，能夠設置RadioGroup的排列方向。

這裏我先不介紹RadioButton的屬性，從名字上就能夠看出來它本質也是一個Button，可是實現了checkable接口，繼承關係以下：

java.lang.Object
 ↳android.view.View 	   
  ↳android.widget.TextView
   ↳android.widget.Button	 
    ↳android.widget.CompoundButton	 	 	 	 
     ↳android.widget.RadioButton
複製代碼

因而可知，RadioButton具備Button的屬性，卻多了選中的效果和邏輯。

簡單演示

Let me just show you code!來看一段效果展現男女性別單選界面邏輯。

<RadioGroup android:id="@+id/radioGroup" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal">
   <RadioButton android:id="@+id/btnMan" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="男" android:checked="true"/>
    <RadioButton android:id="@+id/btnWoman" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="女"/>
</RadioGroup>
複製代碼

效果如圖所示：

可是每每根據真實需求來開發的時候，須要設置RadioButton的background中的selector才能實現效果。若是使用RadioGroup和RadioButton的組合的話，如何實現微信下方四個tab欄目的佈局效果呢？（切換tab後圖標和文字顏色跟着變成對應選中/未選中狀態）

實現微信底部Tab效果

默認的RadioButton的樣式首先須要去除

RadioButton默認是前面帶有圓點的，去掉前面圓點

android:button="@null" 
複製代碼

讓RadioButton的文本水平居中

android:gravity="center_horizontal"
複製代碼

給RadioButton設置選中和未選中的樣式選擇器

在drawable文件夾下新建四個tab圖標選擇器，這裏粘貼首頁圖標的選擇器tab_home_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<!--這裏只粘貼出來首頁小圖標的樣式，準備好2個資源圖片，選中和未選中樣式的各一張-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/tab_home_checked" android:state_checked="true" />
    <item android:drawable="@mipmap/tab_home_unchecked" />
</selector>
複製代碼

在drawable文件夾下新建1個TextColor的顏色選擇器tab_text_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#07c563" android:state_checked="true" />
    <item android:color="#41413b" />
</selector>
複製代碼

給RadioButton設置drawableTop爲選擇器樣式，設置完四個tab後代碼以下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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" tools:context=".RadioActivity">
<!--這裏每一個RadioButton具備不少相同的屬性，能夠在values/styles文件中定義一個tab樣式，將共有屬性抽取出來，同時也應該將字符串常量抽取到strings文件中，方便維護與代碼管理。這裏爲了演示屬性，不作抽取--> 
    <RadioGroup android:id="@+id/radioGroup" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:orientation="horizontal" android:paddingTop="10dp" android:paddingBottom="10dp">

        <RadioButton android:id="@+id/rbHome" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:checked="true" android:textColor="@drawable/tab_text_selector" android:drawableTop="@drawable/tab_home_selector" android:gravity="center_horizontal" android:text="首頁" />

        <RadioButton android:id="@+id/rbDiscovery" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@null" android:button="@null" android:textColor="@drawable/tab_text_selector" android:drawableTop="@drawable/tab_discovery_selector" android:gravity="center_horizontal" android:text="發現" />

        <RadioButton android:id="@+id/rbContacts" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@null" android:button="@null" android:textColor="@drawable/tab_text_selector" android:drawableTop="@drawable/tab_contacts_selector" android:gravity="center_horizontal" android:text="通信錄" />

        <RadioButton android:id="@+id/rbMe" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@null" android:button="@null" android:textColor="@drawable/tab_text_selector" android:drawableTop="@drawable/tab_me_selector" android:gravity="center_horizontal" android:text="我" />
    </RadioGroup>
    
    <View android:layout_width="match_parent" android:layout_height="1dp" android:layout_alignTop="@+id/radioGroup" android:background="@color/colorPrimaryDark" />
    
</RelativeLayout>
複製代碼

實現效果以下：是否是已經初具微信底部導航欄的樣式了？別慌，只有這些設置， 運行到真機上去會發現圖標大小和距離都無法改變，下面我會教給你們配合java代碼控制RadioButto弄到Drawable的樣式

修改間距和大小的關鍵代碼：

/** * 演示RadioButton等用法 * * @author xmkh * @date 2019年8月21日 15:27:59 */
public class RadioActivity extends AppCompatActivity {

    private RadioButton mRbHome;
    private RadioButton mRbDiscovery;
    private RadioButton mRbContacts;
    private RadioButton mRbMe;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_radio);
        RadioGroup rg = findViewById(R.id.radioGroup);
        mRbHome = findViewById(R.id.rbHome);
        mRbContacts = findViewById(R.id.rbContacts);
        mRbDiscovery = findViewById(R.id.rbDiscovery);
        mRbMe = findViewById(R.id.rbMe);
        initView();
        //設置RadioGroup的按鈕組監聽
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
                switch (checkedId) {
                    case R.id.rbHome:
                        //TODO 設置其餘業務處理
                        break;
                    case R.id.rbContacts:
                        //TODO 設置其餘業務處理
                        break;
                    case R.id.rbDiscovery:
                        //TODO 設置其餘業務處理
                        break;
                    case R.id.rbMe:
                        //TODO 設置其餘業務處理
                        break;
                    default:
                        break;
                }
            }
        });
    }


    /** * 動態設置每一個tab的圖片寬高以及文字間距 * * @param selector RadioButton的樣式選擇器 * @param rb RadioButton的樣式選擇器 */
    private void setStyle(int selector, RadioButton rb) {
        //定義底部標籤圖片大小和位置
        Drawable drawableHome = getResources().getDrawable(selector);
        //當這個圖片被繪製時，給他綁定一個矩形 ltrb規定這個矩形， 這裏就是設置圖片大小的地方
        drawableHome.setBounds(0, 0, 80, 80);
        //設置圖片在文字的哪一個方向
        rb.setCompoundDrawables(null, drawableHome, null, null);
    }

      /** * 動態設置四個tab的樣式 */
    private void initView() {
        setStyle(R.drawable.tab_home_selector, mRbHome);
        setStyle(R.drawable.tab_contacts_selector, mRbContacts);
        setStyle(R.drawable.tab_discovery_selector, mRbDiscovery);
        setStyle(R.drawable.tab_me_selector, mRbMe);
    }

}
複製代碼

至此，基本效果已經實現。好了，本次RadioButton和RadioGroup的分享到此結束。

結語

怎麼樣？！是否是已經火燒眉毛的想實現本身主界面中的部分邏輯了呢？！ 一些聰明小夥伴確定也發現告終合咱們前面所講的一系列文章，我的中心的一些功能也能夠完成啦（忘記了的小夥伴小編這裏給你提個醒：設置性別，更改暱稱，修改頭像等等）！！也歡迎各位小夥伴加入咱們的微信技術交流羣，在公衆號中回覆微信羣，就能夠加入其中，也能夠在公衆號中回覆視頻，裏面有一些初學者視頻哦~

PS:若是還有未看懂的小夥伴，歡迎加入咱們的QQ技術交流羣：892271582，裏面有各類大神回答小夥伴們遇到的問題，咱們的微信羣立刻也將要和你們見面啦，屆時但願你們踊躍加入其中~~