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

المخططات أنواع كثيره وهذه بعض منها 

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

وسنشرح  اليوم  Linear Layout  بالتفصيل .

 ماهو LinerLayout ؟

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

1-خط افقي أي يقوم برتيب العناصر كل واحد بجانب الاخر في خط افقي.
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 بداخله ويقوم بعرضها بطريقة خطية كمافي الكود ادناه:-

        <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  كمافي الكود ادناه:-

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

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

بالتفصيل شرح  أنواع Linear Layout 

المخطط الخطي (LinearLayout) هو تخطيط بسيط يستخدم لتصميم واجهات التطبيقات , ويتم عرض جميع العناصر التابعة بطريقة خطية وفقا لاتجاه ,وتكون قيمة هذا الاتجاه إما أفقي او رأسي

أنواع المخطط الخطي

1. رأسي Vertical
2. أفقيHorizontal

من الاسم يتم تحديد مواضع العناصر التابعة من خلال اتجاهين فقط افقي ورأسي كما سنرأ الان

الوضع الرأسي Vertical

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

الوضع الرأسي Vertical

الوضع الافقي Horizontal

في هذا النوع يتم ترتيب العناصر في شكل خط افقي واحد تلو الاخر , وفي المثال التالي تم تحديد الاتجاهHorizontal بحيث يتم العرض افقيا

ملحووظة

يمكن دمج ViewGroups جميعهم في مخطط واحد , اي يمكن إن يحتوي LinearLayout علي مخطط نسبي Relative Layout او مخطط إطارFrame Layout او يحتوي علي عدة مخططات خطية داخلة

الخصائص  الرئيسية في المخطط Linear Layout

في هذا الجزء سنتعرف الي أهم الخصائص او السمات التي توجد في المخطط الخطي وتساعد علي تكوين الواجهات ,وايضا عناصر التحكم الفرعية الخاصة به .
orientation
السمة الاتجاهية المستخدمة في لتموضع العناصر التابعة في أفقيا ورأسيا ,والاتجاه الافتراضي هو رأسي vertical

gravity هي الخاصية المسؤولة عن محاذاة العناصر داخل التخطيط مثل المحاذاة لليمين او اليسار او الاعلي والوسط ...الخ
في المثال التالي تم تحديد وضعية المخطط الخطي علي المحاذاة لليمين وبالتالي كل العناصر التابعة ستكون لها نفس الاتجاه

layout_weight
تحدد هذه الخاصية نسبة كل عنصر من المساحة المتوفرة من الواجهة الجزر بنسب متفاوتة حسب القيمة المطلوبة لكل عنصر
في المثال التالي يأخذ الزر الاول من الوزن قيمة 1 والزر الاخر يأخذ من الوزن 2

weightSum
 تحدد هذه الخاصية مجموع الاوزان الكلي الذي يقسم علي العناصر التابعه للمخطط الجزر في المثال السابق يمكن تحديد مجموع الاوزان ليكون 3

ملحوووظة مهمة

خاصية الوزن توجب إعطاء العرض حجم 0dp إذا كانت الواجهة الجزر في الاتجاه الافقي

android:layout_width="0dp"

 وإعطاء حجم 0dp للطول إذا كان الواجهة الجزر في الوضع الرأسي

android:layout_height="0dp"

 

تعديل المقال