iT邦幫忙

2022 iThome 鐵人賽

DAY 13
0
Mobile Development

Android Studio - 30天菜鳥筆記系列 第 13

Android Studio菜鳥筆記 - Day13 - RadioGroup與RadioButton

  • 分享至 

  • xImage
  •  

RadioButton可以實現單選按鈕,但當你創建了幾個RadioButton且執行,你會發現想要的單選功能變成多選了

這是因為只有創建RadioButton,每個RadioButton都是獨立的個體,大家都互不相干,所以才會出現這個畫面。
那要如何變成單選按鈕呢?這時就要通過RadioGroup來將所有的RadioButton放進去綁在一起變成一組,這樣一來它們就會互相辨認,若其中一個被點選,則取消其它選項的選中。

想改變RadioGroup水平或垂直顯示可以使用屬性

<RadioGroup
    android:orientation= "horizontal" //水平
    android:orientation="vertical"    //垂直 >

將RadioGroup與RadioButton添加進去

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">

    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        android:orientation="vertical">

        <RadioButton
            android:id="@+id/radioButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="太陽"
            android:textSize="20dp" />

        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="地球"
            android:textSize="20dp" />

        <RadioButton
            android:id="@+id/radioButton3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="月亮"
            android:textSize="20dp" />
    </RadioGroup>

</androidx.constraintlayout.widget.ConstraintLayout>

RadioGroup方法與事件

check(int id) 選定其中一個RadioButton為選中

radioGroup.check(R.id.radioButton2);

clearCheck() 清除所有選項的選中狀態

radioGroup.clearCheck();

setOnCheckedChangeListener 點選監聽

可以寫入當點選特定RadioButton會發生甚麼是
checkedId是抓取RadioGroup裡RadioButton中的Id
可以用switch的方式來判斷點擊哪個RadioButton要做哪些事

radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
                switch (checkedId){
                    case R.id.radioButton1:
                        Toast.makeText(MainActivity.this, "你選擇:" + radioButton1.getText(), Toast.LENGTH_SHORT).show();
                    case R.id.radioButton2:
                        Toast.makeText(MainActivity.this, "你選擇:" + radioButton2.getText(), Toast.LENGTH_SHORT).show();
                    case R.id.radioButton3:
                        Toast.makeText(MainActivity.this, "你選擇:" + radioButton3.getText(), Toast.LENGTH_SHORT).show();
            }
        });

完整程式碼:

package com.example.radiobutton_demo;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        RadioGroup radioGroup;
        RadioButton radioButton1, radioButton2, radioButton3;
        radioGroup = findViewById(R.id.radioGroup);
        radioButton1 = findViewById(R.id.radioButton1);
        radioButton2 = findViewById(R.id.radioButton2);
        radioButton3 = findViewById(R.id.radioButton3);
        radioGroup.check(R.id.radioButton2);
        radioGroup.clearCheck();
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
                switch (checkedId){
                    case R.id.radioButton1:
                        Toast.makeText(MainActivity.this, "你選擇:" + radioButton1.getText(), Toast.LENGTH_SHORT).show();
                    case R.id.radioButton2:
                        Toast.makeText(MainActivity.this, "你選擇:" + radioButton2.getText(), Toast.LENGTH_SHORT).show();
                    case R.id.radioButton3:
                        Toast.makeText(MainActivity.this, "你選擇:" + radioButton3.getText(), Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}

上一篇
Android Studio菜鳥筆記 - Day12 - AlertDialog
下一篇
Android Studio菜鳥筆記 - Day14 - Log
系列文
Android Studio - 30天菜鳥筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言