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

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