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

الصفحات

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

الدرس20-ماهو Linear Layout وكيفية استخدامه في تصميم واجهات تطبيقات الاندرويد

ذكرنا في الدروس السابقة عن layout manger   ويتم استخدامها  لترتيب العناصر views  على الشاشة ويوجد منها أنواع كثيرة  وهي :-

1- Linerlayout
2- Relative layout
3- Grid layout
4- Tabel layout


وسنشرح في هذا الدرس Linear Layout  بالتفصيل. وسنتعلم في هذا الدرس مايلي:

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

1-ماهو LinerLayout؟

LinerLayout عو عبارة عن viewgroup  يستخدم لترتيب العناصر views  على شكل خط واحد.
ويأتي LinearLayout  بترتيب العناصر بطريقتين :-

1-خط افقي أي يقوم برتيب العناصر كل واحد بجانب الاخر في خط افقي.
2-خط عمودي أي يقوم برتيب العناصر كل واحد تحت الاخر في خط عمودي.


2-كيفية استخدام LinerLayout ؟


للقيام باستخدام LinearLayout  في تصميم التطبيث اخاص نقوم بالاتي:-

1.2:-نذهب على ملف التصميم ونجعل LinearLayout  الوسم الجذر في الملف كمافي الكود ادناه:-


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

  <!-- here we put views -->   
</LinearLayout>

2.2-نقوم بتحديد الطول والعرض لـ LinearLayout  :-
نقوم بتحديد طول وعرض الـ Lineralyout وذلك باستخدام الخصائص التالية:-
"android:layout_height="match_parent-
لتحديد طول واسناده القيمة match_parent أي جعله يأخذ كل المساحة الطولية الممكنة.

"android:layout_width="match_parent

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

<LinearLayout 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">

  <!-- here we put views -->   
</LinearLayout>

 3.2-الان أصبح ال LinearLayout  جاهزا ونقوم الان بإضافة العناصر Views بداخله ويقوم بعرضها بطريقة خطية كمافي الكود ادناه:-


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<LinearLayout 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"
 
   >

     <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="HelloWorld"
        
        />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="HelloWorld"
        
        />
</LinearLayout>

ليظهر التصميم كمافي الصورة ادناه:-

linear Layout Horizontal
 نلاحظ من الصورة إنه تم ترتيب العناصر في خط واحد افقي .اي أن الزر بجانب عارض النص .
ذكرنا سابقا في الدرس ان    يقوم بترتيب العناصر Views  بشكل خطي افقي أو عمودي .. والان عندما نريد نرتيب العناصر بشكل عمودي نقوم باستخدام الخاصية :-
 "android:oriention="virtical
 ويتم وضع هذا الخاصية في التخطيط الخطي وذلك جعل يقوم برتيب العنلصر التي بداخله بشكل عمودي .

والان نقوم بتحديد هذه الخاصية للـ LinerLayout  كمافي الكود ادناه:-


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<LinearLayout 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:oriention="virtical">

     <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="HelloWorld"
        
        />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="HelloWorld"
        
        />
</LinearLayout>


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

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