الحاويات Layout

Layout هي عبارة عن مجموعة من الحاويات , تختلف كل واحدة منها عن الأخرى بخصائها في كيفية ترتيب و تقديم المحتوى في واجهة المستخدم, و هناك طريقتان لتعريف هذه الحاويات و إنشائها:

  1. بواسطة كتابتها بلغة XML و هي تكون على شكل موارد سبق ذكرها هنا.
  2. بكتابتها في الزمن الحقيقي لتنفيذ البرنامج, أي برمجتها بواسطة لغة البرمجة.

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

  1. FrameLayout
  2. LinearLayout
  3. RelativeLayout
  4. TableLayout

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

  • id: المعرٌف و لديه كلمة محجوزة في بيئة أندرويد هكذا id+@ و يستعمل بجوار كلمة id الرمز + بغرض التذكير بأنه عنصر جديد, أما لو كان بدون رمز + فهذا يدل على أن العنصر أصلا موجود و سبق تعريفه, فقط يتم استعماله من طرف اخر, سيتبن هذا الأمر جيدا حين التطرق لحاوية RelativeLayout.
  • layout_width و layout_height: الأبعاد, خاصيتان مهمتان هما بالتوالي تستعملان بهدف التعريف بالعرض و الإرتفاع, لهما قيمتان محددتان مسبقا من طرف نظام أندرويد هي: match_parent إشغار نفس مساحة العنصر الأب, “wrap_content إشغار نفس المساحة التي يشغرها محتوى العنصر نفسه, طبعا الأمر متاح  لمن أراد تعريف الأبعاد بواسطة قيم محددة.
  • text: هي القيمة النصية التي سيراها مستخدم برنامجك و يقرئها, و يتم تعريفها في ملف الموارد الذي يحمل اسم strings.xml في مجلد values بهذا الشكل
    <string name="button1">Button 1</string>

FrameLayout: و هي أبسط هذه الحاويات إذ أنها لا تملك أية خصائص بشأن تنظيم المحتوى و ترتيبه, فكل ما ستضعه فيها سيكون بعضه فوق بعض.


<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<TextView
android:id="@+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/frame_layout" />

<Button
android:id="@+id/btnOk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/ok" />

</FrameLayout>

frame layoutLinearLayout: هذا النوع من الحاويات يستعمل بكثرة, و هو ينقسم إلى قسمين بسبب اختلاف اتجاه شكل تقديم المحتوى, فيكون إما عموديا أو أفقيا, فكما هو موضح بالإسم فالحاويات الأفقية تقدم المحتوى في شكل أفقي يكون كل عنصر بجانب الأخر في تراص:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="3" >

<TextView
android:id="@+id/txtTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/frame_layout" />

<EditText
android:id="@+id/edtName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="text" />

<Button
android:id="@+id/btnOk"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/ok" />

</LinearLayout>

horizontal linear layoutأما العمودية فنفس الشيء و لكن الترتيب يكون عموديا عنصر تحت الأخر:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="3" >

<Button
android:id="@+id/btn1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="@string/button1" />

<Button
android:id="@+id/btn2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="@string/button2" />

<Button
android:id="@+id/btn3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="@string/button3" />

</LinearLayout>

vertical linear layoutتحدي الإتجاهات إما عموديا أو أفقيا تحدده الخاصية orientation كما هو في المثالين السابقين فهي تأخذ قيمتين horizontal أو vertical, خاصية أخرى تم استعمالها في المثالين هي خاصية weightSum و هي تأخذ أرقام صحيحة لأجل تقسيم مساحة الحاوية بنفس اللعدد المحدد, مثلما في المثال قسمنا المساحة إلى ثلاثة أقسام, و لكي يستفيد العناصر الأبناء من هذ الخاصية يتم منح قيمة صفر لبُعد العنصر ثم تعطى القسمة المحددة للخاصية layout_weight.

RelativeLayout: و تعتبر الحاوية الأكثر مرونة على الإطلاق, فيمكنك أن تضع أي عنصر في أي مكان كان من الشاشة بكل حرية, فالمبدأ أن كل موضع عنصر نسبي بالنسبة للحاوية الأم و أيضا نسبي لعنصر آخر, بمعنى موضع هذا يعتمد على موضع ذاك, و عليه نذكر الخاصيات التي تضبط التموضع بالنسبة للحاوية الأم:

  1. layout_alignParentTop تستعمل بغرض محاذاة العنصر أعلى الحاوية, و لا عنصر يكون قبله.
  2. layout_alignParentEnd تستعمل بغرض محاذاة العنصر يمين الحاوية, و لا عنصر يكون قبله.
  3. layout_alignParentBottom تستعمل بغرض محاذاة العنصر أسفل الحاوية, و لا عنصر يكون بعده.
  4. layout_alignParentStart تستعمل بغرض محاذاة العنصر أسفل الحاوية, و لا عنصر يكون بعده.

و هذه الخواص تأخذ قيمة منطقية إما صح أو خطأ, أما الخصائص التي تتحكم في مكان تموضع عنصر بالنسبة للأخر, و تأخذ قيمة معرف العنصر المراد التموضع بالنسبة له,  فهي كالتالي:

  1. layout_above تستعمل بغرض محاذاة العنصر فوق الأخر.
  2. layout_toRightOf تستعمل بغرض محاذاة العنصر بيمين الأخر.
  3. layout_below تستعمل بغرض محاذاة العنصر أسفل الأخر.
  4. layout_toLeftOf تستعمل بغرض محاذاة العنصر بيسار الأخر.

طبعا هذه ليست كل الخصائص المتوفرة, فهناك أيضا خصائص أخرى بإمكانك الأطلاع عليها من هــــــــنا.


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:text="@string/button1" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button1"
android:layout_toRightOf="@id/button1"
android:text="@string/button2" />

<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button2"
android:layout_toRightOf="@id/button2"
android:text="@string/button3" />

<Button
android:id="@+id/button4"

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:text="@string/button4" />

</RelativeLayout>

relative layoutقبل أن أنسى مع الRelative Layout أحب أن اذكرك أنه قد استخدمنا المعرف بدون رمز + بغرض استعمال عنصر سبق تعريفه.

TableLayout: حيث تستطيع وضع كل العناصر مرتبة على شكل أعمدة و صفوف كما هو حال بنية الجداول في HTML, الصفوف يتم تمثيلها بالوسم TableRow أما الأعمدة فعددها هو عدد العناصر الموجودة في الصف TableRow, و لأجل تخصيص هذا الجدول هناك عدة خصائص لفعل ذلك, نذكر منها stretchColumns بهدف تمديد الأعمدة, و shrinkColumns بهدف تقليصها, أما layout_span فتستعمل لدمج أعمدة, و الخاصية layout_column تحدد في أي عمود نود أن يكون العنصر.


<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1" >

<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<TextView
android:id="@+id/txtColumn1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="0"
android:text="@string/column1" />
</TableRow>

<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<TextView
android:id="@+id/txtColumn2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:gravity="center"
android:text="@string/column2" />
</TableRow>

<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<TextView
android:id="@+id/txtColumn3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="2"
android:text="@string/column3" />
</TableRow>

<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<Button
android:id="@+id/btnColumn1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/button1" />

<Button
android:id="@+id/btnColumn2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/button2" />

<Button
android:id="@+id/btnColumn3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/button3" />
</TableRow>

<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<EditText
android:id="@+id/edtTable1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_span="2"
android:gravity="center"
android:inputType="text"
android:text="@string/cols1" />
</TableRow>

<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<EditText
android:id="@+id/edtTable2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_span="2"
android:gravity="center"
android:inputType="text"
android:text="@string/cols2" />
</TableRow>

</TableLayout>

table layout

تعليقان على “الحاويات Layout

  1. محمد عبدالرحمن الشرعبي

    شكرا جزيلا على هذا الموضوع الاكثر من رائع ونتمناء ان تكون كل المواضيع التي تكتب بالعربية واضحة مثل هذا الموضوع الرائع صراحة

    رد
  2. عبد الرحمن عبد الله

    السلام عليكم
    شكرا على مجهودك الرائع
    جزاك الله خيرا وزادك علما

    رد

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Time limit is exhausted. Please reload CAPTCHA.