عد ان تناولنا كيفية الكتابة على شاشة العرض واضافة بعض المكونات بها ، واخذنا فكرة عامة عن نظام اندرويد،سنبدأ اليوم في الدخول لعالم البرمجة قليلاً... ما انوي عمله وما افضله هو عدم دراسة اللغة كلغة ولا دراسة الأداة التي نستعملها ولكن افضل ان تكون الدراسة ضمن تطبيق نقوم بعمله وفي كل مره نتعرف على خاصية جديدة.[rtl]قبل عمل البرنامج الخاص بنا بجب ان نقوم بالتعرف على واحد من أهم الملفات والتي ذكرناها من قبل فيالدرس الثاني، هذا الملف هو AndroidManifest.xml وقد قمت بوضع نبذه سريعه عنه وانه هو المسئول عن التحكم وربط جميع ملفات التطبيق ببعض وتخزين المعلومات الهامه عنه وكذالك التصاريح.[/rtl]
[rtl]
[/rtl]
[rtl]عند الضغط على الملف تظهر هذه النافذة بالواجهة الرسومية رغم ان امتداد الملف xml ولكن كما عودنا هذا النظام وهو التسهيل على المبرمج أو المطور حتى لا يدخل في تفاصيل أكواد الـ xml ،التبويب الأول وهو Manifestيقوم باستعراض معلومات عامة عن التطبيق كرقم الإصدارة ومسار الكود وغيره ، وكذالك يقدم لنا خيار هام جدا وحتماً سنستخدمه وهو Exporting وهو الذي يتيح لك تصدير البرنامج الخاص بك بعد الإنتهاء منه على هيئة ملف واحد فقط بامتداد apk وهو الملف التشغيلي لنظام اندرويد ، واذا انتقلنا الى التبويب الثاني Applicationسنجد بعض الخيارات العامة مثل تغيير الإسم او الـ Theme أو أيقونة التطبيق نفسه... سنتعرف عليها لاحقاً مع التبويب Permissions و Instrumentations. سنأتي إلى التبويب الهام وهو الـ xml نفسه... دعونا نلقي عليه نظره عن قرب...[/rtl]
[rtl]
[/rtl]
[rtl]قراءة ملف الـ xml بسيط للغاية وستجده بنفس ترتيب التبويبات التي ذكرناها منذ قليل ولكن دعونا نتوقف عند الوسم application ستجد بداخله بيانات عامة عن البرنامج وبعدها وسم داخلي باسم activity وهو يحمل اسم الـ activity الرئيسية التي تم انشائها مع انشاء التطبيق ويحمل اسم HelloWorldActivity مسبوق بنقطة. ولو حدث عن طريق الخطأ انك قمت بازالة activity من هذا الملف لن يعمل التطبيق وسينتج عنه نافذة خطأ على جهازك، هذه كانت نبذه سريعة عن هذا الملف، لا تشغل بالك اذا كان لديك مشكلة في تنسيق هذه المعلومات وترتيبها فكل شئ في البداية يكون غامض وبعدها ستتحسن الأحوال![/rtl]
[rtl]
يسرني ان اقول لكم هذه المرة بكل ثقة انتهى وقت القراءة وحان وقت العمل![/rtl]
[rtl]سنبدأ هذه المره في التفكير لعمل برنامج متكامل يمكنك ان تقوم بارساله لأصدقائك وتجربته بنفسك... البرنامج ستكون امكانياته محدوده قليلاً ولكن لا بأس نحن مازلنا في الدرس الثالث! بالنسبة لي سأقوم بعمل برنامج عنموقع عرب هاردويربحيث تكون هناك قائمة بداية بها بعض الأزرار مثلعن الموقع،فريق العمل، أقسام الموقع،تواصل معنا.بحيث يقوم كل زر بتحويلي الى شاشة جديده للقراءة ويمكنني الرجوع مرة أخرى للقائمة. الفكرة بشكل مبدأي سهلة وستكون سهلة التنفيذ ايضاً ان شاء الله.[/rtl]
[rtl]
شاشة البداية[/rtl]
[rtl]ستكون كالعادة بإنشاء مشروع جديد من خلال برنامج Eclipse من نوع Android ونسير تبعاً للخطوات كما تم شرحه فيالدرس الأول، سنقوم بعدها باعداد صفحة البداية وقمت باعداد الصفحة بهذا الشكل:[/rtl]
[rtl]
[/rtl]
[rtl]
تصميم هذا الشكل ليس بالصعب ولكن ستواجه بعض العقبات اذا كانت هذه أول مره تتعامل بها مع اندرويد وخاصة الجزء الخاص بالتصميم....[/rtl]
- لتوسيط المحتوى في وسط الصفحة يجب عليك اختيار align وستحدها من خلال الشريط العلوي بهذا الشكل
- عمل مسافات بين الأزرار وبعضها وبين الكتابة والأزرار ستكون من خلال خيارات الـ padding و margin في صندوق propeties
[rtl]الموضوع سيحتاج الى بعض المحاولات ولكن لا تيأس... الأمر ليس بالمستحيل... والى ان تصل الى الشكل النهائي ستكون قد لاحظت عدة اشياء... منها ما يسمى ID في صندوق properties وهي واحده من اهم الخيارات والتي ستمكننا بعد ذالك بربط الكود بهذه المحتويات وهو يتم تسيمته بشكل تلقائي ، الأمر الآخر. وهو الشاشة ودقتها الى ان نصل الى درس نقوم بشرح هذه التفاصيل استخدم دائماً في محاكي الجهاز وشاشة التصميم HVGA[/rtl]
[rtl]
[/rtl]
[rtl]
شاشة About Arabhardware :[/rtl]
[rtl]ها نحن الآن اتممنا التصميم لأول شاشة ، الآن نريد عمل شاشة أخرى... كيف؟ نقوم بعمل layout جديد ، من مجلد layout الموجود داخل res سنقوم بانشاء ملف xml جديد وذالك بالضغط بالزر الأيمن على مجلد layout ثم New وبعدها other وبعدها Android ثم Android XML File وبعدها ادخال اسم الملف (سجب الا يحتوي على اي احرف كبيرة ) وترك خيار layout وترك باقي الخيارات وسنعود اليها مستقبلاً وبعدها Finish[/rtl]
[rtl]
[/rtl]
[rtl]
الآن لقد اتممت عملية انشاء الشاشة الثانية... لتظهر على هذا الشكل :[/rtl]
[rtl]
[/rtl]
[rtl]الشكل جيد اليس كذالك ؟ ولكن كيف قمت بوضع الصورة ؟ الأمر بسيط اختر الصورة التي تريد وضعها داخل التطبيق الخاص بك وقم بنسخها داخل مجلدات drawble باسمائها الثلاثة (لا تقلق سيأتي وقت لأشرح فيه الفرق بين كل مجلد والآخر ولكن الآن قم بنسحها فقط ، اسم الصور الخاصه بي هي logo.png[/rtl]
[rtl]
[/rtl]
[rtl]وبعدها من الواجهة الرسومية لملف الـ xml نختر Images&Media ثم نقوم بسحب Image View وعند السحب ستظهر نافذة بها جميع الصور الموجودة داخل مجلد drawble وستجد الصوره الخاصه بك بالإضافة الى صورة icon الإعتيادية مع كل برنامج والتي هي عبارة عن صورة ايقونة البرنامج... قم باختيار الصورة الخاص بك وستجدها تظهر أمامك على شاشة الجهاز ، وبعدها قم بتنسيقها من التوسيط وخلافه.[/rtl]
[rtl]ستواجهك مشكلة في حالة انك تريد اختبار عمل هذه الشاشة فعند التشغيل ستظهر شاشة البداية بشكل تلقائي... سيلزم هذا الأمر تغيير بسيط في الكوود لتغيير شاشة العرض الإفتراضيه عند عمل الجهاز ، اذهب الى الملف الرئيسي داخل src وقم بتغيير.[/rtl]
[ltr]
[b style="margin: 0px; padding: 0px; border: 0px;"]setContentView(R.layout.main);[/b][/ltr]
[rtl]إلى[/rtl]
[ltr]
[b style="margin: 0px; padding: 0px; border: 0px;"]setContentView(R.layout.##اسم الملف الجديد##);[/b][/ltr]
[rtl]
شاشة Teamwork :[/rtl]
[rtl]سنقوم باتباع نفس الخطوات التي نقوم بها لإنشاء شاشة جديدة ولكن مع اختلاف بسيط هذه المره ، شاشة فريق العمل ستحتوي على العديد من الأسماء ولذالك شاشة الهاتف العادي لن تتسع ان تحتوي كل هذه الأسماء ولذالك سنقوم بعمل شاشة بها Scrollbar... كيف؟ من خيار عمل ملف Android XML ومن خلال النافذة التي يتم فيها ادخال اسم الملف نقوم بالتوجه الى آخر خيار والذي يكون فيه الإختيار الإفتراضي لنوع عرض الشاشة هي Linear Layout ولكن سنقوم بتغييرها الى Scroll View[/rtl]
[rtl]
[/rtl]
[rtl]
وبعدها نقوم بإضافة مكونات الشاشة كما نريد وسنجد ان الشاشة أصبحت طويلة ولكن لا تقلق هناك Scrollbar سيقوم بحل المشكلة[/rtl]
[rtl]
[/rtl]
[rtl]
والآن عند التشغيل ستظهر كما نريد[/rtl]
[rtl]
[/rtl]
[rtl]
شاشة المراسلة Contact Us[/rtl]
[rtl]سنقوم من خلال هذه الشاشة بعمل فورم للمراسلات كالتي نراها ونستخدمها في المواقع ، التصميم لا يوجد به أي مشكلة ولكن كما توعدنا سنتعلم جزء بجزء من خلال التطبيق على برنامج حقيقي ، اذن دعونا نرى ما هي المشكله التي ستوجهنا هذه المره ، بعد تصميم لهذه الشاشة :[/rtl]
[rtl]
[/rtl]
[rtl]هي جيده ولا يوجد بها أي مشاكل سوى ان Send و Back to Home ليسوا على نفس المستوى ولو حاولت ان تجعلهم على نفس المتسوى ستفشل! لماذا ؟ لأننا نستخدم linear layout ، من مميزات وسهولة ادوات التصميم وكود اندرويد انه يتيح لنا امكانية وضع نظام عرض شاشة داخل نظام عرض آخر مثلا سنقوم الآن بوضع عرض الشاشة Tabel Row بسحبه في المكان أصف آخر صندق للكتابة[/rtl]
[rtl]
[/rtl]
[rtl]
وبعدها نقوم بوضع الأزرار بداخله بكل بساطه وستظهر بشكل رائع جنباً الى جنب[/rtl]
[rtl]
[/rtl]
[rtl]
شاشة الخدمات Services :[/rtl]
[rtl]لقد نسينا هذه الشاشة ، رجوعاً اليها مره أخرى سأقوم بعمل هذه الشاشة ليكون بها صور لخدمات الموقع المختلفه ويكون بها Scrollbar بالعرض وعند الضغط على اي منها تظهر محتوياتها الحقيقية على الإنترنت من خلال Web View لتظهر على الشكل التالي:[/rtl]
[rtl]
[/rtl]
[rtl]لنقوم بعمل هذه الشاشة سنضع Horizontal Scroll View من قائمة ادوات Composite وبعدها وضع مجموعة من الصور Image View بجانب بعض ، واسفلها نضعه WebView من Composite ايضاً[/rtl]
[rtl]
[/rtl]
[rtl]
[/rtl]
[rtl]
الآن قد أتممنا بنجاح عملية تصميم شاشات العرض ، سننتقل بعدها إلى ربط هذه الشاشات عن طريق الكود وهذا ما سنعرفه من خلال الدرس الرابع[/rtl]
[rtl]
[/rtl]
اترككم مع مزيد من التجارب الى ان نلتقي في الدرس الرابع ،
الرئيسية
البوابة
