6: اندرويد – بناء واجهة مستخدم بسيطة UI

ملاحظة : الموضوع عبارة عن حلقة من حلقات سلسلة برمجة وتطوير اندرويد Android Development

بناء واجهة مستخدم بسيطة باندرويد

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

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

سوف نتعلم ضمن  هذا الدرس مايلي :

  1. بناء تنسيق خطي Linear Layout
  2. اضافة حقل نصي Text Field
  3. اضافة ثوابت نصية ضمن ملف values
  4. اضافة زر button
  5. جعل صندوق الادخال يمتد على عرض الشاشة

للمزيد من الفائدة بإمكانكم  الاطلاع على Layouts

بناء واجهة مستخدم بسيطة باندرويد

يتم بناء واجهة المستخدم الخاصة بتطبيقات اندرويد باستخدام هرمية من اغراض  View و ViewGroup.

إن غرض View عادة عبارة عن widgets خاصة بواجهة المستخدم مثل “الأزرار” buttons أو “الحقول النصية ” text fields .

أما اغراض ViewGroup فهي عبارة عن حاويات غير مرئية لاغراض  View, والتي يتم فيها تعريف تنسيق ظهور ال View ضمنها (كأن تتوضع ال View على ضمن شبكة أو على شكل قائمة طولية).

يزودنا اندرويد بمجموعة من المصطلحات الخاصة بملف XML التي توافق كل واحدة منها صف فرعي من View أو ViewGroup , وبذلك يصبح بإمكانك تعريف واجهة المستخدم UI الخاصة بك ضمن ملف XML باستخدام عناصر UI الهرمية.

التنسيقات البديلة Alternative Layouts

إن القيام بتعريف تنسيقات واجهة المستخدم UI layout باستخدام XML بدلا من الترميز المباشر- الذي يأخذ موضعه في زمن التنفيذ – مفيد لعدة اسباب, ولكنه مهم جدا لأنه يمكنك من بناء عدة تنسيقات لعدة شاشات بقياسات مختلفة.

على سبيل المثال, بإمكانك انشاء نسختين من نفس التنسيق , وتخبر النظام بأن يستخدم أحدها على الشاشات الصغيرة , وأن يستخدم الثانية على الشاشات الكبيرة. لمزيد من المعلومات, بإمكانكم مراجعة الصف class الذي يتحدث حول Supporting Different Devices.

view group

الشكل اعلاه يظهر تشكل اغراض ViewGroup الاساسية ضمن هرمية التنسيق , وتحوي بدورها على اغراض View

 

ضمن هذا الدرس سوف نقوم ببناء وإنشاء تنسيق ضمن ملف XML , الذي بدوره يتضمن حقلا نصيا text field , وزر button.

أما في الدرس القادم, فسوف نبرمج ونظهر آلية الاستجابة التي تحدث عندما يتم الضغط على ذاك الزر button الذي اضفنا, وذلك عبر ارسال محتويات الحقل النصي إلى فعالية أخرى another activity .

إنشاء تنسيق خطي Linear Layout

افتح الملف activity_main.xml  الموجود في المسار التالي : res/layout/

ملاحظة : ضمن بيئة eclipse  عندما تقوم بفتح ملف تنسيقات, فإنك سوف ترى في البداية فور فتحه المحرر الخاص بشكل التنسيق Graphical Layout editor. وهو عبارة عن محرر يساعدك في بناء التنسيق باستخدام ادوات WYSIWYG. فيما يخص درسنا, فإننا سوف نقوم بالتعامل مباشرة مع ملف XML, لذا انقر في اسفل الشاشة على تبويب activity_main.xml لفتح محرر ملف XML.

يتضمن قالب BlankActivity – الذي قمنا باختياره اثناء بناء المشروع – ملف activity_main.xml  مع كل من RelativeLayout ك  view  جذر ضمن الملف root view  , بالاضافة TextView على انه view   ابن( يمكن ملاحظة ذلك بسهولة من تنسيقات ملف XML وتعشيشها داخل بعضها).

في البداية , سوف نقوم بحذف عنصر <TextView> وتعديل عنصر <RelativeLayout> ليصبح  <LinearLayout>.

بعد ذلك سوف نقوم بإضافة خاصية android:orientation ونسند قيمتها إلى القيمة "horizontal". ستبدو النتيجة كما يلي :

UI linear layout

إن LinearLayout  عبارة عن view group ( أي صف فرعي من ViewGroup) الذي يقوم بتوضيع وتنسيق  ال views  الابن إما باتجاه عمودي أو باتجاه افقي, وذلك بحسب ما تم تعينه ضمن خاصية android:orientation.

يظهر كل ابن ضمن تنسيق LinearLayout على الشاشة بحسب الترتيب الذي تم وضعه فيه ضمن ملف XML.

أما الخاصيتين  android:layout_widthو android:layout_height فهما خاصيتين اساسيتين ومطلوبتين بالنسبة لكل ال views لكي تستطيع كل view ان تقوم بتحديد الحجم بالاعتماد عليهما.

وبما أن التنسيق LinearLayout عبارة عن ال root view  ضمن التنسيق , لذلك فإنه يتوجب عليه أن يملأ كل مساحة الشاشة المتاحة للتطبيق, وذلك عبر اسناد قيم الخاصتين width  و  height إلى القيمة match_parent".

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

لمزيد من المعلومات حول خصائص التنسيق layout properties بإمكانك قراءة  دليل التنسيق من الرابط التالي Layout  .

إضافة حقل نصي Text Field

لتنشأ للمستخدم حقل نصي text field قابل للتعديل, عليك بإضافة عنصر <EditText> ضمن تاغ <LinearLayout> في ملف activity_main.xml .

وهذه الخاصية <EditText> مثلها مثل اي غرض View , يتوجب عليك تعريف بعض خصائص XML لتحدد خصائص غرض View.

فيما يلي نبين لك كيف تقوم بالتصريح عن الحقل النصي داخل عنصر <LinearLayout>

 UI add text field

resource objects بعض المعلومات عن اغراض الموارد 

إن غرض المورد resource object  ببساطة عبارة عن اسم فريد , وتأتي اسماء الموارد مترافقة مع موارد التطبيق مثل (السلاسل المحرفية , ملف التنسيقات , الصور النقطية).

 كل مورد من الموارد له غرض مورد resource object  مرافق له ومعرف ضمن المشروع ضمن ملف gen/R.java.

بإمكانك استخدام اسماء الاغراض الموجودة في الصف R (class R) لتشير إلى مواردك, على سبيل المثال , عندما ترغب بأن تحدد قيمة لسلسلة محرفية من أجل تعيين خاصية   android:hint.

بإمكانك ايضا انشاء معرفات موارد resource IDs التي سترفقها مع view  باستخدام خاصية android:id, التي بدورها تمكنك من الاشارة إلى هذا ال view  من كود آخر.

تقوم اداة SDK بتوليد ملف R.java في كل مرة تقوم بترجمة مشروعكcompile  . يجب ألا يتم نهائيا تعديل هذا الملف بشكل يدوي.

لمزيد من المعلومات, اقرأ مايلي : Providing Resources.

شرح الخصائص attribute :

android:id

تقوم هذه الخاصية بتزويد اسم فريد لل  view, والذي بإمكانك استخدامه ( اي الاسم ) للاشارة إلى الغرض وذلك من خلال كود (رماز) تطبيقك, مثل عملية القراءة والتعامل مع الغرض (سوف يتم توضيح هذا بشكل عملي في الدرس القادم).

يعتبر الرمز (@) رمز مطلوب عندما تقوم بالاشارة إلى اي غرض مورد resource object  من ملف XML. ويتم اتباعه بنوع المورد resource type (ال id في حالتنا هذه ), ومن ثم ب “سلاش/” , وبعدها باسم المورد resource name  (edit_message).

يعتبر رمز (+) اساسي ومطلوب فقط عند تعريف معرف المورد resource ID للمرة الأولى فقط. عندما تقوم بترجمة مشروعك compile, فإن ادوات ال SDK تستخدم اسم المعرف (ID name) لإنشاء معرف مورد جديد ضمن المشروع وذلك في ملف gen/R.java ليشير إلى عنصرEditText .

ما إن يتم تعريف معرف المورد resource ID بهذه الطريقة , فإن بقية المؤشرات والمراجع إلى هذا المعرف ID لا تحتاج إلى اشارة “+”. إن استعمال اشارة “+” ضروري فقط عند تحديد معرف مورد جديد new resource ID وليس ضروريا للموارد لبعض الموارد مثل : السلاسل المحرفية أو التنسيقات.

  android:layout_width  و  android:layout_height

بدلا من استخدام قياسات محددة بالنسبة للطول والعرض, فإن القيمة "wrap_content"  تعني بأن ال view  يجب ان يزداد عرضه بحسب الحاجة ليناسب محتويات ال view.أما في حال استخدام القيمة "match_parent", عندها فإن العنصر EditText  سوف يملأ الشاشة كلها, لأنه عندها سوف يطابق حجم العنصر الأب LinearLayout. لمزيد من المعلومات, الاطلاع على الدليل Layouts.

android:hint

وهي عبارة عن السلسلة المحرفية الافتراضية التي سيتم عرضها عندما يكون الحقل النصي فارغا. وبدلا من استخدام سلسلة ثابتة كقيمة لهذا الحقل , فإن  القيمة "@string/edit_message" تشير إلى مورد عبارة عن سلسلة محرفية string resource معروض ضمن ملف مستقل. وبما اننا نشير هنا إلى مورد من نمط محرفي ( وليس فقط معرف), لذلك فنحن لسنا بحاجة إلى اشارة (+).

على كل الاحوال, ولأننا لم نقم بتعريف مورد السلسلة المحرفية بعد string resource, فإنه سوف يظهر لنا في البداية خطأ ترجمة compile error. سنقوم باصلاح هذا الخطأ في القسم التالي عبر تعريف السلسلة المحرفية.

ملاحظة : مورد السلسلة المحرفية string resource هذا له نفس اسم معرف العنصر element ID والذي هو : edit_message .على كل الاحوال, فإن هذا الموضوع لا يسبب اي مشكلة او تضارب.

اضافة موارد السلاسل المحرفية String Resources:

عندما ترغب بإضافة حقل نصي ضمن واجهة المستخدم, فإنه يتوجب عليك تحديد كل سلسلة محرفية كمورد. تمكنك موارد السلاسل المحرفية من التحكم بكافة نصوص واجهة المستخدم UI في مكان واحد, وبذلك تجعل الموضوع سهلا جدا لايجاد وتعديل أحد هذه النصوص. تمكن وتسهل عملية وضع هذه النصوص والسلاسل المحرفية خارجا من ترجمة التطبيق للغات مختلفة عبر توفير تعريفات بديلة لكل مورد لسلسلة محرفية  string resource.

بشكل افتراضي, يتضمن مشروع اندرويد على ملف خاص بموارد السلاسل المحرفية متواجد في المسار التالي : res/values/strings.xml.   اضف سلسلة محرفية جديدة باسم “edit_message” واسند لها القيمة التالية : “Enter a message.” ( بإمكانك الآن حذف السلسلة المحرفية “hello_world”).

وبما أننا لانزال ضمن هذا الملف , سنقوم بإضافة السلسلة المحرفية “Send” الخاصة بالزر الذي سوف نضيفه بعد قليل, ويدعى ب "button_send".

بعد هذه الإضافات والتعديلات سيبدو ملف strings.xml الناتج كما يلي :

 UI string xml

لمزيد من المعلومات حول موارد السلاسل المحرفية string resources بهدف ترجمة مشروعك للغات مختلفة بإمكانك الاطلاع على الصف Supporting Different Devices.

اضافة الزر button:

سنقوم الآن بإضافة زر <Button>  إلى التنسيق, سنضعه مباشرة بعد عنصر <EditText>.

     UI Add button

تم وضع اسناد قيمة خاصتي الطول والعرض إلى القيمة "wrap_content" وبالتالي فإن حجم الزر سيكون كبيرا بحسب الحاجة ليتناسب مع نص هذا الزر (أي العنوان المكتبوب عليه). لا يحتاج الزر إلى خاصية android:id, لانه لن تتم الاشارة إليه من الكود الموجود ضمن الفعالية activity.

جعل صندوق الادخال النصي يملأ بعرضه عرض الشاشة:

لحد الآن تم تصميم كل من الحقل النصي EditText  والزرButton   ليكون عرض كل منهما متناسبا مع النص الذي يحويه او يحمله. كما هو موضح في الشكل ادناه ( وذلك عبر اسناد خاصية العرض للقيمة "wrap_content").

narrow width

إن هذه الوضعية مناسبة للزر button,ولكن الوضع غير مناسب جدا للحقل النصي, لأن المستخدم قد يدخل نصا اطول من المجال المتاح. لذلك فإنه سيكون من الأفضل لو جعلنا الحقل النصي يستثمر المساحة الغير مستخدمة من عرض الشاشة. بإمكاننا القيام بذلك من خلال LinearLayout وذلك تعديل خاصية الوزن weightالخاصة به, والتي من الممكن تعديلها عبر الخاصية android:layout_weight.

إن قيمة الوزن weight value  عبارة عن رقم يحدد مقدار المساحة المتبقية التي يجب ان يستهلكها كل view , وذلك نسبة إلى المساحات المستهلكة من قبل بقية ال view  المجاورة.
على سبيل المثال, إذا قمنا بإعطاء أحد ال view  وزن weight يساوي 2 , واعطينا ل view  اخر وزن weight  يساوي 1 , فإن المجموع يساوي 3, وبذلك فإن اول view  سوف يملأ مساحة مساوية ل 2/3 من الفراغ المتبقي , أما ال view الثاني فسوف يحتل المساحة المتبقية. في حال أضفنا view  ثالث وأعطيناه الوزن weight مساوي 1, عندها فإن ال view  الأول (ذو الوزن 2) سوف يحصل على 1/2  المساحة المتبقية, بينما سوف يحصل كل من ال view  المتبقية على ما يعادل الربع 1/4.

أرجو بعد هذا الشرح أن تكون قد أصبحت آلية عمل خاصية weight واضحة.

قيمة الوزن الافتراضية لكل ال view مساوية لصفر, لذلك في حال قمت بتحديد  قيمة الوزن weight  بقيمة اكبر من الصفر ل view  واحد, عندها فإن ذاك ال view سوف يشغل كل المساحة المتبقية بعد ان يتم اعطاء كل ال views الأخرى المساحة التي تحتاجها.

إذن , حتى لجعل عنصر EditText يشغل كل المساحة المتبقية ضمن التنسيق, يجب علينا عندها ان نعطي هذا العنصر قيمة وزن weight يساوي 1, ونترك عنصر الكبسة button بدون اي وزن.

 UI edit text weight

 يتوجب علينا تعديل خاصية العرض width الخاصة ب EditText  وتحويل قيمتها إلى الصفر(0dp), وذلك لكي نزيد من فعالية وكفاءة التنسيق بعد القيام بتحديد خاصية  الوزن.

إن اسناد القيمة صفر إلى خاصية width تحسن من اداء التنسيق لأن استخدام "wrap_content" كقيمة للعرض يتطلب من النظام ان يقوم بحساب العرض , وهذا الحساب بدوره ليس بذو قيمة او فائدة, لأن قيمة الوزن weight تطلب حساب اخر للعرض ليملأ الفراغ المتبقي.

 UI EditText weght

يبين الشكل 3 النتيجة بعد قيمة الوزن إلى العنصرEditText.

wide width

الشكل 3 : يبين الشكل العنصر EditText بعد اعطاءه كل وزن التنسيق, لذلك فإنه يملأ المساحة المتبقية ضمن LinearLayout.

وبذلك , وبعد التعديلات السابقة , فإن ملف XML يجب ان يظهر بالشكل التالي :

 userInterface complagte xml

يتم تطبيق هذا التنسيق بشكل افتراضي على صف Activity الذي تقوم ادواتSDK بتوليده عند انشاء المشروع.

إذن اصبح بإمكاننا الآن تشغيل التطبيق لرؤية النتائج:

  • ضمن eclipse , انقر على run من شريط الأدوات.
  • أو من سطر الأوامر, غير المسار إلى المسار الجذر لتطبيق اندرويد الخاص بك ونفذ مايلي
ant debug
adb install bin/MyFirstApp-debug.apk

وبهذا القدر ننهي حلقتنا اليوم , تابعونا في الدرس القادم لنتعلم المزيد حول آلية الاستجابة لنقر الكبسة button , وكيف تتم قراءة محتويات الحقل النصي, والانتقال إلى فعالية activity أخرى , بالاضافة إلى المزيد من الأمور الجديدة.

وإلى ذلك الحين استودعكم الله والسلام عليكم ورحمة الله وبركاته

تحوي سلسلة اندرويد المواضيع التالية :

  1. التعريف باندرويد What is Android
  2. مكونات واجهة المستخدم الاساسية في اندرويد Basic Andorid User Interface Components
  3. خطوات تثبيت اندرويد Android Install Steps
  4. بناء مشروع اندرويد
  5. تشغيل تطبيقك على اندرويد Running Your Application  
  6. بناء واجهة مستخدم بسيطة UI 
  7. تشغيل فعالية أخرى Starting another Activity

, , , , , , , , , , , , , , , ,

  1. أضف تعليق

اترك رد

Please log in using one of these methods to post your comment:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s

%d مدونون معجبون بهذه: