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

الدرس الحادي عشر: التعامل مع العنصر ImageButton


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

06-06-2020

محتوى الدرس:

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


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

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

بعد حذف الأزرار لنقم بسحب العنصر ImageButton من جزء Palette كما هو واضح في الصورة التالية:


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

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


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

وقبل عملية النسخ لابد من أخذ الملاحظات التالية بعين الاعتبار:

  1. استخدام اللاحقة png للصور أفضل من اللاحقة jpg لأنها تكون بدون خلفية وبالتالي ستأخذ خلفية الواجهة ما يجعل شكل التطبيق أفضل بكثير (طبعاً يجب مراعاة ذلك عند تحميل الصورة من الانترنت لأننا لا نستطيع ببساطة تغيير اللاحقة بل علينا البحث عن الصورة بلاحقة png ضمن غوغل).
  2. لا يجوز أن يحوي اسم الصورة أحرف كبيرة بل يجب أن يكون كله حروف صغيرة وإلا سيحدث خطأ يمنعنا من تنفيذ البرنامج.
  3. لا يجب ان يحوي اسم الصورة فراغات أبداً.

بعد إنهاء الخطوة السابقة علينا الآن أن نحدد لكل زر من الأزرار صورة مناسبة له وبما اننا قمنا بسحب زر واحد فقط فلنقم بتحديده من جزء Component Tree الموجود في الأعلى كما هو موضح في الصورة التالية:


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

وبعد التحديد نقوم بالذهاب إلى الخاصية src من الجزء properties كما هو واضح في الصورة التالية:


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

وهنا نضغط على الزر الذي يحتوي ضمنه ... فتظهر نافذة كما في الشكل التالي:


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

وهنا نحدد الصورة المناسبة (ولتكن huawei مثلاً) ومن ثم نضغط على الزر ok فتظهر الواجهة بالشكل التالي:


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

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


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

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

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