Thêm hộp đánh dấu 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 hộp đánh dấu cho phép người dùng chọn một hoặc nhiều lựa chọn trong một tập hợp. Thông thường, bạn hiển thị các tuỳ chọn hộp đánh dấu trong danh sách dọc.

Hình ảnh cho thấy ví dụ về các hộp đánh dấu trên material.io
Hình 1. Ví dụ về các hộp đánh dấu trong Material Design Checkbox.

Để tạo từng tuỳ chọn hộp đánh dấu, hãy tạo một CheckBox trong bố cục. Vì một tập hợp các tuỳ chọn hộp đánh dấu cho phép người dùng chọn nhiều mục, mỗi hộp đánh dấu được quản lý riêng biệt và bạn phải đăng ký trình nghe lượt nhấp cho từng mục.

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

Bắt đầu bằng cách tạo một bố cục có các đối tượng CheckBox trong một danh sách:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <CheckBox android:id="@+id/checkbox_meat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Meat" />
    <CheckBox android:id="@+id/checkbox_cheese"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Cheese"/>
</LinearLayout>

Khi bố cục của bạn đã sẵn sàng, hãy chuyển đến Activity hoặc Fragment, tìm các thành phần hiển thị CheckBox và thiết lập trình nghe thay đổi như trong ví dụ sau:

Kotlin

findViewById<CheckBox>(R.id.checkbox_meat)
    .setOnCheckedChangeListener { buttonView, isChecked ->
        Log.d("CHECKBOXES", "Meat is checked: $isChecked")
    }

findViewById<CheckBox>(R.id.checkbox_cheese)
    .setOnCheckedChangeListener { buttonView, isChecked ->
        Log.d("CHECKBOXES", "Cheese is checked: $isChecked")
    }

Java

findViewById<CheckBox>(R.id.checkbox_meat)
    .setOnCheckedChangeListener { buttonView, isChecked ->
        Log.d("CHECKBOXES", "Meat is checked: $isChecked");
    }

findViewById<CheckBox>(R.id.checkbox_cheese)
    .setOnCheckedChangeListener { buttonView, isChecked ->
        Log.d("CHECKBOXES", "Cheese is checked: $isChecked");
    }

Mã trước đó in một thông báo trong Logcat mỗi khi các hộp đánh dấu thay đổi trạng thái.