Android筆記(11)：UI元件 RadioButton & RadioGroup

Photo by Mika Baumeister on Unsplash

在Android 在手機/平板的應用中，單選按鈕應用很普遍，例如考試答題的單選，性別選項等都是單選按鈕。本篇要來瞭解如何使用單選按鈕 RadioButton，以及如何組合成多個單選成一個群組的 RadioGroup。

[RadioButton]

預設情況下，選項按鈕是一個單選選項的圓形圖示，且可設定在圖示右方顯示說明文字。通常單選按鈕不會單獨存在，會搭配幾個單選按鈕組合成一個 RadioGroup，這個組合按鈕群內僅能選擇一個 RadioButton，當你點選一個 RadioButton 選項後，其他的 RadioButton 選項就會自動取消選中的狀態。在 XML 佈局檔中添加 RadioButton 及 RadioGroup 選項按鈕的基本語法格式如下：

<RadioGroup
   android:屬性 = "值"> 
   
  <RadioButton
     android:屬性 = "值" /> 

  <RadioButton
     android:屬性 = "值" /> 
  
</RadioGroup>

RadioButton 間接繼承自 Button，可以直接使用 Button 支援的屬性和方法，不同比 Button 多了可選中的功能。RadioButton 常用的屬性如下：

XML屬性	描述
text	設定單選按鈕右方的文字。
checked	用於指定選中狀態，屬性值為 true 表示選中；false 表示取消選中，預設為 false。

RadioGroup 的屬性繼承自 ViewGroup 容器，除了可使用 ViewGroup 的屬性外，其他常用的屬性如下：

XML屬性	描述
checkedButtion	設定預設選中的單選按鈕，填入單選選項的 ID。
orientatio	單選按鈕排列的方式。

[範例程式]

(1)新建一個模組 Module，進入 res/layout 目錄下點選佈局檔 activity_main.xml。將預設的內容刪除，建立 1 個 TextView，存放題目，4 個單選按鈕以及 1 個 RadioGroup，以下是整個 XML 的內容。

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50sp"
        android:text="問題：下列何種作業系統可免費取得其核心（Kernel）程式之原始程式碼？(單選)"
        android:textSize="28sp" />

    <RadioGroup
        android:id="@+id/rbGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20sp"
        android:orientation="vertical">

        <RadioButton
            android:id="@+id/rb1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Windows 10"
            android:textSize="26sp" />

        <RadioButton
            android:id="@+id/rb2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SOLARIS"
            android:textSize="26sp" />

        <RadioButton
            android:id="@+id/rb3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Lunux"
            android:textSize="26sp" />

        <RadioButton
            android:id="@+id/rb4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Mac OS"
            android:textSize="26sp" />
    </RadioGroup>

</LinearLayout>

(2)在 MainActivity.java 的 onCreate() 方法內，先建立與佈局檔的物件，用 findValueById 連結 RadioGroup 元件，再為其設定一個點選改變的監聽器(setOnCheckedChangeListener)，然後重寫的 onCheckedChanged() 事件，使用這個方法的參數 checkedId，取得按下的是哪個 RadioButton，判斷選項是正確答案的 RadioButton ID時，就顯示答題正確，否則就顯示答錯了。程式碼如下：

package com.example.myradiobutton;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;

import static com.example.myradiobutton.R.id.rbGroup;

public class rb_MainActivity extends AppCompatActivity {

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

        RadioGroup rbGroup = findViewById(R.id.rbGroup);  //用 findValueById 連結 RadioGroup 元件
        rbGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {  //建立監聽器
            @Override
            public void onCheckedChanged(RadioGroup rbGroup, int checkedId) {
                RadioButton radbtn = (RadioButton) findViewById(checkedId);   //用改變的 ID 取得單選按鈕的物件
                if (checkedId == R.id.rb3) {
                    Toast.makeText(getApplicationContext(), "恭喜你!! 答對了...", Toast.LENGTH_LONG).show();
                } else {
                    Toast.makeText(getApplicationContext(), "答錯了...", Toast.LENGTH_LONG).show();
                }
            }
        });
    }
}

執行的結果如下，左方是答錯的顯示畫面，右方是答案正確時的顯示畫面。

[參考資料]

• Developer : RadioGroup
• Developer : RadioButton
• 明日科技:Android 從入門到精通