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
