Android控件與佈局——基礎控件RadioButton

時間 2020-12-02

標籤 android 程序員 app ide 佈局字體 this 3d code orm 欄目 Android 简体版

原文原文鏈接

今天，咱們的主題是基礎控件RadioButton。在開始以前，咱們仍是以官方文檔爲開端來開始咱們的講解，下面是Android文檔中對RadioButton的簡介：android

看過上一篇文章的應該能夠了解到，這個和咱們的CheckBox是十分相似的，不一樣的點在於，這個控件能夠由非選中狀態經過點擊事件轉爲選中狀態，可是不能經過點擊實現逆向的狀態轉換，一個默認樣式RadioButton控件的非選中和選中狀態以下：程序員

其組成和CheckBox同樣，咱們一樣能夠分別對其中的字體和Button進行設置，實現達到和CheckBox同樣的效果。在上面咱們在簡介中得知，這個控件能經過點擊事件實現的效果以下（不能逆向改變狀態）：app

接下來，咱們對其基本屬性進行設置，改變一下它的樣式：ide

下面咱們就結合一個小例子來實際的應用一下，這個小例子就是實現多項單選功能，運行的效果以下：佈局

佈局文件與控制邏輯以下：字體

<?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="aoto.com.commonwidgetandlayout.basic_widget.radioButton.RadioButtonActivity">
 
<TextView
    android:layout_marginTop="20dp"
    android:textSize="20sp"
    android:text="請選擇您最愛的職業："
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
    <RadioButton
        android:textSize="25sp"
        android:id="@+id/radio_button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/colorPrimaryDark"
        android:layout_marginStart="16dp"
        android:layout_marginTop="20dp"
        android:text="程序員" />
 
    <RadioButton
        android:textSize="25sp"
        android:id="@+id/radio_button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/colorPrimaryDark"
        android:layout_marginStart="16dp"
        android:layout_marginTop="11dp"
        android:text="政治家" />
    <RadioButton
        android:textSize="25sp"
        android:id="@+id/radio_button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/colorPrimaryDark"
        android:layout_marginStart="16dp"
        android:layout_marginTop="11dp"
        android:text="富二代" />
</LinearLayout>

package aoto.com.commonwidgetandlayout.basic_widget.radioButton;
 
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.CompoundButton;
import android.widget.RadioButton;
 
import aoto.com.commonwidgetandlayout.R;
 
/**
 * @author why
 * @date 2019-5-13 20:44:28
 */
public class RadioButtonActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener {
 
    private static final String TAG = "RadioButtonActivityWhy";
    RadioButton radioButton1;
    RadioButton radioButton2;
    RadioButton radioButton3;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_radio_button);
        radioButton1=findViewById(R.id.radio_button1);
        radioButton2=findViewById(R.id.radio_button2);
        radioButton3=findViewById(R.id.radio_button3);
 
        radioButton1.setOnCheckedChangeListener(this);
        radioButton2.setOnCheckedChangeListener(this);
        radioButton3.setOnCheckedChangeListener(this);
    }
 
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        if(isChecked){
            disableOthers(buttonView.getId());
            Log.e(TAG, "您最喜歡的職業是: "+buttonView.getText().toString() );
            buttonView.setTextColor(getResources().getColor(R.color.colorPrimary));
        }
        else {
            buttonView.setTextColor(Color.BLACK);
        }
    }
 
    private void disableOthers(int viewId) {
        if(R.id.radio_button1!=viewId&&radioButton1.isChecked()){
            radioButton1.setChecked(false);
        }
        if(R.id.radio_button2!=viewId&&radioButton2.isChecked()){
            radioButton2.setChecked(false);
        }
        if(R.id.radio_button3!=viewId&&radioButton3.isChecked()){
            radioButton3.setChecked(false);
        }
    }
}

可見，咱們爲了實現一個單選功能作了不少邏輯控制，而這樣的場景又很是多，沒有關係，咱們接着官方文檔關於對其的介紹繼續向下看：this

* <p>
* Radio buttons are normally used together in a
* {@link android.widget.RadioGroup}. When several radio buttons live inside
* a radio group, checking one radio button unchecks all the others.</p>

說這個RadioButton常常會結合RadioGroup一塊兒使用，實現的功能正是咱們上面所要實現的多項單選功能的操做。那下面就來看看如何使用RadioGroup實現上述例子的功能：3d

<?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="aoto.com.commonwidgetandlayout.basic_widget.radioButton.RadioButton2Activity">
 
    <TextView
        android:layout_marginLeft="40dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="請選擇您最愛的職業："
        android:textSize="20sp" />
 
    <RadioGroup
        android:id="@+id/job_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal">
 
        <RadioButton
            android:id="@+id/radio_button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="20dp"
            android:text="程序員"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="25sp" />
 
        <RadioButton
            android:id="@+id/radio_button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="11dp"
            android:text="政治家"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="25sp" />
 
        <RadioButton
            android:id="@+id/radio_button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="11dp"
            android:text="富二代"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="25sp" />
    </RadioGroup>
    <Button
        android:id="@+id/clear_all"
        android:text="都不喜歡"
        android:onClick="clearAll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

說這個RadioButton常常會結合RadioGroup一塊兒使用，實現的功能正是咱們上面所要實現的多項單選功能的操做。那下面就來看看如何使用RadioGroup實現上述例子的功能：code

<?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="aoto.com.commonwidgetandlayout.basic_widget.radioButton.RadioButton2Activity">
 
    <TextView
        android:layout_marginLeft="40dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="請選擇您最愛的職業："
        android:textSize="20sp" />
 
    <RadioGroup
        android:id="@+id/job_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal">
 
        <RadioButton
            android:id="@+id/radio_button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="20dp"
            android:text="程序員"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="25sp" />
 
        <RadioButton
            android:id="@+id/radio_button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="11dp"
            android:text="政治家"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="25sp" />
 
        <RadioButton
            android:id="@+id/radio_button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="11dp"
            android:text="富二代"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="25sp" />
    </RadioGroup>
    <Button
        android:id="@+id/clear_all"
        android:text="都不喜歡"
        android:onClick="clearAll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

邏輯部分：orm

package aoto.com.commonwidgetandlayout.basic_widget.radioButton;
 
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.RadioButton;
import android.widget.RadioGroup;
 
import aoto.com.commonwidgetandlayout.R;
 
/**
 * @author why
 * @date 2019-5-13 21:43:42
 */
public class RadioButton2Activity extends AppCompatActivity {
 
    private static final String TAG = "RadioButton2ActivityWhy";
    RadioGroup radioGroup;
    RadioButton radioButton1;
    RadioButton radioButton2;
    RadioButton radioButton3;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_radio_button2);
        radioGroup=findViewById(R.id.job_list);
        radioButton1=findViewById(R.id.radio_button1);
        radioButton2=findViewById(R.id.radio_button2);
        radioButton3=findViewById(R.id.radio_button3);
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                getYourFavorite(checkedId);
            }
        });
    }
 
    /**
     * 根據ID,執行相應的邏輯
     * @param buttonId
     */
    private void getYourFavorite(int buttonId){
        switch (buttonId){
            case R.id.radio_button1:
                if(radioButton1.isChecked()) {
                    Log.e(TAG, "你最愛的職業是: " + radioButton1.getText().toString());
                }
                break;
            case R.id.radio_button2:
                if(radioButton2.isChecked()) {
                    Log.e(TAG, "你最愛的職業是: " + radioButton2.getText().toString());
                }
                break;
            case R.id.radio_button3:
                if(radioButton3.isChecked()) {
                    Log.e(TAG, "你最愛的職業是: " + radioButton3.getText().toString());
                }
                break;
        }
    }
 
    /**
     * 清除選型
     * @param view
     */
    public void clearAll(View view){
      radioGroup.clearCheck();
    }
}

在佈局部分，咱們只須要把以前放置在佈局中的RadioButton放置在RadioGroup中便可：

<RadioGroup
        android:id="@+id/job_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal">
 
        <RadioButton
            android:id="@+id/radio_button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="20dp"
            android:text="程序員"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="25sp" />
 
        <RadioButton
            android:id="@+id/radio_button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="11dp"
            android:text="政治家"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="25sp" />
 
        <RadioButton
            android:id="@+id/radio_button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="11dp"
            android:text="富二代"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="25sp" />
    </RadioGroup>

邏輯部分咱們首先爲RadioGroup設置狀態變化監聽：

radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                getYourFavorite(checkedId);
            }
        });

根據選擇的RadioButton的ID執行具體的邏輯代碼：

/**
     * 根據ID,執行相應的邏輯
     * @param buttonId
     */
    private void getYourFavorite(int buttonId){
        switch (buttonId){
            case R.id.radio_button1:
                if(radioButton1.isChecked()) {
                    Log.e(TAG, "你最愛的職業是: " + radioButton1.getText().toString());
                }
                break;
            case R.id.radio_button2:
                if(radioButton2.isChecked()) {
                    Log.e(TAG, "你最愛的職業是: " + radioButton2.getText().toString());
                }
                break;
            case R.id.radio_button3:
                if(radioButton3.isChecked()) {
                    Log.e(TAG, "你最愛的職業是: " + radioButton3.getText().toString());
                }
                break;
        }
    }

注意到在這裏咱們只實現了數據的獲取（RadioButton的文本內容），RadioGroup中的RadioButton之間的狀態管理（單選）是RadioGroup內部本身管理的，這爲咱們節省不少的開發邏輯，也是咱們用它的主要目的。此外，這裏，咱們還能夠經過調用clearCheck()實現清除選擇狀態。

/**
     * 根據ID,執行相應的邏輯
     * @param buttonId
     */
    private void getYourFavorite(int buttonId){
        switch (buttonId){
            case R.id.radio_button1:
                if(radioButton1.isChecked()) {
                    Log.e(TAG, "你最愛的職業是: " + radioButton1.getText().toString());
                }
                break;
            case R.id.radio_button2:
                if(radioButton2.isChecked()) {
                    Log.e(TAG, "你最愛的職業是: " + radioButton2.getText().toString());
                }
                break;
            case R.id.radio_button3:
                if(radioButton3.isChecked()) {
                    Log.e(TAG, "你最愛的職業是: " + radioButton3.getText().toString());
                }
                break;
        }
    }

radioGroup.clearCheck()

運行結果以下所示：

一樣，若是你以爲RadioButton中的Button樣式很差看，你能夠自定義一種，這裏，咱們仍是選用上一篇中的樣式代碼，執行效果以下：

修改按鈕樣式是經過android:button屬性：

<RadioButton
            android:id="@+id/radio_button1"
            android:button="@drawable/check_box_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="20dp"
            android:text="程序員"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="25sp" />

其中的check_box_back.xml代碼以下：

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

該控件的開源項目在網上找了一下，感受沒有什麼比較好的，主要是由於它的封裝程度已經很高了，若是隻是想改動一下顯示樣式和邏輯，咱們本身徹底能夠實現。好了，關於RadioButton到這裏的簡單介紹就介紹了。