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

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

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

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

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

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

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

ImageButton i1=(ImageButton)findViewById(R.id.imageButton); ImageButton i2=(ImageButton)findViewById(R.id.imageButton2); ImageButton i3=(ImageButton)findViewById(R.id.imageButton3);

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

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

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

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

i1.setOnClickListener(this); i2.setOnClickListener(this); i3.setOnClickListener(this);

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

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

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

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

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

int id=v.getId();  if(id==R.id.imageButton){       }

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

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

"إذا ضغطنا على الزر الأول أظهر رسالة فيها هواوي وإلا إذا ضغطنا على الزر الثاني فأظهر رسالة فيها سامسونج وإلا إذا ضغطنا على الزر الثالث فأظهر رسالة فيها آبل"

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