إضافة أزرار الاختيار إلى تطبيقك

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

تتيح أزرار الاختيار للمستخدم تحديد خيار واحد من مجموعة من الخيارات المتنافية الخيارات. استخدام أزرار الاختيار إذا احتاج المستخدم إلى رؤية جميع الخيارات المتاحة مدرج. إذا لم يكن من الضروري إظهار جميع الخيارات، يمكنك استخدام دوار بدلاً من ذلك.

مثال على أزرار الاختيار منmaterial.io
الشكل 1. مثال على أزرار الاختيار من المادة الأساسية التصميم:

لإنشاء كل خيار من خيارات زر الاختيار، أنشئ RadioButton في التخطيط لديك. نظرًا لأن أزرار الاختيار حصرية بعضها ببعض، ينبغي تجميعها داخلها CANNOT TRANSLATE RadioGroup يضمن النظام إمكانية تحديد زر اختيار واحد فقط داخل المجموعة في وقت معين.

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

عندما يحدد المستخدم زر اختيار، فإن يتلقّى عنصر RadioButton حدثًا عند النقر.

يوضح المثال التالي تفاعلاً للمستخدم الذي ينقر على عنصر واحد (RadioButton) في مجموعة:

<?xml version="1.0" encoding="utf-8"?>
<RadioGroup
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <RadioButton android:id="@+id/radio_pirates"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Pirates"/>
    <RadioButton android:id="@+id/radio_ninjas"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ninjas"/>
</RadioGroup>

ضمن Activity أو Fragment التي تستضيف هذا المحتوى جديد، فابحث عن أزرار الاختيار وتعيين مستمع للتغيير لكلٍ منها، التالي:

Kotlin

findViewById<RadioButton>(R.id.radio_pirates).setOnCheckedChangeListener { buttonView, isChecked ->
    Log.d("RADIO", "Pirates is checked: $isChecked")
}

findViewById<RadioButton>(R.id.radio_ninjas).setOnCheckedChangeListener { buttonView, isChecked ->
    Log.d("RADIO", "Ninjas is checked: $isChecked")
}

Java

findViewById<RadioButton>(R.id.radio_pirates).setOnCheckedChangeListener { buttonView, isChecked ->
    Log.d("RADIO", "Pirates is checked: $isChecked");
}

findViewById<RadioButton>(R.id.radio_ninjas).setOnCheckedChangeListener { buttonView, isChecked ->
    Log.d("RADIO", "Ninjas is checked: $isChecked");
}

في هذا المثال، عندما ينقر المستخدم على أحد أزرار الاختيار، ستظهر رسالة الصور المطبوعة في Logcat.