openplanning

Hướng dẫn và ví dụ Android CheckBox

  1. Android CheckBox
  2. CheckBox Events
  3. Ví dụ CheckBox
  4. Phụ lục: Thiết kế giao diện

1. Android CheckBox

Trong Android, CheckBox là một nút có hai trạng thái checked (được chọn) và unchecked (không được chọn), nó là một thành phần cơ bản và được sử dụng rất thường xuyên trong các ứng dụng Android.
Về cơ bản, bạn có thể sử dụng nhiều CheckBox trong ứng dụng để cho phép người dùng lựa chọn một hoặc nhiều tùy chọn trong một tập hợp các giá trị.
Theo mặc định các CheckBox có trạng thái unchecked, bạn có thể thay đổi trạng thái của nó thông qua thuộc tính android:checked.
<CheckBox
    android:id="@+id/someId"
    android:checked="true"
    ... />
Một vài thuộc tính quan trọng của CheckBox:
android:checked
Chỉ định trạng thái hiện thời cho CheckBox.
android:gravity
Căn lề (align) cho văn bản của CheckBox. Các giá trị có thể là left, right, center, top, ...
android:text
Sét đặt nội dung text (văn bản) cho CheckBox.
android:textColor
Sét đặt mầu chữ của văn bản.
android:textSize
Sét đặt kích thước phông chữ của văn bản.
android:textStyle
Sét đặt kiểu dáng cho văn bản (bold, italic, bolditalic).
android:background
Sét đặt mầu nền cho CheckBox.
android:padding
Sét đặt padding cho CheckBox.
android:onClick
Tên của phương thức sẽ được gọi khi người dùng click vào CheckBox.
toggle()
Cả 4 lớp ToggleButton, CheckBox, RadioButton, Switch đều là lớp con của CompoundButton, vì vậy chúng được thừa kế phương thức toggle(), Đây là phương thức thường được sử dụng để chuyển đổi trạng thái của chúng từ Checked (ON) sang Unchecked (OFF), và ngược lại.
CompoundButton button = (CheckBox) findViewById(R.id.checkBox);

button.toggle();

2. CheckBox Events

Có khá nhiều các sự kiện liên quan tới một CheckBox, nhưng 2 sự kiện sau được sử dụng thường xuyên nhất:
  • checkBox.setOnClickListener(View.OnClickListener)
  • checkBox.setOnCheckedChangeListener(CompoundButton.OnCheckedChangeListener)
On Click Event:
Sự kiện xẩy ra khi người dùng nhấn (click) vào CheckBox, cũng giống như hành động của người dùng khi nhấn vào một Button.
CheckBox chk = (CheckBox) findViewById(R.id.chk1);

chk.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        boolean checked = ((CheckBox) v).isChecked();
        // Check which checkbox was clicked
        if (checked){
            // Your code
        }
        else{
            // Your code
        }
    }
});
On Checked Change Event:
Sự kiện xẩy ra khi CheckBox thay đổi trạng thái, do hành động của người dùng hoặc do tác dụng của việc gọi phương thức checkBox.setChecked(newState), ..
CheckBox chk = (CheckBox) findViewById(R.id.chk1);

chk.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        if(isChecked)  {
           // Your code
        } else {
           // Your code
        }
    }
});

3. Ví dụ CheckBox

Xem trước ví dụ:
Giao diện của ứng dụng ví dụ:
Chú ý: Nếu bạn quan tâm tới các bước để thiết kế giao diện của ứng dụng này xin hãy xem phần phụ lục phía cuối bài viết.
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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="35dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="What programming languages do you like?"
        android:textSize="18sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <CheckBox
        android:id="@+id/checkBox_checkAll"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="39dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="(Check All)"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <CheckBox
        android:id="@+id/checkBox_ccpp"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="C/C++"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/checkBox_checkAll" />

    <CheckBox
        android:id="@+id/checkBox_csharp"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="CSharp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/checkBox_ccpp" />

    <CheckBox
        android:id="@+id/checkBox_java"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Java"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/checkBox_csharp" />

    <Button
        android:id="@+id/button_showResult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Show Result"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/checkBox_java" />
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package com.example.checkboxexample;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private CheckBox checkBoxCheckAll;
    private CheckBox checkBoxCcpp;
    private CheckBox checkBoxCsharp;
    private CheckBox checkBoxJava;

    private Button buttonShowResult;

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

        this.checkBoxCheckAll = (CheckBox) this.findViewById(R.id.checkBox_checkAll);
        this.checkBoxCcpp = (CheckBox) this.findViewById(R.id.checkBox_ccpp);
        this.checkBoxCsharp = (CheckBox) this.findViewById(R.id.checkBox_csharp);
        this.checkBoxJava = (CheckBox) this.findViewById(R.id.checkBox_java);

        this.buttonShowResult = (Button) this.findViewById(R.id.button_showResult);

        this.buttonShowResult.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showResult();
            }
        });

        this.checkBoxCheckAll.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                checkAllCheckedChange(isChecked);
            }
        });
    }

    private void showResult()  {
        String message = null;
        if(this.checkBoxCcpp.isChecked()) {
            message =  this.checkBoxCcpp.getText().toString();
        }
        if(this.checkBoxCsharp.isChecked()) {
            if(message== null)  {
                message =  this.checkBoxCsharp.getText().toString();
            } else {
                message += ", " + this.checkBoxCsharp.getText().toString();
            }
        }
        if(this.checkBoxJava.isChecked()) {
            if(message== null)  {
                message =  this.checkBoxJava.getText().toString();
            } else {
                message += ", " + this.checkBoxJava.getText().toString();
            }
        }
        message = message == null? "You select nothing": "You select: " + message;
        Toast.makeText(this, message, Toast.LENGTH_LONG).show();
    }

    // When "Check All" change state.
    private void checkAllCheckedChange(boolean isChecked)  {
        this.checkBoxCsharp.setChecked(isChecked);
        this.checkBoxCcpp.setChecked(isChecked);
        this.checkBoxJava.setChecked(isChecked);
    }
}

4. Phụ lục: Thiết kế giao diện

Các bước thiết kế giao diện ứng dụng (Của ví dụ trên).
Sét đặt ID, Text cho thành phần trên giao diện:
  • textView: textSize="18sp"

Các hướng dẫn lập trình Android

Show More