سلسلة
تعليم برمجة تطبيقات الأندرويد
الدرس الرابع
مرحبا بكم أصدقاءنا مجدداً في هذا
الدرس الجديد من سلسلة تعليم برمجة تطبيقات الأندرويد اربطوا الأحزمة سننطلق...
نحن الآن قد بدأنا بتصميم الواجهة
الرئيسية الأولى في تطبيقنا وكنا قد أنهينا الدرس السابق بتصميم شكل أولي لواجهة
بداية التطبيق (بإضافة عناصر النص والصورة) وكان الشكل كما يلي:
سنقوم بإكمال الواجهة بإضافة عنصر
واحد جديد فقط إليها وهو الزر، ويستخدم الزر في التطبيقات ليطبق حدث ما عن الضغط
عليه فماذا يعني ذلك؟!
الجواب بسيط الحدث يعني أن أمراً
ما سيتم تنفيذه عند الضغط على هذا الزر وهذا الأمر يختلف بحسب ما يريد المبرمج من
الزر القيام به عندما يضغط المستخدم على الزر فمثلاً قد يعرض الزر رسالة للمستخدم
عند الضغط عليه وربما قد ينقله على واجهة أخرى من الواجهات البرمجية التي يتألف
منها التطبيق وبالتالي نرى أن للزر العديد من المهام التي يمكن أن نعتمد عليه فيها
ضمن أي تطبيق نقوم ببرمجته، إذاً الزر عنصر مهم أليس كذلك؟! بالطبع هو عنصر مهم
جداً.
ولكي نقوم بذلك نهب على مكان تواجد
العناصر ضمن الواجهة activity_main.xml الموجودة في مجلد layout (كما تعلمنا
في الدروس السابقة) ونسحب العنصر من Palette وتحديداً من جزء Widgets كما يوضح
الشكل التالي:
وبعد أن نسحب العنصر نقوم بإفلاته
ضمن النافذة في مكان مناسب له كما هو موضح بالصورة التالية:
لنقوم الأن بتغيير النص المكتوب ضمن الزر وذلك بتحديده بالنقر مرة
واحدة بالزر الأيسر للماوس على العنصر ومن ثم الذهاب إلى جزء Properties وتحديداً
الخيار Text ولنكتب ضمنه بعد أن نضغط بالزر الأيسر
الكلمة "Start" كما يوضح الشكل التالي:
ثم نضغط زر Enter من لوحة
المفاتيح لتفعيل الخيار الذي قمنا به ليصبح شكل الواجهة النهائي كما يلي:
الآن نريد أن نزيد من حجم الخط
قليلاً المكتوب ضمن الزر ليصبح شكله أفضل وما علينا للقيام بذلك سوى تحديد الزر
بالزر الأيسر للماوس ومن ثم الذهاب إلى جزء Properties (كما فعلنا
عند كتابة النص ضمنه) واختيار الخيار textSize ومن ثم نكتب ضمنه القياس الذي نريده للخط وهنا
سنؤكد على أن وحدة القياس المحبذة في الأندرويد للخط هي pt أو sp أو dp وليس px كما في CSS مثلاً ولذلك
نكتب ضمن المكان المخصص 14pt كما هو واضح في الصورة التالية:
ثم نضغط على زر Enter من لوحة
المفاتيح فيصبح شكل التطبيق كما يلي:
نكرر نفس الأمر السابق مع كلمة Mobile App التي
كتبناها في أعلى الواجهة لتصبح بحجم خط 14pt أيضاً كما
هو واضح في الصورة التالية:
بقي خطوة أخيرة فقط لننهي الواجهة
الأولى وهي اختيار نمط خط مناسب أكثر من هذا النمط ولذلك نحدد العنصر النصي (أي
عبارة Mobile App) وذلك بالضغط عليها بالزر الأيسر ومن ثم اختيار الخيار FontFamily من جزء Properties ومن ثم
الكتابة ضمنه بالشكل التالي:
ومن ثم الضغط على مفتاح Enter من لوحة
المفاتيح ليصبح شكل الواجهة كما يلي:
مع ملاحظة أننا أعدنا نفس الخطوات
على الزر ليصبح نمط الخط فيه أيضاً monospace وبهذا نكون قد أنهينا فعلياً تصميم الواجهة
الأولى في تطبيقنا جميل أليس كذلك كبداية؟!
انتظرونا في الدرس القادم لكي نقوم
بتصميم الواجهات التالية ونعلمكم كيف يتم الانتقال من واجهة أولى إلى واجهة ثانية
بالاعتماد على عنصر الزر الذي قمنا بإضافته والكثير غيره أيضاً سنتعلمه في هذه
السلسة فالأجمل قادم ... دمتم بخير
ليست هناك تعليقات:
إرسال تعليق