टॉगल बटन जोड़ना

Compose को आज़माएं
Android के लिए, Jetpack Compose को यूज़र इंटरफ़ेस (यूआई) टूलकिट के तौर पर इस्तेमाल करने का सुझाव दिया जाता है. Compose में कॉम्पोनेंट जोड़ने का तरीका जानें.

अगर View पर आधारित लेआउट का इस्तेमाल किया जा रहा है, तो टॉगल लागू करने के लिए तीन मुख्य विकल्प उपलब्ध हैं. हमारा सुझाव है कि Material Components लाइब्रेरी से SwitchMaterial कॉम्पोनेंट का इस्तेमाल करें:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <com.google.android.material.switchmaterial.SwitchMaterial
        android:id="@+id/material_switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/material_switch"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

लेगसी ऐप्लिकेशन अब भी पुराने SwitchCompat AppCompat कॉम्पोनेंट का इस्तेमाल कर सकते हैं. इसका उदाहरण यहां दिया गया है:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <androidx.appcompat.widget.SwitchCompat
        android:id="@+id/switchcompat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/switchcompat"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

यहां दिए गए उदाहरण में AppCompatToggleButton दिखाया गया है. यह एक और लेगसी कॉम्पोनेंट है, जिसका यूज़र इंटरफ़ेस (यूआई) काफ़ी अलग है:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <TextView
        android:id="@+id/toggle_button_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/toggle"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintBaseline_toBaselineOf="@id/toggle"
        android:text="@string/toggle_button" />

    <androidx.appcompat.widget.AppCompatToggleButton
        android:id="@+id/toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/toggle_button_label"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

इन तीनों कॉम्पोनेंट का व्यवहार एक जैसा होता है, लेकिन ये अलग-अलग दिखते हैं. SwitchMaterial और SwitchCompat के बीच का अंतर बहुत कम है, लेकिन AppCompatToggleButton काफ़ी अलग है:

SwitchMaterial, SwitchCompat, और AppCompatToggleButton कंट्रोल

पहली इमेज. तीन तरह के टॉगल बटन.

स्टेट में होने वाले बदलावों को हैंडल करना

SwitchMaterial, SwitchCompat, और AppCompatToggleButton, सभी CompoundButton की सबक्लास हैं. इससे उन्हें चुने गए स्टेटस में बदलावों को मैनेज करने का एक सामान्य तरीका मिलता है. CompoundButton.OnCheckedChangeListener के किसी इंस्टेंस को लागू करें और उसे बटन में जोड़ें. इसका तरीका यहां दिए गए उदाहरण में दिखाया गया है:

Kotlin

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val binding: SwitchLayoutBinding = SwitchLayoutBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.materialSwitch.setOnCheckedChangeListener { _, isChecked ->
            if (isChecked) {
                // The switch is checked.
            } else {
                // The switch isn't checked.
            }
        }
    }
}

Java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        SwitchLayoutBinding binding = SwitchLayoutBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        binding.materialSwitch.setOnCheckedChangeListener((buttonView, isChecked) -> {
            if (isChecked) {
                // The switch is checked.
            } else {
                // The switch isn't checked.
            }
        });
    }
}

CompoundButton.OnCheckedChangeListener एक सिंगल ऐब्स्ट्रैक्ट मैथड इंटरफ़ेस (या एसएएम इंटरफ़ेस) है. इसलिए, इसे लैंबडा के तौर पर लागू किया जा सकता है. चेक किए गए स्टेटस में बदलाव होने पर, लैंबडा को कॉल किया जाता है. साथ ही, लैंबडा को पास किया गया isChecked बूलियन, चेक किए गए नए स्टेटस के बारे में बताता है.