إضافة مربعات اختيار إلى تطبيقك

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

تتيح مربّعات الاختيار للمستخدمين اختيار خيار واحد أو أكثر من مجموعة خيارات. عادةً ما يتم عرض خيارات مربّع الاختيار في قائمة عمودية.

صورة تعرض مثالاً على مربّعات اختيار من material.io
الشكل 1. مثال على مربّعات الاختيار من مربّع الاختيار في التصميم المتعدد الأبعاد.

لإنشاء كل خيار من خيارات مربّع الاختيار، عليك إنشاء CheckBox في تنسيقك. بما أنّ مجموعة خيارات مربّع الاختيار تتيح للمستخدم اختيار عدّة عناصر، تتم إدارة كل مربّع اختيار بشكل منفصل، ويجب تسجيل مستمع للنقرات لكل مربّع.

الردّ على أحداث النقر

ابدأ بإنشاء تنسيق يتضمّن كائنات CheckBox في قائمة:

<?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>

بعد أن يصبح التنسيق جاهزًا، انتقِل إلى Activity أو Fragment، وابحث عن طرق عرض CheckBox، واضبط مستمعًا للتغييرات، كما في المثال التالي:

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");
    }

يطبع الرمز السابق رسالة في Logcat في كل مرة تتغيّر فيها حالة مربّعات الاختيار.