ToggleButton ใน Android ตัวอย่างและการใช้งาน

บทนำ

ToggleButton เป็น View ที่สืบทอดมาจาก Button แสดงสถานะ 2 แบบ: Checked (On) และ Unchecked (Off) เหมาะสำหรับการเปิด/ปิด ตั้งค่า On/Off

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

เปิด Android Studio เลือก File → New Project กรอกข้อมูลที่จำเป็น

ขั้นตอนที่ 2: ออกแบบ Layout (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ToggleButton
        android:id="@+id/result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Result Data"
        android:textColor="#FFF"
        android:background="@color/colorPrimary"
        android:textOff="Off"
        android:textOn="On"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

คุณสมบัติสำคัญ:

• textOff: ข้อความแสดงเมื่อ Off
• textOn: ข้อความแสดงเมื่อ On
• checked: สถานะเริ่มต้น (true/false)

ขั้นตอนที่ 3: เขียนโค้ด Java (src/MainActivity.java)

package com.example.myapplication;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import android.view.View;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {

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

        final ToggleButton toggleButton = findViewById(R.id.result);

        // ใช้ OnCheckedChangeListener แทน OnClickListener (แนะนำ)
        toggleButton.setOnCheckedChangeListener((buttonView, isChecked) -> {
            if (isChecked) {
                toggleButton.setTextOn("You have Checked");
                // toggleButton.setChecked(true); // ไม่ต้องเซ็ตซ้ำ เพราะแล้วแต่การกระทำของผู้ใช้
            } else {
                toggleButton.setTextOff("You have not Checked");
                // toggleButton.setChecked(false);
            }
        });

        // หรือใช้ OnClickListener (เหมือนตัวอย่างเดิม)
        /*
        toggleButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (toggleButton.isChecked()) {
                    toggleButton.setTextOn("You have Checked");
                } else {
                    toggleButton.setTextOff("You have not Checked");
                }
            }
        });
        */
    }
}

การทดสอบแอปพลิเคชัน

รันแอปบนอุปกรณ์จริง

สถานะเริ่มต้น (Idle)

กดครั้งแรก - On

ข้อความเปลี่ยนเป็น "You have Checked" สถานะ Checked = true

กดอีกครั้ง - Off

ข้อความเปลี่ยนเป็น "You have not Checked" สถานะ Checked = false

คำแนะนำ: ใช้ OnCheckedChangeListener แทน OnClickListener

• OnCheckedChangeListener ตอบสนองต่อการเปลี่ยนแปลงสถานะโดยตรง รองรับการเปลี่ยนแปลงจากโค้ด (setChecked) ด้วย
• OnClickListener ตอบสนองต่อการคลิกเท่านั้น อาจไม่ตรงกับสถานะจริงหากมีการ setChecked จากที่อื่น

Switch vs ToggleButton

สรุป

ToggleButton ใช้สำหรับสถานะ On/Off ใช้ setOnCheckedChangeListener เพื่อตอบสนองการเปลี่ยนแปลง สามารถปรับข้อความ textOn/textOff ได้ตามต้องการ