[Android Studio] Table Layout สร้าง UI ด้วยตาราง

Table Layout คือ Layout ที่มีการจัดวางแบบตาราง

แถว คือ แนวนอน

คอลัมน์ คือ แนวตั้ง

เพิ่มตารางลงใน activity_main.xml

<TableLayout
   <!-- กำหนดคุณสมบัติของตาราง --> >

   <!-- เพิ่มแถวและคอลัมน์ที่นี่ -->

</TableLayout>

สร้างตารางจำนวน 3 แถว

<!-- แถวที่ 1 -->
<TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        >
  </TableRow>

<!-- แถวที่ 2 -->
 <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        >
 </TableRow>

<!-- แถวที่ 3 -->
<TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        >
 </TableRow>

เพิ่มคอลัมน์ลงในตารางที่ 1

โดยที่จำนวนคอลัมน์ของตารางจะเท่ากับจำนวนอิลิเมนต์ในแถวนั้นๆ

<!-- แถวที่ 1 -->
<TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        >
        <Button
            android:id="@+id/btn_menu1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"
            android:layout_margin="5dp"
            />
        <Button
            android:id="@+id/btn_menu2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"
            android:layout_margin="5dp"
            />
        <Button
            android:id="@+id/btn_menu3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3"
            android:layout_margin="5dp"
            />
        <Button
            android:id="@+id/btn_menu4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="4"
            android:layout_margin="5dp"
            />
</TableRow>

จาก code ตารางที่ 1 มี 4 คอลัมน์ โดยแต่ละคอลัมน์เป็น Button แต่ละอัน

ผลลัพธ์

เพิ่มคอลัมน์ลงในตารางที่ 2 

เพิ่ม Button ลงไป 4 ปุ่ม เหมือนกับตารางที่ 1

 <!-- แถวที่ 2 -->

 <TableRow

        android:id="@+id/tableRow2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:gravity="center"

        >

        <Button

            android:id="@+id/btn_menu5"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="5"

            android:layout_margin="5dp"

            />

        <Button

            android:id="@+id/btn_menu6"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="6"

            android:layout_margin="5dp"

            />

        <Button

            android:id="@+id/btn_menu7"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="7"

            android:layout_margin="5dp"

            />

        <Button

            android:id="@+id/btn_menu8"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="8"

            android:layout_margin="5dp"

            />

 </TableRow>

ผลลัพธ์

เพิ่มคอลัมน์ลงในตารางที่ 3

เราสามารถเพิ่มอิลิเมนต์อื่นๆลงในตารางได้ โดยที่จำนวนคอลัมน์ในแต่ละแถวไม่จำเป็นต้องเท่ากัน

เพิ่ม TextView และ EditText ลงในตารางที่ 3

 <!-- แถวที่ 3 -->
 <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        >
        <TextView
            android:id="@+id/txt_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ตารางที่ 3"
            />
        <EditText
            android:id="@+id/edit_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            />
</TableRow>

จาก code ตารางที่ 3 จะมี 2 คอลัมน์

ผลลัพธ์

Tools :

Android Studio