سلسلة تعليم برمجة تطبيقات الأندرويد (الدرس الرابع عشر)

سلسلة تعليم برمجة تطبيقات الأندرويد

الدرس الرابع عشر

بعد أن أنهينا تعاريف عناصر الاختيار في الواجهة السابقة ونقصد عناصر RadioButton سنتابع في درسنا اليوم تنسيق هذه الواجهة بحيث نتعلم كيف نقوم بتنفيذ أمر معين بناء على اختيار المستخدم لأحد الخيارات المتاحة فهيا بنا...

بداية لابد أن نؤكد بأن عنصر الاختيار من النوع RadioButton لا يجب أن يتيح للمستخدم سوى خيار واحد من ضمن مجموعة الخيارات المتاحة ولذلك وضعنا العناصر ضمن RadioGroup لضمان ذلك.

الآن لنذهب إلى الأندرويد استديو ولنقم بالذهاب إلى الواجهة الجديدة التي قمنا بإنشائها في الدرس السابق (والتي أسميناها samlists.xml) ولنقم بالدخول إلى جزء الكود عن طريق الخيار Text كما هو موضح في الصورة التالية:

الآن ضمن الكود البرمجي سوف نضيف بعض التعديلات ليصبح الكود البرمجي بالشكل التالي:

<RadioGroup
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="20dp">

وعند العودة إلى الواجهة (عبر خيار Design الموجود بجانب الخيار Text) سنجد أن شكل الواجهة قد أصبح كما يلي:

إذا نلاحظ أن عناصر الاختيار قد ارتفعت للأعلى والسبب في ذلك أننا غير قيمة التعليمة الخاصة بالبعد عن الحافة العليا للشاشة (ونقصد marginTop) لتصبح بقيمة صغيرة جداً (وهي 20dp) والآن علينا أن نضيف الزر من جزء Palette ولكن قبل ذلك ولكي نضمن عدم وقوع مشاكل في عرض الواجهة فإنه علينا أن نحدد ارتفاع العنصر RadioGroup وفق تعديل التعليمة التالية:

android:layout_height="match_parent"

لتصبح التعليمة كما يلي:

android:layout_height="300dp"

الآن نستطيع أن نضيف الزر الجديد ونسميته Go ونحديد حجم الخط ضمن الزر بالحجم 20pt ليصبح شكل الواجهة كما يلي:

سوف نقوم بتجريب عرض رسالة عند اختيار كل خيار من الخيارات الثلاث بالشكل المناسب وذلك كتدريب للتعامل مع عناصر الاختيار:

أولاً: لننشئ ملف برمجي للواجهة الجديدة ولنسميه SamLists كما فعلنا في الدروس السابقة بحيث يصبح لدينا واجهة برمجية جديدة كما في الشكل التالي:

ولدينا الزر معرف في الطريقة onCreate() وبالتالي لن نغير فيها سوى أننا سنربطها مع الواجهة الجديدة عبر تعديل تعليمة الربط لتصبح كما يلي:

setContentView(R.layout.samlists);

والآن لنقم بحذف الأسطر الموجودة ضمن الطريقة onClick() لتصبح فارغة تماماً ولنقم بتعريف العناصر الثلاثة التي لدينا (عناصر الاختيار) ضمنها كما يلي:

RadioButton r1=(RadioButton)findViewById(R.id.radioButton);
RadioButton r2=(RadioButton)findViewById(R.id.radioButton2);
RadioButton r3=(RadioButton)findViewById(R.id.radioButton3);

ثانياً: ما يتوجب علينا القيام به بعد الخطوة السابقة هو أن نخبر المترجم بأننا إن اخترنا العنصر الأول نريد أن يظهر رسالة فيها العبارة التالية: "Low Devices" ونفس الأمر مع العنصر الثاني ولكن مع عبارة مختلفة ألا وهي "Middle Devices" والعنصر الأخير مع العبارة "High End Devices" ولتحقيق ما سبق علينا إضافة الكود البرمجي التالي:

if(r1.isChecked()){
    Toast.makeText(getApplicationContext(),"Low Devices",Toast.LENGTH_LONG).show();
}
else if(r2.isChecked()){
    Toast.makeText(getApplicationContext(),"Middle Devices",Toast.LENGTH_LONG).show();
}
else if(r3.isChecked()){
    Toast.makeText(getApplicationContext(),"High End Devices",Toast.LENGTH_LONG).show();
}

ولشرح ما سبق يمكن القول:

بعد تعريف العناصر الثلاثة برمجياً سنستخدم تعليمة شرطية لنميز أي خيار سيتم اختياره عبر فحص خيار المستخدم أي اختبار السؤال التالي: "هل تم اختيار هذا العنصر؟" وذلك عبر الطريقة الجاهزة isChecked() والتي ترد إما true وذلك عند اختيار العنصر (أي وضع علامة بجانب العنصر) أو false وذلك عند عدم اختياره ولذلك يصبح ما بعد الشرط الأول هو تنفيذ حالة تحقق الشرط أي حالة true وفي حال عدم الاختيار سيتم الانتقال إلى تنفيذ else (أي حالة false) ونفس الأمر كررناه مع العناصر المتبقية بتمييز كل عنصر باسمه البرمجي.

تبقى خطوة واحدة للتنفيذ ولن نخبركم بها بل عليكم أنتم معرفتها باعتبار أننا نفذناها في دروس سابقة ولتكن هذه بمثابة اختبار لكم فحاولوا إلى أن نلقاكم في الدرس القادم ونخبركم بالحل إن لم تعرفوه ولكنكم ستعرفونه حتماً ...