GridLayout

بسم الله الرحمـــن الرحيم :

مرحبا إخواني،سنرى في درسنا اليوم تعريفا للــ GridLayout وطريقة استعماله ثم سنرى مثالا بسيطا نطبق فيه ما تعلمناه.

GridLayout هو تصميم يضع أبنائه في شبكة مستطيلة .
الأبناءيمكن أن يشغلوا واحدة أو أكثر من الخلايا المتجاورة ، وذلك باستعمال الخاصية rowSpan و  columnSpan ،حيث الأول يمثل عدد الأسطر التي نريد أن يحتلها المكون و الثاني يمثل عدد الأعمدة التي نريد للإبن أن يحتلها.

الطريقة التي يتم ترصيص بها المكونات هي أن ال GridLayout يقوم بترصيصها أفقيا حتى ينتهي من السطر ثم ينتقل إلى السطر الموالي،أو يضع المكون في الخانة التي حددناها له باستعمال الخاصيتين layout_row و layout_column و هما يمثلان السطر والعمود الذان تتواجد فيهما الخانة،على أساس أن رقم العمود و السطر يبدأ من الصفر كما في الصورة الموالية :

وهنا يمكن جليا أن نلاحظ أهمية هذا المكون في تسهيل عملية إنشاء تصاميم معقدة كالتصاميم التالية:

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

 سنجعل المكون الأول (Email setup) يحتل الخانات الأربع كلها وذلك بوضع columnSpan = 4 ،نفس الشيئ بالنسبة للمكون الموالي،وأخيرا الزر سنجعله في الخانة الأخيرة وذلك باستعمال الخاصيتين layout_row  و  layout_column . وإليكم ملف الـ xml :

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:alignmentMode="alignBounds"
    android:columnCount="4"
    android:columnOrderPreserved="false"
    android:useDefaultMargins="true" >

    <Button
        android:layout_columnSpan="4"
        android:layout_gravity="center_horizontal"
        android:text="Button"
        android:textSize="32dip" />

    <TextView
        android:layout_columnSpan="4"
        android:layout_gravity="left"
        android:text="You can configure email in just a few steps:"
        android:textSize="16dip" />

    <TextView
        android:layout_gravity="right"
        android:text="Email address:" />

    <EditText android:ems="10" />

    <TextView
        android:layout_column="0"
        android:layout_gravity="right"
        android:text="Password:" />

    <EditText android:ems="8" />

    <Space
        android:layout_column="0"
        android:layout_columnSpan="3"
        android:layout_gravity="fill"
        android:layout_row="4" />

    <Button
        android:layout_column="3"
        android:layout_row="4"
        android:text="Next" />

</GridLayout>

بعض الخاصيات تحتاج إلى شرح :

layout_gravity : ونقصد بها كيف نريد أن يتمركز المكون داخل المكون الأب(الخلية) الذي يضمه،مثلا على اليمين (right) او اليسار (left) او الأسفل (bottom) او الأعلى (top) أو أن يملاء المكون الأب (fill) ....
columnCount وتمثل عدد الأعمدة التي ستكون جدولنا،يمكن كذلك تحديد عدد الأسطر باستخدام الخاصية rowCount.

هكذا نكون قد أحطنا بأهم الجوانب فيما يخص هذا المكون ،يمكنكم الإطلاع على مزيد من الشرح في موقع أندرويد.

و السلام عليكم.