TryMyDroid: พื้นฐาน Android - รู้จักกับ TableLayout

TableLayout ใช้ตอนไหน

TableLayout ในบทความนี้เราจะใช้เป็น "หน้าแรกของแอพ"

ยกตัวอย่างเช่น :

- แอพส่วนตัวของเราเอง

- เมื่อเปิดแอพมา ให้แสดงบริการ ของเราเลย (มีแค่ 3 รายการ)

- ทำครั้งเดียวจบ

เคสนี้เลือกใช้ TableLayout จะไวที่สุดครับ

View ที่เป็นส่วนประกอบเช่น ImageView , RadioButton , TextView ลฯล

เราสามารถใส่ไว้ใน Tag <TableRow> ครับ

_____________________________________________________________

Tag หลักที่ควรรู้ใน Table Layout

ลองศึกษาจากโค้ดด้านล่างดูนะครับ

<?xml version="1.0" encoding="utf-8"?>

<TableLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/table_layout"

android:layout_width="match_parent"

android:layout_height="match_parent">

<TableRow

android:id="@+id/row_1"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1"

android:background="#00C853">

</TableRow>

<TableRow

android:id="@+id/row_2"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1"

android:background="#009239">

</TableRow>

<TableRow

android:id="@+id/row_3"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1"

android:background="#006423">

</TableRow>

</TableLayout>

Output - แบบที่ 1

_________________________________________________________________

TableLayout - แบบที่ 2

https://www.viralandroid.com/2015/10/android-table-layout-example.html

<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/table_layout"

android:layout_width="match_parent"

android:layout_height="match_parent">

<TableRow

android:id="@+id/row_1"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginTop="4dp"

android:background="#ed8404">

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:gravity="center"

android:padding="32dp"

android:text="Row 1"

android:textColor="#fff" />

</TableRow>

<TableRow

android:id="@+id/row_2"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginTop="2dp">

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:background="#ed8404"

android:gravity="center"

android:padding="32dp"

android:text="Row 2\nColumn 1"

android:textColor="#fff" />

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginLeft="2dp"

android:layout_marginRight="2dp"

android:layout_weight="1"

android:background="#ed8404"

android:gravity="center"

android:padding="32dp"

android:text="Row 2\nColumn 2"

android:textColor="#fff" />

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:background="#ed8404"

android:gravity="center"

android:padding="32dp"

android:text="Row 2\nColumn 3"

android:textColor="#fff" />

</TableRow>

<TableRow

android:id="@+id/row_3"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginTop="2dp">

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginRight="2dp"

android:layout_weight="2"

android:background="#ed8404"

android:gravity="center"

android:padding="32dp"

android:text="Row 3\nColumn 1"

android:textColor="#fff" />

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:background="#ed8404"

android:gravity="center"

android:padding="32dp"

android:text="Row 3\nColumn 2"

android:textColor="#fff" />

</TableRow>

<TableRow

android:id="@+id/row_4"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginTop="2dp">

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginRight="2dp"

android:layout_weight="1"

android:background="#ed8404"

android:gravity="center"

android:padding="32dp"

android:text="Row 4\nColumn 1"

android:textColor="#fff" />

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="10"

android:background="#ed8404"

android:gravity="center"

android:padding="32dp"

android:text="Row 4\nColumn 2"

android:textColor="#fff" />

</TableRow>

<TableRow

android:id="@+id/row_5"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginTop="2dp">

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:background="#ed8404"

android:gravity="center"

android:padding="16dp"

android:text="Row 5\nColumn 1"

android:textColor="#fff" />

</TableRow>

</TableLayout>