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

الصفحات

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

الدرس 22-تعلم كيفية محاذاة العناصر في Relative layout

السلام عليكم  بعد أن درسنا في الدرسين الماضيين عن اساسيات Relative Layout وأهم الخصائص فيه  وسنشرح في هذا الدرس خصائص المحاذاة في Relative Layout وهي خصائص المحاذاة في Relative Layout.

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

يوفر لك relative Layout  بعض الخصائص لمحاذاة العناصر فيما بينها وهي كما يلي:-

1
2
3
android:layout_alignLeft="id of view"
android:layout_alignTop="id of view"
android:layout_alignBaseLine="id of view"

. وسنشرح هذه الخصائص بالتفصيل وسنقوم بتطبيق هذه الخصائص على زر و عارض نص textview  كمافي الكود ادناه:-


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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:layout_centerVertical="true"
       android:layout_centerInParent="true"
       
        android:textSize="22sp" />
    
    <TextView
       
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="22sp"
        android:background="#ffccaa"
        android:layout_alignTop="@id/button1"
        android:layout_alignBaseline="@id/button1"
        android:id="@+id/txt"
        android:text="@string/hello_world" />
    
  
    

</RelativeLayout>

وسنبدأ الان بشرح الخصائص:-

1-android:layout_alignLeft="id of view"



ويتم في هذه الخاصية محاذاة الجانب الايسر  للزر مع الجانب الايسر لل textview حيث يتم تمرير الـ id  للعنصر الذي نريد محاذاته كما في الصورة ادناه:-



ويتم ذلك عبر الكود ادناه:-

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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:layout_centerVertical="true"
       android:layout_centerInParent="true"
        android:textSize="22sp" />
    
    <TextView
       
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="22sp"
        android:background="#ffccaa"
        android:layout_alignLeft="@id/button1"
        android:id="@+id/txt"
        android:text="@string/hello_world" />
    
  
    

</RelativeLayout>

حيث نلاحظ انه تم وضع  الزر تحت textview وذلك باستخدام الخاصية below ومن ثم تمت محاذاة الجانب الايسر للزر مع الجانب الايسر لل textview.

*ملاحظة:- توجد ايضا خاصية  android:layout_alignLeft وهي عكس الخاصية السابقة وتعمل محاذاة من الجانب الايمن.



"android:layout_alignTop="id of view
ويتم في هذه الخاصية محاذاة الجانب الاعلى  للزر مع الجانب الاعلى لل textview حيث يتم تمرير الـ id  للعنصر الذي نريد محاذاته كما في الصورة ادناه:-


ويتم ذلك عبر الكود ادناه

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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:layout_centerVertical="true"
       android:layout_centerInParent="true"
        android:textSize="22sp" />
    
    <TextView
       
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="22sp"
        android:background="#ffccaa"
        android:layout_alignTop="@id/button1"
        android:id="@+id/txt"
        android:text="@string/hello_world" />
    
  
    

</RelativeLayout>
حيث نلاحظ من الكود انه تم وضع  الزر بجانب  textview  من جهة اليمين وذلك باستخدام الخاصية torightof ومن ثم تمت محاذاة الجانب الاعلى للزر مع الجانب  لل textview باستخدام الخاصية AlignTop.



*ملاحظة:- توجد ايضا خاصية  android:layout_alignBottom وهي عكس الخاصية السابقة وتعمل محاذاة من الجانب الاسفل.

لكن نلاحظ ان التصميم غير منسق نوعا ما وذلك بسبب ان النصوص غير متناسقة في الزر button و textview  ولجعلها منسقة اكثر نقوم باستخدام الخاصية align_base line
كما في الكود ادناه:-

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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:layout_centerVertical="true"
       android:layout_centerInParent="true"
        android:textSize="22sp" />
    
    <TextView
       
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="22sp"
        android:background="#ffccaa"
        android:layout_alignTop="@id/button1"
        android:layout_alignBaseline="@id/button1"
        android:id="@+id/txt"
        android:text="@string/hello_world" />
    
  
    

</RelativeLayout>
ليكون التصميم كما في الصورة ادناه:-



نلاحظ من الصورة  ان النص في كل من textView  والزر على خط واحد وهو مايعطي شكل اجمل لتصميم واجهة تطبيقك.

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

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