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

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

سنتابع ضمن هذه الحلقة الشروح المتعلقة بتنسيقات اندرويد , وسنتناول ضمن هذه الحلقة التنسيق النسبي.ارجو لكم الفائدة

ضمن هذه الحلقة سوف نتعلم مايلي:

1. توضع ال views
2. مثال

التنسيق النسبي Relative Layout

التنسيق النسبي عبارة عن view group , يقوم بعرض ال views الابناء وذلك بحسب مواضعهم النسبية.

يمكن تحديد موضع كل view بشكل نسبي بالنسبة لل views الاقران له (مثلا على يسار view  اخر , او على يمين او فوق او تحت view مجاور) , أو بحسب موضعه نسبة للأب (الأب هو التنسيق الذي هو بدوره عبارة عن RelativaLayout) – اي على سبيل المثال ان تكون محاذاة العناصر اسفل (او يمين او يسار أو وسط) التنسيق الاب.

يعتبر التنسيق النسبي أداة فعالة جدا في تصميم واجهة المستخدم, وذلك لانها تساعدنا على الحفاظ على التنسيق الهرمي بشكل بسيط ومسطح ( دون اللجوء للتنسيقات المتداخلة), وهذا بدوره يحسن الأداء.

في حال وجدت نفسك تستخدم عدة تنسيقات متداخلة من نمط التنسيق الخطي LinearLayouts , عندها يفضل ان تقوم باستخدام تنسيق وحيد من نمط التنسيق النسبي RelativeLayout.

 توضيع ال views

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

بشكل افتراضي, تكون محاذاة كل الابناء ال views للشمال الغربي (ان جاز التعبير top-left) نسبة إلى التنسيق, وبالتالي يصبح بإمكانك تعديل مواضع ال views بحسب حاجتك.

هنالك عدد كبير من الخصائص الخاصية بالمحاذاة, وسنذكر فيما يلي عدد من الخصائص وشرحها:

android:layout_alignParentTop

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

android:layout_centerVertical

اذا امتلكت القيمة “true” , عندها فسوف يتوضع العنصر بشكل مركزي وعمودي ضمن الأب.

android:layout_below

توضع الحافة العليا لهذا ال view اسفل ال view المحدد عبر معرفهID .

android:layout_toRightOf

توضع الحافة اليسارية لهذا ال view يمين ال view المحدد عبر معرفهID .

كانت تلك بضعة امثلة بهدف الذكر لا الحصر , بالامكان الاطلاع على كافة الخائص ضمن الرابط التالي : RelativeLayout.LayoutParams.

إن قيم خصائص التنسيق السابقة تحمل احد قيمتين :

1. قيمة منطقية Boolean value
2. أو عبارة عن مرجع لمعرف view اخر الذي يتم تحديد الموضع بالنسبة له.

ملاحظة : ضمن ملفات تنسيق XML يمكن تعريف ارتباطات ومحاذاة العناصر بالنسبة لبعضهم البعض بدون ترتيب محدد. على سبيل المثال, بإمكاننا التصريح على ان “view1” يتوضع اسفل “view2” حتى وإن كان قد تم التصريح عن “view2” في اخر هرمية الملف.

المثال ادناه يوضح السيناريو السابق.

مثال:

تم كتابة الخصائص التي تتحكم بالموضع النسبي لكل view بلون احمر.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp" >
    <EditText
        android:id="@+id/name"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/reminder" />
    <Spinner
        android:id="@+id/dates"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/times" />
    <Spinner
        android:id="@id/times"
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentRight="true" />
    <Button
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/times"
        android:layout_alignParentRight="true"
        android:text="@string/done" />
</RelativeLayout>

 وبهذا القدر نكون قد انتهينا من شرح التنسيق النسبي , على امل اللقاء في الحلقة القادمة التي تتحدث عن ” List View”

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

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

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
8. بناء مشروع اندرويد – التحويل بين درجات الحرارة Android Temperature Converter
9. تنسيقات واجهة المستخدم ضمن اندرويد  UI Layouts
10. اندرويد : التنسيق الخطي LinearLayout
11. اندرويد : التنسيق النسبي RelativeLayout
12. …