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

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

الدرس الثالث عشر

بعد أن تعلمنا كيف نقوم بتنفيذ أمر خاص بكل زر بشكل مستقل بحيث يكون لكل زر وظيفة مختلفة عن الزر الآخر وذلك عبر الطريقة onClick() في الدرس السابق سننتقل في هذا الدرس إلى إضافة واجهات جديدة إلى تطبيقنا وستكون الواجهات القادمة واجهة خاصة بكل نوع من أنواع الموبايلات وسنختار نحن مثال واحد من الأمثلة ونترك عملية الاكمال لكم لكي يكون تدريبكم فعال فهل أنتم مستعدون؟! هيا بنا ...

من برنامج أندرويد استديو فلنذهب إلى المجلد res ومن ثم إلى المجلد layout ولنقم بالضغط بالزر الأيمن على هذا المجلد وإضافة واجهة جديدة (ونقصد هنا ملف xml جديد) كما هو واضح في الصورة التالية:

ولنقم بتسمية هذا الملف باسم samlists كما هو موضح في الصورة التالية:

وبعد عملية إنشاء ملف الواجهة الجديدة علينا الآن أن نقوم بالسماح للمستخدم بالاختيار بين ثلاث أنماط أو فئات من منتجات موبايلات سامسونج لذلك سوف نضع ثلاثة خيارات على الشكل التالي:

·      الفئة الدنيا

·      الفئة المتوسطة

·      الفئة الممتازة

والعناصر التي سنحتاجها هنا سنتعلمها لأول مرة وهي العنصرين RadioGroup و RadioButton فهي بنا نتعرف عليهما ونستخدمهما بالشكل المناسب:

الأن لننفذ الخطوات معاً خطوة تلو الأخرى والبداية من سحب RadioGroup من Palette وتحديداً من جزء Containers كما هو واضح في الصورة التالية:

ونقوم بترك العنصر ضمن الواجهة في أي مكان نريد وسنلاحظ هنا أنه لن يظهر أي شيء جديد في الواجهة سوى مجموعة من النقاط الزرقاء التي تدل على أنه هناك عنصر ما ولكنه لا يحوي شيئاً وهذا أمر طبيعي جداً لأننا لم نقم بإضافة أي عنصر إليه بعد، وستبدأ الخطوة التالية من إضافة العناصر الثلاث والتي كل منها هو عبارة عن RadioButton وذلك من جزء Widget الموجود ضمن Palette والموضح في الصورة:

ونكرر هذه العملية مرتين إضافيتين ليصبح أمامنا ثلاث عناصر كما في الشكل التالي:

سنجري الآن بعض التنسيقات على العناصر السابقة وهي على الشكل التالي:

أولاً: سنقوم بتسمية كل عنصر باسمه المناسب عبر تحديد العنصر والذهاب إلى جزء Properties وتحديداً إلى الخيار text كما هو واضح في الصورة التالية:

ونكرر العملية مع العناصر المتبقية ليصبح الشكل كما يلي:

ثانياً: لنقم بتكبير حجم الخط لكل عنصر وذلك من الخيار textSize من جزء Properties أيضاً كما هو واضح في الصورة التالية:

ونكرر هذه العلمية مع العناصر البقية ليصبح الشكل كما يلي:

ثالثاً: بعد أن قمنا بتغيير الخط علينا الآن أن نقوم بتعديل الموضع لكل من العناصر السابقة ليصبح مناسب وكذلك أن نقوم بإبعاد هذه العناصر عن بعضها البعض قليلاً وهنا لابد من التعديل على الكود المكتوب بلغة XML بالذهاب إلى الجزء Text من الواجهة كما هو موضح في الصورة التالية:

لنقم الآن بالذهاب إلى RadioButton وإضافة التعليمة التالية:

android:layout_marginTop="30dp"

 

 

 

 

 

وذلك موضح بشكل أكثر ضمن الصورة التالية:

والآن يصبح شكل العناصر كما يلي:

وأخيراً سنقوم بجعل المحاذة للعناصر من جهة اليسار عبر تعديل التعليمة التالية:

android:layout_gravity="center_horizontal"

 لتصبح قيمتها كما يلي:

android:layout_gravity="left"

وبالتالي سيصبح شكل الواجهة كما في الصورة التالية:

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

لما يبقى علينا سوى إضافة زر للواجهة السابقة وبرمجته لينتقل إلى المكان المناسب بناء على خيار المستخدم وهذا ما سنتعلمه في الدرس القادم إن شاء الله فانتظرونا..