/سلسلة تعلم الأندرويد (3) تصميم الواجهات . The Views

سلسلة تعلم الأندرويد (3) تصميم الواجهات . The Views

تعلمنا في الدروس السابقة كيفية التعامل مع الـ Activity وهو في حد ذاته ليس له أي وجود علي الشاشة ، ولكنه يقوم برسم واجهة المستخدم التي تظهر علي الشاشة باستخدام الـ Views والـ ViewGroups ، وفي هذا الدرس سنتعلم كيفية عمل واجهة المستخدم (UI اختصارا لـ User Interface) وكيف للمستخدم أن يتفاعل معها ، وكما نري في الصورة السابقة فهناك تطور ملحوظ في شكل واجهات المستخدم في نسخ الأندرويد الحديثة فجوجل قد أعطت التصميم اهتمام كبير فهو يعتبر من أحد العوامل الرئيسية لجذب المستخدمين وإثارة إعجابهم ، فيجب علينا أيضا لإنشاء تطبيقات ناجحة أن نولي واجهات المستخدم أهمية كبيرة.

النقاط الرئيسية :

1-    فهم مكونات الشاشة.

2-    أهم سمات أو خصائص الـ Views.

3-    كيفية الاستماع إلي تنبيهات الـ Views.

4-    تطبيق لذيذ خفيف شامل جامع.

أولا : فهم مكونات الشاشة :

الأكتفيتي بيقوم بعرض الـ UI والتي تحتوي علي views مثل الأزرار – buttons ، والتسميات – labels ، وصناديق النصوص – text boxes ، وأثناء عرضهم يوجد مرحلتين

  • أثناء وقت التشغيل – run time  :

بيتم تحميل الـ UI في ميثود onCrate داخل كلاس الأكتفيتي بإستخدام ميثود setContentView وإعطاءها الـ Id الخاص بملف الـ xml.

  • أثناء الترجمة – compilation :

كل عنصر في ملف الـ xml بيتم ترجمته لما يعادله من كلاسات الـ GUI في الأندرويد ، والسمات – attributes بيتم تمثيلها بالميثود – methods.

تعريف الـ Views والـ ViewGroups :

الـ View يقصد بها الأشكال المستطيله التي تظهر في مساحة معينة علي الشاشة وأبسط أنواعها هي التي تستخدم لعرض نص كتابي مثل Button و EditText ، وأي فيو بيكون مشتق من كلاس رئيسي المشار إليه في هذه الحزمه android.view.View

الـ ViewGroup هي عباره عن مجموعه من فيو واحد أو أكثر من فيو ، يتم جمعهم معا في شكل تخطيطي معين (Layout) الذي يقوم بتحديد شكل ظهورهم وترتيبهم علي الشاشة ، مثل LinearLayout و RelativeLayout و TableLayout ، وهو بيكون مشتق من الكلاس الرئيسي android.view.ViewGroup وفي الدرس القادم سنتحدث عنه بالتفصيل إن شاء الله.

ثانيا : أهم سمات أو خصائص الـ Views :

فلنفرض مثلا أن هذا هو ملف الـ main.xml

فسيكون هذا هو شكل واجهة المستخدم

والسمات المستخدمه هنا أو ما يعرف بـ attributes الموجوده بداخل العناصر كل سمه تأخذ قيمه معينه بالشكل التالي:

  • android:layout_width

تحدد عرض هذا العنصر بالنسبة للـ layout الموجود بداخله ، وهي تأخذ إحدي القيمتين fill_parent أي يقوم بمليء عرض الـ layout أي يأخذ المساحة كاملة بين طرفي الشاشة ، والقيمة الأخري wrap_content أي يكون مساحته علي أد المحتوي فهو يقوم بمحاوطة ما بداخله.

  • android:layout_height

تحدد طول هذا العنصر بالنسبة للـ layout المتواجد بداخله هذا العنصر ، وهذه السمة تأخذ نفس القيمتين السابقتين.

  • android:background

تحدد خلفية هذا الـ layout ويمكن من خلاله تغير لون الخلفية بإعطاءها قيمة اللون المحدد ، وقيم الألوان عباره عن 6 خانات كل خانتين تمثل لون من الألوان الرئيسية الأحمر والأخضر والأزرق ويرمز لهم بـ RGB ويتم تحديد درجة كل لون باستخدام ترقيم الـ hexadecimal مسبوق بعلامة # ، ومن هذا الموقع يمكنك أن تجد قيم معظم الألوان.

  • android:text

يتم وضع به النص الذي نريده أن يظهر.

  • android:id

هنا بضيف للعنصر أي اسم أو ما يعرف بالـ id لاستطيع أن أتعامل مع هذا العنصر فيما بعد ، فيمكنني مثلا أن أستدعيه من خلال كلاس الأكتفيتي ، وهذه السمة تأخذ قيمة بهذا الشكل id/any_name+@ فالجزء الأول ثابت وهو عباره عن علامة @ متبوعه بعلامة + لتعريف التطبيق أن هذا id جديد فيتم إضافته في ملف R.java

سؤال : لماذل في كل سمة – attribute نستخدم في بدايتها كلمة android ؟ هل لاحظتم ذلك ؟ سأنتظر الإجابة في التعليقات …

ثالثا : كيفية الاستماع إلي تنبيهات الـ Views :

الـ Views تطلق ما يسمي بـ events عندما يتفاعل معها المستخدمين ، في الأندرويد يوجد أكثر من طريقة للتعامل مع التنبيهات أو الأحداث – events الناتجة عن تفاعل المستخدم مع التطبيق ، منها:

الـ event listeners تطلق علي تجميعة من الكلاسات التي تسمي بـ interfaces أي التي تحتوي علي methods ولكن ليس بها أي كود برمجي لذلك يتم عمل لها override في كلاس الأكتفيتي ، كل هذه الميثود مجمعة في الكلاس الرئيسي View ويقوم النظام بإستدعاءها عند حدوث أي تفاعل مع فيو معين فلذلك يطلق عليها callback methods (هل هذه الجزئية تذكركم بشيء سابق؟ نعم إنها نفس فكرة الميثود الخاصة بتغير حالة الأكتفيتي في دورة حياته).

مثال : لو فرضنا أن عندنا فيو مثل Button تم لمسه ، فسيتم استدعاء ميثود onTouchEvent

وهذا كود بسيط لتوضيح كيفية عمل ذلك مع ميثود onClick

رابعا : التطبيق :

سنقوم بعمل تطبيق لنري فيه كيفية تفاعل الـ views مع المستخدم ، خطوات عمل التطبيق بسيطه جدا :

1-    نفتح برنامج eclipse ونقوم بعمل مشروع جديد وليكن اسمه UserInterface

2-    نقوم بتصميم واجهة المستخدم عن طريق كتابة هذا الكود في ملف الـ main.xml

إذا ظهرت أخطاء في هذا الكود فأتمني أن لا تكونوا نسيتم إضافة المصادر المشار إليها في هذا الكود إلي القيم الموجوده بداخل ملف الـ strings.xml

3-    نقوم بربط واجهة المستخدم بالكود ليستطيع المستخدم أن يتفاعل معها عن طريق كتابة هذا الكود في الكلاس الرئيسي UserInterfaceActivity.java

والآن كل ما عليك فعله هو أن تجرب تشغيل هذا التطبيق ، وتري ماذا سيحدث عند الضغط علي كل فيو.

ملاحظات :

  • طبعا أنا مش هنسي أأكد عليكم أن تقوموا بكتابة الكود بأيديكم ولو فيه حاجه مش واضحه تسألوا عنها إحنا هنا عشان نساعد بعض.
  • يمكنك استخدام طريقة Drag & Drop يعني السحب والإفلات لتصميم الواجهات ، إنك بتسحب أي فيو انت عايزه من الجزء الموجود في يسار الشاشة وتضعه بالشاشة الإفتراضية ، وتستطيع أن تقوم بالتعديل علي خصائصه من خيار properties
  • وهناك طريقة أخري لتصميم الواجهات غير ملفات الـ xml واسمها الطريقة البرمجية ويتم تصميم الشاشة عن طريق الكود الموجود في كلاس الأكتفيتي نفسه ، وهذه الطريقه تستخدم في بعض الأحيان عندما تعتمد واجهة المستخدم علي متغيرات تحدث أثناء عملية التشغيل مثل الألعاب.

شكرا لكم علي المتابعة ، ويسعدني تلقي ملاحظاتكم واستفساراتكم … وإلي لقاء في الدرس القادم إن شاء الله تعالي.

المسؤول الأول عن قسم استكشف اندرويد في موقع أندرويدهـاز و صاحب سلسلة تعلم أندرويد وطالب في كلية الهندسة جامعة الأزهر بالقاهره، مهتم بالتكنولوجيا وأعشق تجربة كل جديد من منتجاتها.. http://androidhas.com/