القائمة الرئيسية

الصفحات

تعديل المشاركة

الدرس 21-شرح ماهو Relative Layout في تصميم واجهات تطبيقات الاندرويد بالتفصيل - الجزء الأول.

شرح ماهو Relative Layout بالتفصيل.


السلام عليكم ورحمة الله وبركاته
ذكرنا في الدرس السابق  حول شرح linear layout  وسنشرح في هذا الدرس مايلي:-


1- ماهو Relative Layout؟
2-كيفية استخدام Relative Layout.

1-ماهو relative layout؟

Relative layout هو عبارة عن view group  يسمح لك بترتيب العناصر بداخله بشكل علائقي  اي بمعني يسمح لك بترتيب العناصر اعتماد على العناصر التي بجانبه.
 
  :-ويتم ترتيب العناصر بطريقتين
1-  ترتيب العناصر بشكل علائقي مع Relative layout نفسه.
2- ترتيب العناصر بشكل علائقي فيما بينها وسيتم شرحا بدرس منفصل.

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

1.1-  ترتيب العناصر بشكل علائقي مع Relative layout نفسه.
وفي هذه الطريقة يتم ترتيب العناصر اعتماد على Relative layout  الذي يحتويها وهو مايسمى ب parent كمثال:-

 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffbb00"
    tools:context=".MainActivity" >

    <Button
        android:id="@id/button1" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#11aa33"
        android:text="Button"
        android:textSize="22sp" />
    
  
</RelativeLayout>
من الكود اعلاه تم وضعButton بداخل Relative layout
اي يعتبر relative layout هو ال parent  بالنسبه لل Button وسنقوم الان بشرح اهم  الخصائص في هذه الطريقة:-
سنقوم الان بشرح أهم الخصائص وسيتم تطبيق هذه الخصائص على الزر.

1- وضع ال view  في وسط Relative layout  ويتم ذلك بثلاثة  خصائص مع بعض

1
2
3
        android:layout_centerInParent="true"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"

حيث سيتم وضع ال Button في وسط الRelative layout كما في الصورة ادناه

2-محاذاة الview بمحاذاة ال parent الخاص به.
وفي هذه الخاصية محاذاة العنصر بداخل Relative layout
ويتم ذلك بعدة خصائص وهي كمايلي:-

1
      android:layout_alignParentLeft="true"
'
بهذه الخاصية نجعل الجانب الايسر من ال Button  بمحاذاة الجانب الأيسر من Relative layout. كما في الصورة ادناه:-



1
      android:layout_alignParentTop="true"

ويتم في هذه خاصية محاذاة الجانب الأعلى من Button  بالجانب الأعلى من Relative layout.
كما في الصورة ادناه:

1
      android:layout_alignParentRight="true"

محاذاة الجانب الأيمن ل Button   مع الجانب الأيمن من ال parent  وهو Relative layout  كما في الصورة ادناه:-


1
      android:layout_alignParentBottom="true"

محاذاة الجانب الاسفل للزر Button  مع الجانب الأسفل من ال parent  وهو Relative layout  كما في الصورة ادناه:-

بعد ان قمنا بشرح الخصائص اعلاه سنقوم الان لو قمنا بوضع اكثر من خاصية مع بعض :
سنقوم الان بشرح فيما إذا تم دمج أكثر من خاصيتين مع بعض وسنشرح ذلك بالامثلة ادناه:-
مثــــــــــــــــــــال 1

1
2
android:layout_alignParentTop="true"  
android:layout_alignParentBottom="true"

عند تطبيق هذه الخاصيتين على الزر فانه سيتم محاذاة الجانب الأعلى للزرButton مع الجانب الأعلى من Relative layout  
وسيتم أيضا محاذاة الجانب الاسفل للزر Buttonمع الجانب الاسفل للrelative Layout
كما في الصورة ادناه:-

مثــــــــــــــــــــــــــــــال2-

 
1
2
android:layout_alignParentRight="true"  
android:layout_alignParentLeft="true"

عند تطبيق هذه الخاصيتين على الزر فانه سيتم محاذاة الجانب الايمن للزرButton مع الجانب الايمن من Relative layout  
وسيتم أيضا محاذاة الجانب الايسر للزرButton مع الجانب الايسر للrelative Layout
كما في الصورة ادناه:-

مثــــــــــــــــــــال3-

1
2
3
android:layout_alignParentRight="true"  
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"

عند تطبيق هذه الثلاث الخواص على الزرButton فانه سيتم محاذاة الجانب الايمن للزر مع الجانب الايمن من Relative layout  
هووسيتم أيضا محاذاة الجانب الايسر للزرButton مع الجانب الايسر للrelative Layout
وسيتم محاذاة الجانب السفلي للزر Button مع الجانب السفلي لل Relative layout 
كما في الصورة ادناه:-


مثــــــــــــــــــــــــال4-
ماذا لوتم وضع جميع الخصائص الاربع للزرButton

1
2
3
4
android:layout_alignParentTop="true" 
android:layout_alignParentRight="true"  
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
سيتم محاذاة جميع الجوانب للزر مع جميع الجوانب لل Relative layout كما في الصورة ادناه:-

وهكذا نلاحظ أنه تمت محاذاة جميع جوانب الزر مع Relative Layout  الذي يحتويه.


وهنا نكون وصلنا إلى نهاية الدرس رأيكم يهمني بالتعليقات.

أخر المواضيع من قسم : برمجة تطبيقات الاندرويد