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

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

الدرس الثالث

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

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

تطبيق يعرض مجموعة من الأجهزة الخليوية (الموبايلات) ولكل موبايل مواصفات معينة وصورة والتطبيق مؤلف من مجموعة من الواجهات البرمجية (Activities) ليكون أول تطبيق لنا في عالم الأندرويد، فهي بنا.

لننشأ تطبيق جديد ونسميه MobileApp كما تعلمنا في الدروس السابقة ولنبدأ من واجهة Android Studio التي ستظهر وفق الشكل التالي:

اضغطوا بالزر الأيسر للماوس على activity_main.xml ستظهر لكم على الجانب الأيمن من النافذة مجموعة أكواد هذه الأكواد مكتوبة بلغة XML كما تعلمنا في الدروس السابقة ونلاحظ في أسفل هذه الأكواد خيارين وهما Design و Text كما هو موضح في الصور التالية:

الخيار المفعل حالياً هو Text ويعني الكود المكتوب على شكل مجموعة من التعليمات والآن للانتقال إلى شكل الواجهة التصميمية نضغط على Design فتظهر الواجهة كما يلي:

في الواجهة الحالية يظهر الشكل المتوقع ضمن جهاز الموبايل عند تشغيل التطبيق والآن لنقوم ببعض التغييرات لتناسب الشكل الذي نريده ونبدأ بإزالة Hello World عبر تحديدها بالضغط مرة واحدة بالزر الأيسر للماوس ومن ثم الضغط على زر Delete من لوحة المفاتيح .

هل قمتم بذلك؟ جميل احسنتم لننتقل على الخطوة التالية.

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

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

الأن لنغير النص المكتوب ضمن Large Text إلى Mobile App وذلك كما يلي:

نحدد العنصر Large Text بالضغط عليه بالزر الأيسر ومن ثم ومن نافذة Properties الموجودة في الجانب الأيمن والأسفل من النافذة والموضحة في الصورة التالية:

لنذهب إلى الخيار Text وذلك من جزء Properties ومن ثم نضغط ضمنه بالزر الأيسر للماوس ونكتب النص الذي نريد أن يظهر مكان Large Text وسنكتب هنا Mobile App كما هو واضح في الصورة التالية:

وبعد الانتهاء من الكتابة نضغط على زر Enter من لوحة المفاتيح لكي يتم تفعيل النص وستظهر النافذة بالشكل التالي:

أوكي لنقم الآن بإضافة صورة صغيرة لتطبيقنا وذلك وفق الخطوات التالية:

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

لم يتبقى سوى إضافة عنصر الصورة وذلك من Palette ومن قسم Widget نختار ImageView ونسحبه ضمن شاشة الموبايل كما فعلنا سابقاً مع العنصر Large Text كما في الشكل التالي:

الآن تبقى فقط أن نحدد الصورة التي نريدها وذلك من جزء Properties (طبعا بعد تحديد العنصر ImageView) ومن جزء src نضغط ضمنه ومن ثم نضغط على الزر الصغير الذي يوجد عليه نقاط لتظهر النافذة الموضحة في الصورة التالية: