جدول

TableLayout هو عنصر ViewGroup يعرض عناصر View الثانوية في صفوف وأعمدة.

ملاحظة: للحصول على أداء أفضل وأدوات أفضل، يجب بدلاً من ذلك إنشاء تنسيق باستخدام ConstraintLayout.

يضع TableLayout عناصره الثانوية في صفوف وأعمدة. لا تعرض حاويات TableLayout خطوط الحدود للصفوف أو الأعمدة أو الخلايا. سيحتوي الجدول على عدد الأعمدة الذي سيتضمّن الصفّ الذي يحتوي على أكبر عدد من الخلايا. يمكن أن يترك الجدول الخلايا فارغة. يمكن أن تمتد الخلايا في أعمدة متعددة، كما هو الحال في HTML. يمكنك توسيع الأعمدة باستخدام الحقل span في الفئة TableRow.LayoutParams.

ملاحظة: لا يمكن للخلايا أن تمتد إلى عدة صفوف.

كائنات TableRow هي طرق عرض فرعية لـ TableLayout (يحدد كل TableRow صفًا واحدًا في الجدول). يحتوي كل صف على صفر أو أكثر من الخلايا، ويتم تحديد كل منها من خلال أي نوع من طرق العرض الأخرى. وبالتالي، يمكن أن تتكون خلايا الصف من مجموعة متنوعة من كائنات العرض، مثل كائنات ImageView أو TextView. قد تكون الخلية أيضًا كائن ViewGroup (على سبيل المثال، يمكنك دمج TableLayout آخر كخلية).

يحتوي نموذج التخطيط التالي على صفين وخليتين في كل منهما. تُظهر لقطة الشاشة المرفقة النتيجة مع عرض حدود الخلية كخطوط منقطة (تمت إضافتها لتأثيرات مرئية).

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1">
    <TableRow>
        <TextView
            android:text="@string/table_layout_4_open"
            android:padding="3dip" />
        <TextView
            android:text="@string/table_layout_4_open_shortcut"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>

    <TableRow>
        <TextView
            android:text="@string/table_layout_4_save"
            android:padding="3dip" />
        <TextView
            android:text="@string/table_layout_4_save_shortcut"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>
</TableLayout>

يمكن إخفاء الأعمدة أو وضع علامة عليها لتمديد مساحة الشاشة المتاحة وملئها أو يمكن وضع علامة عليها كأعمدة قابلة للتصغير لفرض تقليص العمود حتى يتناسب الجدول مع الشاشة. يمكنك الاطّلاع على مستندات TableLayout reference للحصول على مزيد من التفاصيل.

مثال

1. ابدأ مشروعًا جديدًا باسم HelloTableLayout.
2. افتح ملف res/layout/main.xml وأدرِج ما يلي:

   <?xml version="1.0" encoding="utf-8"?>
   <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:stretchColumns="1">
   
       <TableRow>
           <TextView
               android:layout_column="1"
               android:text="Open..."
               android:padding="3dip" />
           <TextView
               android:text="Ctrl-O"
               android:gravity="right"
               android:padding="3dip" />
       </TableRow>
   
       <TableRow>
           <TextView
               android:layout_column="1"
               android:text="Save..."
               android:padding="3dip" />
           <TextView
               android:text="Ctrl-S"
               android:gravity="right"
               android:padding="3dip" />
       </TableRow>
   
       <TableRow>
           <TextView
               android:layout_column="1"
               android:text="Save As..."
               android:padding="3dip" />
           <TextView
               android:text="Ctrl-Shift-S"
               android:gravity="right"
               android:padding="3dip" />
       </TableRow>
   
       <View
           android:layout_height="2dip"
           android:background="#FF909090" />
   
       <TableRow>
           <TextView
               android:text="X"
               android:padding="3dip" />
           <TextView
               android:text="Import..."
               android:padding="3dip" />
       </TableRow>
   
       <TableRow>
           <TextView
               android:text="X"
               android:padding="3dip" />
           <TextView
               android:text="Export..."
               android:padding="3dip" />
           <TextView
               android:text="Ctrl-E"
               android:gravity="right"
               android:padding="3dip" />
       </TableRow>
   
       <View
           android:layout_height="2dip"
           android:background="#FF909090" />
   
       <TableRow>
           <TextView
               android:layout_column="1"
               android:text="Quit"
               android:padding="3dip" />
       </TableRow>
   </TableLayout>
   

   لاحظ كيف يشبه هذا بنية جدول HTML. يشبه العنصر TableLayout عنصر HTML <table>، TableRow وهو مثل عنصر ><tr>>، ولكن بالنسبة إلى الخلايا، يمكنك استخدام أي نوع من عناصر View. في هذا المثال، يتم استخدام TextView لكل خلية. وبين بعض الصفوف، هناك أيضًا قيمة View أساسية تُستخدَم لرسم خط أفقي.

3. تأكّد من أن نشاط HelloTableLayout يُحمِّل هذا التنسيق في طريقة onCreate():

   Kotlin

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.main)
   }
   

   Java

   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
   }
   

   تُحمّل الطريقة setContentView(int) ملف التنسيق لـ Activity، الذي يحدده رقم تعريف المورد، ويشير R.layout.main إلى ملف التنسيق res/layout/main.xml.

4. شغِّل التطبيق.

من المفترض أن يظهر لك ما يلي: