شرح TableLayout

الموضوع: TableLayout.

المحاور: التعرف على TableLayout وكيفية جدولة العناصر وتوزيعها لصفوف وأعمدة.

TableLayout

يتضح من التسمية (Table) انها تعمل على توزيع العناصر التي بداخلها على صفوف وأعمدة، مما يميّزها بانها أكثر تنظيماً وتخطيطاً.

في هذه ال Layout ونقصد TableLayout هنالك وسم لتحديد الصفوف بإسم TableRow ولكن لا يوجد وسم لتحديد الأعمدة، ولكن يعتمد عدد الأعمدة على عدد العناصر(الأدوات) التي بداخل كل وسم صف(TableRow)، بمعني إذا قمنا بإنشاء TableRow وأنشأنا بداخله 3 حقول سيصبح لدينا جدول مكون من صف واحد و ثلاثة -إعتماداً على عدد الحقول- أعمدة.

مثال ل TableLayout تحتوي على صفين خاليين:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/tableLayout1">

<TableRow android:id="@+id/tableRow1">

</TableRow>

<TableRow android:id="@+id/tableRow2">

</TableRow>

</TableLayout>

نتيجة الجدول أعلاه فارغة لأنه لا يحتوي على أعمدة

لنقم بإدخال 3 حقول في كل صف ليصبح لدينا جدول ابعاده (2 صف  *  3عمود).

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:minWidth="25px"
  android:minHeight="25px"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:id="@+id/tableLayout1">
  <TableRow
    android:id="@+id/tableRow1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <EditText
      android:id="@+id/row1col1"
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:background="#F8F8F8"
      android:textColor="#000"
      android:textColorHint="#333"
      android:text="Row 1 Column 1"
      android:layout_marginLeft="5dp"
      android:layout_weight="1"
      android:gravity="center" />
    <EditText
      android:id="@+id/row1col2"
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:background="#F8F8F8"
      android:textColor="#000"
      android:textColorHint="#333"
      android:text="Row 1 Column 2"
      android:layout_marginLeft="5dp"
      android:layout_weight="1"
      android:gravity="center" />
    <EditText
      android:id="@+id/row1col3"
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:background="#F8F8F8"
      android:textColor="#000"
      android:textColorHint="#333"
      android:text="Row 1 Column 3"
      android:layout_marginLeft="5dp"
      android:layout_marginRight="5dp"
      android:layout_weight="1"
      android:gravity="center" />
  </TableRow>
  <TableRow
    android:id="@+id/tableRow2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <EditText
      android:id="@+id/row2col1"
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:background="#F8F8F8"
      android:textColor="#000"
      android:textColorHint="#333"
      android:text="Row 2 Column 1"
      android:layout_marginLeft="5dp"
      android:layout_weight="1"
      android:gravity="center"
      android:layout_marginTop="1dp" />
    <EditText
      android:id="@+id/row2col2"
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:background="#F8F8F8"
      android:textColor="#000"
      android:textColorHint="#333"
      android:text="Row 2 Column 2"
      android:layout_marginLeft="5dp"
      android:layout_weight="1"
      android:gravity="center"
      android:layout_marginTop="1dp" />
    <EditText
      android:id="@+id/row2col3"
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:background="#F8F8F8"
      android:textColor="#000"
      android:textColorHint="#333"
      android:text="Row 2 Column 3"
      android:layout_marginLeft="5dp"
      android:layout_marginRight="5dp"
      android:layout_weight="1"
      android:gravity="center"
      android:layout_marginTop="1dp" />
    </TableRow>
</TableLayout>

والنتيجة كالتالي :

إنضم لمجتمع زامرن العرب وشاركنا برأيك

نهاية الدرس 🙂 لا تنسونا من صالح الدعاء

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *