شرح RelativeLayout

الموضوع: RelativeLayout.

المحاور: التعرف على RelativeLayout وأهميتها وإيضاح بعض المفاهيم المتعلقة بها، وشرح أهم خصائصها.

RelativeLayout

حاوية لمجموعة من الأدوات كأختها Linearlayout ولكن تختلف عنها في انها لا تنظم العناصر التي بداخلها بشكل معيّن بل تعتبر كالإناء كل ما وضع داخلها يلتصق فوق الذي قبله كما على الطبيعة، لنفهم ذلك دعنا نجري هذه التجربة البسيطة.

التجربة :

قم بعمل layout من نوع Relativelayout وأنشئ بداخلها حقلين (EditText) بخلفيات مختلفة الاولى بيضاء والثانية بلون آخر.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:minWidth="25px"
  android:minHeight="25px"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:id="@+id/relativeLayout1">
  <EditText
    android:id="@+id/nameTwo"
    android:layout_width="180dp"
    android:layout_height="60dp"
    android:background="#F8F8F8"
    android:textColor="#000"
    android:textColorHint="#333"
    android:text="Name One"
    android:paddingLeft="15dp"
    android:layout_marginLeft="10dp" />
  <EditText
    android:id="@+id/nameOne"
    android:layout_width="180dp"
    android:layout_height="60dp"
    android:background="#990066"
    android:textColor="#FFF"
    android:textColorHint="#333"
    android:text="Name Two"
    android:paddingLeft="15dp"
    android:layout_marginLeft="10dp" />
</RelativeLayout>

لاحظ إن الحقلين لهما نفس الطول والعرض ولكن ألوانهما مختلفة لنرى النتيجة.

نلاحظ ان الحقل الأول المسمى ب Name One إختفى وظهر فقط الحقل الثاني المسمى ب Name Two.

الحقيقة إنه لم يختفي ولكن الحقل الثاني اصبح فوقه تماماً، وبما ان لهما نفس الأبعاد فأصبح بالسفل ولم يظهر.
* دعنا نجرب مرة آخرى بعد زيادة أبعاد (الطول و العرض) الحقل الأول، هل سيظهر !!.

<EditText
  android:id="@+id/nameOne"
  android:layout_width="200dp"
  android:layout_height="100dp"
  android:background="#F8F8F8"
  android:textColor="#000"
  android:textColorHint="#333"
  android:text="Name One"
  android:paddingLeft="15dp"
  android:layout_marginLeft="10dp" />

نعم لقد ظهر الحقل الأول (الأبيض) ومن الملاحظ انه ما ذال خلف الحقل الثاني، القصد من هذه التجربة إيضاح طريقة عمل RealtiveLayout وكيفية إعتمادها على النظام المطلق او الطبيعي للأدوات التي بداخلها.

قد يتبادر في ذهنك هذا السؤال، ما الفائدة من إستخدام RelativeLayout إذاً ؟

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

(القيم التي تقبلها جميع هذه الخواص هي عبارة عن id لأدوات آخرى ضمن نفس ال Layout)

أشهر هذه الخصائص وأكثرها إستخداماً هي:

  • layout_above        (اعلى العنصر المحدد).
  • layout_below        (اسفل العنصر المحدد).
  • layout_toRightOf   (يمين العنصر المحدد).
  • layout_toLeftOf     (يسار العنصر المحدد).

دعنا نجرب خاصية layout_toRightOf على التجربة اعلاه، ولنوجه الحقل الثاني ليكون بيمين الحقل الأول بدلاً من فوقه.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:minWidth="25px"
  android:minHeight="25px"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:id="@+id/relativeLayout1">
  <EditText
    android:id="@+id/nameOne"
    android:layout_width="180dp"
    android:layout_height="60dp"
    android:background="#F8F8F8"
    android:textColor="#000"
    android:textColorHint="#333"
    android:text="Name One"
    android:paddingLeft="15dp"
    android:layout_marginLeft="10dp" />
  <EditText
    android:id="@+id/nameTwo"
    android:layout_width="180dp"
    android:layout_height="60dp"
    android:background="#990066"
    android:textColor="#FFF"
    android:textColorHint="#333"
    android:text="Name Two"
    android:paddingLeft="15dp"
    android:layout_marginLeft="10dp"
    android:layout_toRightOf="@id/nameOne" />
</RelativeLayout>

النتيجة أصبحت أفضل الآن، أليس كذلك !؟

دعنا نزيد بعض الحقول والأزرار ليترسخ الفهم بصورة أكبر، تابع المثال الختامي التالي وانظر كيف تم توزيع وتنظيم الحقول:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:minWidth="25px"
  android:minHeight="25px"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:id="@+id/relativeLayout1">
  <EditText
    android:id="@+id/nameOne"
    android:layout_width="180dp"
    android:layout_height="60dp"
    android:background="#F8F8F8"
    android:textColor="#000"
    android:textColorHint="#333"
    android:text="Name One"
    android:paddingLeft="15dp"
    android:layout_marginLeft="10dp" />
  <EditText
    android:id="@+id/nameTwo"
    android:layout_width="180dp"
    android:layout_height="60dp"
    android:background="#990066"
    android:textColor="#FFF"
    android:textColorHint="#333"
    android:text="Name Two"
    android:paddingLeft="15dp"
    android:layout_marginLeft="10dp"
    android:layout_toRightOf="@id/nameOne" />
  <EditText
    android:id="@+id/email"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="#F8F8F8"
    android:textColor="#000"
    android:textColorHint="#333"
    android:text="Email Address"
    android:paddingLeft="15dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="10dp"
    android:layout_below="@id/nameOne" />
  <Button
    android:id="@+id/join"
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:text="Join"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="15dp"
    android:layout_below="@id/email" />
</RelativeLayout>

إنضم لمجتمع زامرن العرب وشاركنا برأيك

نهاية الدرس 🙂 لا تنسونا من صالح الدعاء

5 تعليق

  1. أنيس 4 فبراير، 2017 / 12:42 م

    بارك الله فيكم

    شرح موفق .. انا من اشد المتابعين .. واصل

    View Comment
    • Alkhatib Hamad 4 فبراير، 2017 / 4:28 م

      شكرا أخي
      ترقبوا المزيد إن شاء الله

      View Comment
    • Alkhatib Hamad 4 فبراير، 2017 / 4:30 م

      وجزاك أخي، نورت أخي الكريم

      View Comment

اترك تعليقاً

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