إضافة الواجهة إلى AndroidMainfest.xml

الدرس الثاني عشر: التعامل مع أكثر من زر في الواجهة


تاريخ الإضافة:

09-06-2020

محتوى الدرس:

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


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

نريد أن تظهر رسالة تدل على الزر الذي ضغطناه فمثلاً عند الضغط على الزر الذي يظهر عليه شعار Samsung سوف نظهر للمستخدم رسالة محتواها كلمة "Samsung" ونكرر الأمر مع الزرين الباقيين بنفس الطريقة فهل أنتم مستعدون؟! أنا اعلم أنكم كذلك فهي بنا إذاً ...

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


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

ولنبدأ الآن بالتعريف البرمجي للأزرار الثلاثة وذلك ضمن الطريقة onCreate() وفق الشكل التالي:


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

لنقم الآن بشرح ما قمنا بكتابته:

تعلمنا في دروس سابقة أنه لدينا مفهومين أساسيين في لغة البرمجة جافا وهما الصف والغرض الذي هو صورة من ذلك الصف وقلنا أننا نعتمد في تعاملنا البرمجي على الغرض بشكل رئيسي حيث نريد ثلاث أزرا وبالتالي أخذنا ثلاث أغراض من الصف ImageButton أسميناها (i1 , i2 , i3) وهي تمثل الأزرار الثلاثة.

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


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

وبعد أن عرفنا الأغراض الثلاثة سنبدأ بإضافة حدث لكل زر من الأزرار عبر التعليمات التالية:


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

وسنلاحظ ظهور خط باللون الأحمر تحت الكلمة this وكنا قد تعلمنا في الدرس السابق كيف نقوم بإزالته (عبر إضافة Import المناسبة وكذلك implements أيضاً وأتمنى مراجعة الدرس السابق في حال النسيان).

وبعد حل المشكلة يصبح الكود البرمجي كما يلي:


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

كما نلاحظ أن الطريقة ()onClick قد أضيفت على الكود البرمجي كما هو واضح في الصورة التالية:


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

بعد الخطوات السابقة يجب ان نعلم أن الطريقة onCLick() تمثل حدث الضغط على الزر ولكن المشكلة هنا انه لدينا ثلاث أزرار فكيف سنميز بين الأزرار الثلاثة؟!

الحل ببساطة عبر الشرط التالي:


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

وبشرح بسيط لما سبق يمكننا القول بأن id هو متحول سنخزن فيه المعرف الخاص بالعنصر الذي نضغط عليه ونصل إلى هذا العنصر عبر View ولذلك نلاحظ في الطريقة OnCreate() وجود وسيط بالشكل (View v) أي أن v باختصار يمثل العنصر الحالي وبالتالي سنخبر المترجم (Compiler) بأنه إذا كان الزر الذي نضغط عليه هو الزر الأول (وسيعرف ذلك عبر العبارة R.id.imageButton التي تمثل معرف الزر الأول) فقم بأمر ما وسنكرر هذا الشرط على بقية الأزرار ليصبح المقطع البرمجي كما يلي:


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

ويجب التنويه على أن كلمة else تعني وإلا وهي تنفذ عندما لا يتحقق الشرط ضمن عبارة if وبالتالي تصبح قراءة الكود السابق كما يلي:
"إذا ضغطنا على الزر الأول اظهر رسالة فيها هواوي وإلا إذا ضغطنا على الزر الثاني فأظهر رسالة فيها سامسونج وإلا إذا ضغطنا على الزر الثالث فأظهر رسالة فيها آبل"
أتمنى أن تقوموا بتطبيق الدرس خطوة بخطوة وتعاينوا النتيجة ونلقاكم في الدرس القادم إن شاء الله ...