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

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

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

مثال على أزرار الاختيار من material.io
الشكل 1. مثال على أزرار الاختيار من Material Design.

لإنشاء كل خيار من خيارات زر الاختيار، أنشِئ RadioButton في تنسيقك. بما أنّ أزرار الاختيار لا يمكن اختيارها في الوقت نفسه، يمكنك تجميعها داخل 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.