الدرس الرابع - عناصر واجهة الeclipse و خصائصها

السلام عليكم ورحمة الله وبركاته

سنستعرض في هذا الدرس إن شاء الله مكونات واجهه العمل layout و تكوين كل مكون منها و  طريقة التعامل معها كل واحده منهم على حده.

الواجهات Activity layout :

لو قمنا بتشبيه بسيط بين برمجة الأندرويد و صناعة برامج تعمل على بيئة ويندوز windows application ، سنجد ان الملفات التي تسمي Activity تشبه إلي حد ما مع الملفات واجهات الويندوز  windows forms  ، أما لو كنت مبرمج تستخدم واجهات ال WPF Windows Presentation Foundation ستجد أن الأمور مألوفه بشكل أكبر ، لإعتماد الطريقتين و أقصد بالطريقين طريقة الActivity في الأندرويد و WPF في الويندوز على "وسوم" لغة التركيب XAML و التي سنستعرضها لاحقا من خلال درس شرح تركيب ال Activity.

من الممكن ان يحتوي التطبيق على عدد من الActivities  و كل Activity يحتوي على كائنات Objects تسمي الView و الشكل القادم قد يوضح رسم تخيلي لمشروع تطبيق أندرويد .

لاحظ في الشكل السابق مجموعه من الView تكون view Group و يمكنك من خلال هذه المجموعات أن تخطط واجهه المستخدم كما تشاء و سأعود في الدرس القادم بشرح تفصيلي لكل مكونات واجهه المستخدم ال layout .

أرجوا أن لا أكون قد سببت لك نوع من أنواع الخلط بين كمية المصطلحات الكثيرة التي إستخدمتها في خلال هذا الدرس و لكن تأكد أن كل شيئ في أوله صعب و أن كانت هناك نقاط غير واضحه تماما فيما سبق فارجوا أن تتركها و أن تتجه قدما نحو تكملة هذا الدرس و تاكد أن كل نقطه من هذه النقاط سوف أعود إليها و اعطي عليها أمثلة … فالنكمل الدرس سويا ..

في داخل ملفات المشروع ستجد هذا الملف res → layout → main_activity.xml

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

علي يسار الواجهة سوف تجد لوحة الأدوات palette و هي تحتوي على كل الكائنات التي سبق و أطلقنا عليها views و يمكنك أن تسحب أي أداه و تتركها على الواجهة ، ولو كنت ممن إستخدموا برنامج مثل visual studio ستجد أن الامر متشابهه لدرجه كبيرة .

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

في أقصي يمين البرنامج ستجد قائمة أخري مهمة هي قائمة الoutline و ستجد بداخلها كل محتويات المشروع و كل الأدوات التي قمت بإستخدامها داخل الملف main_activity.xml ، كما هو مبين بالصورة القادمة.

يمكن أن نري خلال الشكل السابق أنه يوجد عنصر TextView موجود داخل العنصر RelativeLayout  و هذا مثال على ما كنت ذكرته سابقا وهو مجموعة العناصر أو الViwe Group …. الأن حاول إضافة بعض العناصر للشاشة مثلا ضيف من قائمة Form widgets ضيف زر button و مربع إختياري check box و من قائمة Text Fields أختار مربع نص Text Box عادي ستجد مكتوب عليه abc و الأن أنظر إلي الشاشة الoutline

ستجد أن العنصر RelativeLayout قد أضيف أليه عناصر أخرون هم button1 و checkBox1 و editText1  ، طبعا تم تعيين الأسماء بشكل تلقائي من قبل الeclipse ولكن أتركها الأن على حالها هذا فسوف نعود لها في الدرس القادم و الذي سيكون عن الlayout و طريقة التعامل معها . أما الأن سيكون شروعك كما بالشكل القادم.

الان لديك واجهه مستخدم layout و لديك عليها مجموعه من العناصر و حتي تتحكم في خصائص كل عنصر فقط أنقر عليه على الواجهة بالماوس أو أنقر علية في قائمة الOutline و أنظر اسفل اليمين في شاشة البرنامج ستجد لوحة الخواص Properties ، و من خلال تلك اللوحة سنتحكم في خواص عناصر الواجهة.

للتوضيح إختر الزر مثلا button1 ثم إذهب إلي لوحة الخواص و إبحث عن الخاصية Text على يمين الخاصية ستجد مربع نص مكتوب فية Button إمسح تلك الكلمة و إستبدلها بأي شيء تريده وليكن "اهلا بك في أندرويد" بإمكانك أيضا تغير خاصية الText لكل العناصر التي قمنا بإستخدامها الأن قم بحفظ التغيرات التي قمنا بعملها في المشروع بإمكانك إستخدام الإختصار التالي
 CTRL + SHIFT + S أو فقظ إضغط على Save و قم ببدئ التطبيق كما تعلمت في الدرس السابق أو يمكنك إستخدام الإختصار
CTRL + F11. الأن سيعمل معك كما هو مبين في الشكل القادم.

ساترككم الأن في رعاية الله و سنلتقي مع الدرس القادم و الذي سيكون موضعه عن الواجهات و اسرارها و طريقة التعامل معها و مع ملفات الXML التي تحتوي على هذه الواجهات. و السلام عليكم.

أحمد محمدي

يمكنك نقل أي موضوع من المدونة بشرط ذكر المصدر وذكر رابط الموضوع الأصلي.