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

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

الدرس الخامس عشر

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

لنقم الآن بإكمال تطبيقنا عبر إنشاء واجهة جديدة لنوع من أنواع موبايلات السامسونج فيها صورة الموبايل وبعض مواصفاته فهل أنتم متحمسون؟! هي بنا إذاً ...

لنذهب إلى المجلد res ومن ثم المجلد layout ولنقم بالضغط بالزر الأيمن لإضافة الواجهة الجديدة كما هو واضح في الصورة التالية:

لنقم الآن بتصميم الواجهة ليصبح شكلها كما في الصورة التالية:

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

و العناصر التي سنضيفها هنا هي بالترتيب كما يلي:

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

ثانياً: قمنا بسحب العنصر Image View الموجود ضمن الجزء Widgets من العناصر المتاحة ووضعناه في المكان المناسب له ومن ثم وبعد تحديده ذهبنا إلى الخيار src الموجود في خصائص العنصر (properties) وضغطنا على الزر الذي يحوي مجموعة من النقاط ومن ثم اخترنا من النافذة التي تظهر أمامنا اسم الصورة التي قمنا بوضعها ضمن المجلد drawable منذ قليل.

ثالثاً: قمنا بإضافة العنصر Medium Text الموجود أيضاً في الجزء Widgets وذهبنا إلى خواص العنصر (بعد أن وضعناه في مكانه المناسب وحددناه) وكتبنا في الخيار Text اسم الموبايل وهنا "Samsung J2" وقمنا بتغيير حجم الخط من الخيار textSize بوضع القيمة 16pt ضمنه ومن ثم الضغط على زر Enter.

رابعاً: قمنا بتكرار الخطوة الثالثة وذلك بسحب أربع عناصر من النوع Medium Text وكل عنصر يخص مواصفة من مواصفات الموبايل ونقصد هنا:

·      المعالج

·      التخزين والذواكر

·      الكاميرا الأمامية

·      الكاميرا الخلفية

وقمنا بوضع العناصر في مكانها المناسب دون أن نغير أي شيء في خصائصها أبداً.

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

ويسمح هذا العنصر بتقييم أمر ما بوضع قيمة له من أصل 5 نجوم وذلك بمجرد وضع الرقم المناسب في الخيار rating الموجود في جزء خواص العنصر (Properties) الذي يمثل عدد النجوم الذي نريده كما في الصورة التالية:

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

وقد قمنا بسحب الزر من جزء Widgets وتحديداً العنصر Small Button وغيرنا النص المكتوب ضمنه ليصبح Back الذي سيمكننا من العودة إلى الواجهة السابقة وكذلك غيرنا حجم الخط من الخيار textSize ليصبح 16 pt.

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