Thêm hộp đánh dấu vào ứng dụng

Thử cách 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 trình bày hộp đánh dấu trong danh sách dọc.

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

Để tạo từng lựa chọn hộp đánh dấu, hãy tạo một CheckBox trong bố cục. Bởi vì một tập hợp các tùy 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, đồng thời bạn phải đăng ký một trình nghe lượt nhấp cho mỗi trang.

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

Bắt đầu bằng cách tạo bố cục với 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>

Sau khi bố cục đã sẵn sàng, hãy chuyển đến Activity hoặc Fragment rồi tìm Chế độ xem CheckBox và thiết lập một 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");
    }

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