انواع المخططات في اندرويد - android layouts

في هذا البوست سوف نتحدث حول المخططات  (layouts) .

يوجد  في نظام الاندرويد  ستة مخططات هما:

1. Linear Layout

2. Relative Layout

3. Table Layout

4. Grid View

5. Tab Layout

6. List View

 ويتم وضعها  بصيغة XML في ملف res/layout كما في الصورة .

الان لنبدأ في عرض كل مخطط بشئ من التفصيل

1. Linear Layout

معني (LinearLayout) باللغة العربية  التخطيط الخطي , وهي من اسمها تعني انه يتم عرض كافة العناصر التي بداخلها بطريقة خطية  , سواء كانت افقية Horizontally او  راسية  Vertically  ويتم تعيين هذا السلوك في اندرويد من خلال التوجية التالي  : android:orientation   .
مثال علي الــ  Vertical layout :

<LinearLayout android:orientation="vertical"> .... </LinearLayout>

ايضا مثال علي الــ  Horizontal layout :

<LinearLayout android:orientation="horizontal"> .... </LinearLayout>

<LinearLayout android:orientation="horizontal"> .... </LinearLayout>

الان عرفنا  ان للــ Linear Layout نوعين .

والان سنعرف كيف ننشئها .

1. ننشئ مشروع جديد  File => New => NewProject .

2. نريد ان ننشئ ملف xml جديد  سنعطية اسم  "  linear_layout.xml "  سوف ننشئ هذا الملف في المسار res/layout.

 كليك يمين علي res/ layout -> New -> Layout resource file .

3. الان افتح الملف الذي انشأناه وضع فيه الكود التالي .

<?xml version="1.0" encoding="utf-8"?>
<!-- هذا الـ LinearLayout من النوع الرأسي (Vertical) -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dip"
        android:text="Email:" />
    <EditText
        android:inputType="textEmailAddress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dip" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Login"
        android:background="#4333"/>
    <!-- هذا الـ LinearLayout من النوع الافقي (Horizontal) -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dip"
        android:background="#d9d"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="15dip"
            android:text="Home" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="15dip"
            android:text="About" />
    </LinearLayout>
</LinearLayout>

4. لكي يعمل هذ التطبيق  نريد ان نعدل شئ صغير في ملف الـ MainActivity.java  سنفهم فيما بعد السر وراء هذا التعديل .

التعديل كالتالي : نذهب الي ملف MainActivity.java  وفي دالة الـ OnCreat  سنقوم بتغيير R.layout.activity_main الي R.layout.linear_layout

package mesalm.layout;

        import android.support.v7.app.AppCompatActivity;
        import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.table_layout);
    }
}

5. لتشغيل التطبيق اضغط علي " Run " (      ) يجب ان تري النافذة التالية علي شاشة  المحاكي .

2. Relative Layout

او بالعربية تدعي التخطيط النسبي بمعني ان كل عنصر يرتب نفسه  بالنسبة الي العناصر الاخرى .

ففي الرسمة التي بالاسفل يتم وضع زر " Cancel " نسبياً الي اليمين من زر  " login " , وايضا ً هذا الزر تم وضعة نسبياً الي ما فوقه وهكذا .

في البداية نريد ان نذكر بعض الخصائص التي نستخدمها مع RelativeLayout والتي تساعدنا في ترتيب العناصر وربطها ببعضها البعض .
android:id

وهو مُعرّف يتم اعطاءه للعنصر , ويتم استخدام العنصر في المكان المطلوب عن طريق استخدام هذا المعرف .
android:layout_above
 تستعمل بغرض محاذاة العنصر فوق الأخر.
android:layout_below
تستعمل بغرض محاذاة العنصر أسفل الأخر.
android:layout_toRightOf

 تستعمل بغرض محاذاة العنصر بيمين الأخر.

android:layout_toLeftOf

 تستعمل بغرض محاذاة العنصر بيسار الأخر.

android:layout_alignParentTop 

تستعمل بغرض محاذاة العنصر أعلى الـlayout, و لا عنصر يكون قبله.
android:layout_alignParentEnd

 تستعمل بغرض محاذاة العنصر يمين الـlayuot, و لا عنصر يكون قبله.
android:layout_alignParentBottom

 تستعمل بغرض محاذاة العنصر أسفل الـlayout, و لا عنصر يكون بعده.
android:layout_alignParentStart

 تستعمل بغرض محاذاة العنصر أسفل الـlayout, و لا عنصر يكون بعده.

ملاحظة : هناك خصائص مهمة جداً لابد من معرفتها 
ويمكنك الرجوع الي موقع مطوري اندرويد لمعرفة المزيد حول باقي خصائص الـ RelativeLayout .

والان سنبدأ في إنشاء RelativeLayout .
1. انشاء مشروع جديد . File=> New=> NewProject
2. في الملف  res/layout   سنقوم بانشاء ملف XML جديد , سنعطيه الاسم  relative_layout.xml
 كليك يمين علي res/ layout -> New -> Layout resource file .
3. نفتح الملف الذي انشأناه ونكتب فية الكود التالي.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <EditText
        android:layout_alignParentTop="true"
        android:hint="Email"
        android:id="@+id/Email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <EditText
        android:layout_below="@id/Email"
        android:id="@+id/pass"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="password" />
    <Button
        android:id="@+id/btnLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/pass"
        android:layout_marginRight="80px"
        android:layout_marginLeft="80dp"
        android:text="Login" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/btnLogin"
        android:layout_toRightOf="@id/btnLogin"
        android:text="Cancel" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="forget password?" />
</RelativeLayout>

4. نفس ما فعلناه من قبل في ملف الـ MainActivity.java  سنفعله الان , سنقوم بتغيير R.layout.activiy_main  الي اسم الملف الذي انشأناه  R.layout.relative_layout

package mesalm.layout;

        import android.support.v7.app.AppCompatActivity;
        import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.relative_layout);
    }
}

5. نقوم الان بتشغيل التطببيق , نضغط " Run " (      ) يجب ان تري النافذة التالية علي شاشة  المحاكي .

3 .Table Layout
التخطيط الجدولي وهي تتكون من صفوف rows  واعمدة  columns  ليس من الصعب ان تفهمها , والصورة التي بالاسفل ستعطيك الفكرة .

1. انشاء مشروع جديد 

او بإمكانك ان تبدأ من الخطوة التالية وتنشئ ملف XML  جديد بجانب الملفات السابقة في مجلد res/layout  .

2. في الملف  res/layout   سنقوم بانشاء ملف XML جديد , سنعطيه الاسم  table_layout.xml
 كليك يمين علي res/ layout -> New -> Layout resource file .
3. قم بكتابة الكود التالي في الملف الذي قمت بانشاءه .

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:shrinkColumns="*"
    android:stretchColumns="*">
    <!-- الصف الاول معه عمود واحد -->
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_span="3"
            android:background="#5b7331"
            android:padding="18dip"
            android:text="Row 1"
            android:textColor="#000"
            android:textSize="18dp" />
    </TableRow>
    <!-- الصف الثاني معه ثلاث اعمدة -->
    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/r2c1"
            android:layout_weight="1"
            android:background="#9bdc55"
            android:gravity="center"
            android:padding="20dip"
            android:text="Row 2 column 1"
            android:textColor="#000000" />
        <TextView
            android:id="@+id/r2c2"
            android:layout_weight="1"
            android:background="#71a137"
            android:gravity="center"
            android:padding="20dip"
            android:text="Row 2 column 2"
            android:textColor="#000000" />
        <TextView
            android:id="@+id/r2c3"
            android:layout_weight="1"
            android:background="#3e6109"
            android:gravity="center"
            android:padding="20dip"
            android:text="Row 2 column 3"
            android:textColor="#000000" />
    </TableRow>
    <!--الصف الثالث معه عمودين  -->
    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal">
        <TextView
            android:id="@+id/r3c1"
            android:layout_weight="1"
            android:background="#5c7125"
            android:gravity="center"
            android:padding="20dip"
            android:text="Row 3 column 1"
            android:textColor="#000000" />
        <TextView
            android:id="@+id/r3c2"
            android:layout_weight="1"
            android:background="#417020"
            android:gravity="center"
            android:padding="20dip"
            android:text="Row 3 column 2"
            android:textColor="#000000" />
    </TableRow>
</TableLayout>

4. نفس ما فعلناه من قبل في ملف الـ MainActivity.java  سنفعله الان , سنقوم بتغيير R.layout.activiy_main  الي اسم الملف الذي انشأناه  R.layout.table_layout

package mesalm.layout;

        import android.support.v7.app.AppCompatActivity;
        import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.table_layout);
    }
}

5. نقوم الان بتشغيل التطببيق , نضغط " Run " (      ) يجب ان تري النافذة التالية علي شاشة  المحاكي .

في هذه التدوينة وضحنا كلاً من linear_layout   ,  Relative_layout  , Table_layout
وفي تدوينات تالية  سنناقش الباقي من الــ layouts ان شاء الله .