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

تجربة طريقة الإنشاء
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 في كل مرة تغير فيها مربعات الاختيار الحالة.