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

الدرس الثامن: ربط واجهتين ضمن التطبيق (الجزء الثاني)


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

30-05-2020

محتوى الدرس:

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


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

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

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

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


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

الخطوة الثانية: سنقوم بتعريف الزر برمجياً وذلك وفق الكود البرمجي التالي:


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

قبل ان نشرح الكود البرمجي السابق فإنه من الطبيعي جداً ان يخطر ببالكم السؤال التالي:

أين نضع الكود البرمجي السابق؟! الجواب ببساطة هو أننا سنضعه ضمن الطريقة ()onCreate كما في الشكل التالي:


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

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

الجواب ببساطة أن المحرر قام بإضافة الصف إلى الكود البرمجي بشكل تلقائي كما هو واضح في الصورة التالية:


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

وبعد أن قمنا بالتضمين سنشرح الكود البرمجي السابق:

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


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

الخطوة الثالثة: سنضيف الكود البرمجي التالي أسفل الكود السابق:


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

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


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

وذلك طبعاً بعد الضغط على كلمة this بالزر الأيسر ونختار من الخيارات الخيار الثاني وهو:


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

والخيار السابق يعني أننا نريد أن نجعل الكود البرمجي للواجهة البرمجية MainActivity يستخدم الواجهة OnClickListener والتي تحوي الطريقة التي نريد إضافتها وهي الطريقة onClick() وبعد اختيار الخيار السابق سيظهر الكود كما يلي:


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

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


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

إلى هنا نكون قد انهينا درسنا لليوم وسنلقاكم في الدروس القادمة لنتابع المضي نحو إنهاء تطبيقنا فانتظرونا ...


الدرس التالي