Thêm nút chọn vào ứng dụng

Thử cách sử dụng Compose
Jetpack Compose là bộ công cụ giao diện người dùng được đề xuất cho Android. Tìm hiểu cách thêm thành phần trong Compose.

Các nút chọn cho phép người dùng chọn một tuỳ chọn trong tập hợp các tuỳ chọn loại trừ lẫn nhau. Hãy sử dụng nút chọn nếu người dùng cần xem tất cả các tuỳ chọn có sẵn được liệt kê. Nếu không cần hiện tất cả các tuỳ chọn, hãy dùng vòng quay (spinner).

Ví dụ về các nút chọn trên material.io
Hình 1. Ví dụ về các nút chọn trong Material Design.

Để tạo từng tuỳ chọn nút chọn, hãy tạo một RadioButton trong bố cục. Vì các nút chọn loại trừ lẫn nhau nên hãy nhóm các nút này vào trong một RadioGroup. Hệ thống đảm bảo rằng tại mỗi thời điểm, bạn chỉ có thể chọn một nút chọn trong một nhóm.

Phản hồi các sự kiện nhấp chuột

Khi người dùng chọn một nút chọn, đối tượng RadioButton tương ứng sẽ nhận được một sự kiện khi nhấp.

Ví dụ sau đây cho thấy một phản ứng khi người dùng nhấn vào một đối tượng RadioButton trong một nhóm:

<?xml version="1.0" encoding="utf-8"?>
<RadioGroup
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <RadioButton android:id="@+id/radio_pirates"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Pirates"/>
    <RadioButton android:id="@+id/radio_ninjas"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ninjas"/>
</RadioGroup>

Trong Activity hoặc Fragment lưu trữ bố cục này, hãy tìm các nút chọn rồi thiết lập trình nghe thay đổi cho từng nút như sau:

Kotlin

findViewById<RadioButton>(R.id.radio_pirates).setOnCheckedChangeListener { buttonView, isChecked ->
    Log.d("RADIO", "Pirates is checked: $isChecked")
}

findViewById<RadioButton>(R.id.radio_ninjas).setOnCheckedChangeListener { buttonView, isChecked ->
    Log.d("RADIO", "Ninjas is checked: $isChecked")
}

Java

findViewById<RadioButton>(R.id.radio_pirates).setOnCheckedChangeListener { buttonView, isChecked ->
    Log.d("RADIO", "Pirates is checked: $isChecked");
}

findViewById<RadioButton>(R.id.radio_ninjas).setOnCheckedChangeListener { buttonView, isChecked ->
    Log.d("RADIO", "Ninjas is checked: $isChecked");
}

Trong ví dụ này, khi người dùng nhấn vào một trong các nút chọn, một thông báo sẽ xuất hiện trong Logcat.