إضافة زر إلى الواجهة في التطبيق

الدرس الرابع: إضافة زر إلى الواجهة في التطبيق


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

24-05-2020

محتوى الدرس:

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


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

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


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

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

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

ولكي نقوم بذلك نهب على مكان تواجد العناصر ضمن الواجهة activity_main.xml الموجودة في مجلد layout (كما تعلمنا في الدروس السابقة) ونسحب العنصر من Palette وتحديداً من جزء Widgets كما يوضح الشكل التالي:


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

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


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

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


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

ثم نضغط زر Enter من لوحة المفاتيح لتفعيل الخيار الذي قمنا به ليصبح شكل الواجهة النهائي كما يلي:


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

الآن نريد أن نزيد من حجم الخط قليلاً المكتوب ضمن الزر ليصبح شكله أفضل وما علينا للقيام بذلك سوى تحديد الزر بالزر الأيسر للماوس ومن ثم الذهاب إلى جزء Properties (كما فعلنا عند كتابة النص ضمنه) واختيار الخيار textSize ومن ثم نكتب ضمنه القياس الذي نريده للخط وهنا سنؤكد على أن وحدة القياس المحبذة في الأندرويد للخط هي pt أو sp أو dp وليس px كما في CSS مثلاً ولذلك نكتب ضمن المكان المخصص 18pt كما هو واضح في الصورة التالية:


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

ثم نضغط على زر Enter من لوحة المفاتيح فيصبح شكل التطبيق كما يلي:


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

نكرر نفس الأمر السابق مع كلمة Mobile App التي كتبناها في أعلى الواجهة لتصبح بحجم خط 14pt أيضاً كما هو واضح في الصورة التالية:


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

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


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

ومن ثم الضغط على مفتاح Enter من لوحة المفاتيح ليصبح شكل الواجهة كما يلي:


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

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

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


الدرس التالي