إضافة أزرار تبديل

تجربة طريقة Compose
‫Jetpack Compose هي مجموعة أدوات واجهة المستخدِم المقترَحة لنظام Android. تعرَّف على كيفية إضافة مكوّنات في Compose.
تبديل →

إذا كنت تستخدم تنسيقًا يستند إلى View، هناك ثلاثة خيارات رئيسية لتنفيذ أزرار التبديل. ننصحك باستخدام مكوّن الـ SwitchMaterial من مكتبة Material Components:

<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

الشكل 1. ثلاثة أنواع من أزرار التبديل

التعامل مع تغييرات الحالة

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 هي واجهة طريقة مجرّدة واحدة (أو واجهة SAM)، لذا يمكنك تنفيذها كدالة lambda. يتم استدعاء دالة lambda كلما تغيّرت الحالة المحدّدة، وتشير قيمة السمة المنطقية isChecked التي يتم تمريرها إلى دالة lambda إلى الحالة المحدّدة الجديدة.