سلسلة تعليم برمجة اندرويد - الدرس الثالث - تصميم برنامج عرب هاردوير

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

قبل عمل البرنامج الخاص بنا بجب ان نقوم بالتعرف على واحد من أهم الملفات والتي ذكرناها من قبل في الدرس الثاني ، هذا الملف هو AndroidManifest.xml وقد قمت بوضع نبذه سريعه عنه وانه هو المسئول عن التحكم وربط جميع ملفات التطبيق ببعض وتخزين المعلومات الهامه عنه وكذالك التصاريح.

عند الضغط على الملف تظهر هذه النافذة بالواجهة الرسومية رغم ان امتداد الملف xml ولكن كما عودنا هذا النظام وهو التسهيل على المبرمج أو المطور حتى لا يدخل في تفاصيل أكواد الـ xml ،التبويب الأول وهو Manifest يقوم باستعراض معلومات عامة عن التطبيق كرقم الإصدارة ومسار الكود وغيره ، وكذالك يقدم لنا خيار هام جدا وحتماً سنستخدمه وهو Exporting  وهو الذي يتيح لك تصدير البرنامج الخاص بك بعد الإنتهاء منه على هيئة ملف واحد فقط بامتداد apk وهو الملف التشغيلي لنظام اندرويد ، واذا انتقلنا الى التبويب الثاني Application سنجد بعض الخيارات  العامة مثل تغيير الإسم او الـ Theme  أو أيقونة التطبيق نفسه... سنتعرف عليها لاحقاً مع التبويب Permissions و Instrumentations.  سنأتي إلى التبويب الهام وهو الـ xml نفسه... دعونا نلقي عليه نظره عن قرب...

قراءة ملف الـ xml بسيط للغاية وستجده بنفس ترتيب التبويبات التي ذكرناها منذ قليل ولكن دعونا نتوقف عند الوسم application ستجد بداخله بيانات عامة عن البرنامج وبعدها وسم داخلي باسم activity  وهو يحمل اسم الـ activity الرئيسية التي تم انشائها مع انشاء التطبيق ويحمل اسم HelloWorldActivity  مسبوق بنقطة. ولو حدث عن طريق الخطأ انك قمت بازالة  activity  من هذا الملف لن يعمل التطبيق وسينتج عنه نافذة خطأ على جهازك، هذه كانت نبذه سريعة عن هذا الملف، لا تشغل بالك اذا كان لديك مشكلة في تنسيق هذه المعلومات وترتيبها فكل شئ في البداية يكون غامض وبعدها ستتحسن الأحوال!

يسرني ان اقول لكم هذه المرة بكل ثقة انتهى وقت  القراءة وحان وقت العمل!

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

شاشة البداية

ستكون كالعادة بإنشاء مشروع جديد من خلال برنامج  Eclipse  من نوع Android  ونسير تبعاً للخطوات كما تم شرحه في الدرس الأول ، سنقوم بعدها باعداد صفحة البداية  وقمت باعداد الصفحة بهذا الشكل:

تصميم هذا الشكل ليس بالصعب ولكن ستواجه بعض العقبات اذا كانت هذه أول مره تتعامل بها مع اندرويد وخاصة الجزء الخاص بالتصميم....

الموضوع سيحتاج الى بعض المحاولات  ولكن لا تيأس... الأمر ليس بالمستحيل... والى ان تصل الى الشكل النهائي ستكون قد لاحظت عدة اشياء... منها ما يسمى ID في صندوق properties  وهي واحده من اهم الخيارات والتي ستمكننا بعد ذالك بربط الكود بهذه المحتويات وهو يتم تسيمته بشكل تلقائي ، الأمر الآخر. وهو الشاشة ودقتها الى ان نصل الى درس نقوم بشرح هذه التفاصيل استخدم دائماً في محاكي الجهاز وشاشة التصميم HVGA

شاشة About Arabhardware :

ها نحن الآن اتممنا التصميم لأول شاشة ، الآن نريد عمل شاشة أخرى... كيف؟ نقوم بعمل layout جديد ، من مجلد layout  الموجود داخل res  سنقوم بانشاء ملف  xml جديد وذالك بالضغط بالزر الأيمن على مجلد layout  ثم New  وبعدها other وبعدها Android ثم Android XML File وبعدها ادخال اسم الملف (سجب الا يحتوي على اي احرف كبيرة ) وترك خيار layout  وترك باقي الخيارات وسنعود اليها مستقبلاً وبعدها Finish

الآن لقد اتممت عملية انشاء الشاشة الثانية... لتظهر على هذا الشكل :

الشكل جيد اليس كذالك ؟ ولكن كيف قمت بوضع الصورة ؟ الأمر بسيط اختر الصورة التي تريد وضعها داخل التطبيق الخاص بك وقم بنسخها داخل مجلدات drawble باسمائها الثلاثة (لا تقلق سيأتي وقت لأشرح فيه الفرق بين كل مجلد والآخر ولكن الآن قم بنسحها فقط  ، اسم الصور الخاصه بي هي logo.png

ستواجهك مشكلة في حالة انك تريد اختبار عمل هذه الشاشة فعند التشغيل ستظهر شاشة البداية بشكل تلقائي... سيلزم هذا الأمر تغيير بسيط في الكوود لتغيير شاشة العرض الإفتراضيه عند عمل الجهاز ، اذهب الى الملف الرئيسي داخل src وقم بتغيير.

setContentView(R.layout.main);

إلى

setContentView(R.layout.##اسم الملف الجديد##);

شاشة  Teamwork :

سنقوم باتباع نفس الخطوات التي نقوم بها لإنشاء شاشة جديدة ولكن مع اختلاف بسيط هذه المره ، شاشة فريق العمل ستحتوي على العديد من الأسماء ولذالك شاشة الهاتف العادي لن تتسع ان تحتوي كل هذه الأسماء ولذالك سنقوم بعمل شاشة بها Scrollbar... كيف؟ من خيار عمل ملف Android XML ومن خلال النافذة التي يتم فيها ادخال اسم الملف نقوم بالتوجه الى آخر خيار والذي يكون فيه الإختيار الإفتراضي لنوع عرض الشاشة هي Linear Layout  ولكن سنقوم بتغييرها الى  Scroll View

وبعدها نقوم بإضافة مكونات الشاشة كما نريد وسنجد ان الشاشة أصبحت طويلة ولكن لا تقلق هناك Scrollbar سيقوم بحل المشكلة

والآن عند التشغيل ستظهر كما نريد

شاشة المراسلة  Contact Us

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

هي جيده ولا يوجد بها أي مشاكل سوى ان  Send  و Back to Home  ليسوا على نفس المستوى ولو حاولت ان تجعلهم على نفس المتسوى ستفشل! لماذا ؟ لأننا نستخدم linear layout  ، من مميزات وسهولة ادوات التصميم وكود اندرويد انه يتيح لنا امكانية وضع نظام عرض شاشة داخل نظام عرض آخر مثلا سنقوم الآن بوضع عرض الشاشة  Tabel Row  بسحبه في المكان أصف آخر صندق للكتابة

وبعدها نقوم بوضع الأزرار بداخله بكل بساطه وستظهر بشكل رائع جنباً الى جنب

شاشة الخدمات Services :

لقد نسينا هذه الشاشة ، رجوعاً اليها مره أخرى سأقوم بعمل هذه الشاشة ليكون بها صور لخدمات الموقع المختلفه ويكون بها Scrollbar  بالعرض وعند الضغط على اي منها تظهر محتوياتها الحقيقية على الإنترنت من خلال Web View لتظهر على الشكل التالي:

لنقوم بعمل هذه الشاشة سنضع Horizontal Scroll View  من قائمة ادوات Composite  وبعدها وضع مجموعة من الصور Image View  بجانب بعض  ، واسفلها نضعه WebView  من Composite ايضاً

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

اترككم مع مزيد من التجارب الى ان نلتقي في الدرس الرابع ، كما يمكنكم ايضاً تحميل المشروع الخاص بي للإطلاع عليه لتسهيل المهمة ان واجهتك اي صعوبة من هنا

بانتظار مناقشتكم عبر موضوع المنتدى من خلال هذا الرابط للدرس الثالث

للإنتقال الى الدرس الرابع من هنا