Tìm hiểu về TableLayout trong Android

Khi nói về UI Layout không thể không nói đến TableLayout trong Android. Vậy TableLayout trong Android là gì? Có mấy cách khai báo TableLayout? Sử dụng TableLayout như thế nào?

Tìm hiểu về TableLayout trong Android

Bây giờ tôi cùng các bạn sẽ làm rõ các vấn đề được đặt ra ở trên.

1. TableLayout trong Android là gì

TableLayout trong Android là một view group, nhóm tất cả các view vào trong hàng và cột. Sử dụng <TableRow> để tạo ra các hàng trong bảng (một hàng có thể chia thành nhiều ô). Vùng chứa của TableLayout không hiển thị đường viền cho hàng, cột hoặc ô của nó. Vậy cú pháp khai báo TableLayout trong Android như thế nào?

2. Cú pháp khái báo TableLayout trong Android

Trong Android TableLayout được khai báo như sau.

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:shrinkColumns="*"
    android:stretchColumns="*"
    android:background="#ffffff">
//TODO
</TableLayout>

3. Các thuộc tính của TableLayout trong Android

Một số thuộc tính quan trọng của TableLayout.

Thuộc tính Mô tả
android:id ID là duy nhất để nhận diện Layout
android:collapseColumns Xác định index của các cột (bắt đầu từ 0). Các index cột được phân biệt riêng rẽ bởi dấu phẩy.
android:shrinkColumns Xác định index của các cột (bắt đầu từ 0) để co lại. Các index cột được phân biệt riêng rẽ bởi dấu phẩy.
android:stretchColumns Xác định index của các cột (bắt đầu từ 0) để kéo ra. Các index cột được phân biệt riêng rẽ bởi dấu phẩy.

4. Ví dụ sử dụng TableLayout trong Android

Đến với ví dụ sử dụng TableLayout trong Android tôi sẽ thiết kế giao diện như sau.Các bạn có thể download source code ngay bên dưới đây.

Tìm hiểu về TableLayout trong Android

Nội dung file table_layout_activity.xml

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:collapseColumns=""
    android:shrinkColumns="*"
    android:stretchColumns="*"
    android:background="#ffffff">
    <TableRow
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:gravity="center_horizontal">
        <TextView
            android:id="@+id/TextView01"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="18dp"
            android:text="@string/TextView_01"
            android:layout_span="3"
            android:padding="18dip"
            android:background="#b0b0b0"
            android:textColor="#000"/>
    </TableRow>

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">
        <TextView
            android:id="@+id/TextView02"
            android:text="@string/TextView_02"
            android:layout_weight="1"
            android:background="#dcdcdc"
            android:textColor="#000000"
            android:padding="20dip"
            android:gravity="center"/>
        <TextView
            android:id="@+id/TextView03"
            android:text="@string/TextView_03"
            android:layout_weight="1"
            android:background="#d3d3d3"
            android:textColor="#000000"
            android:padding="20dip"
            android:gravity="center"/>
        <TextView
            android:id="@+id/TextView04"
            android:text="@string/TextView_04"
            android:layout_weight="1"
            android:background="#cac9c9"
            android:textColor="#000000"
            android:padding="20dip"
            android:gravity="center"/>
    </TableRow>

    <TableRow
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:gravity="center_horizontal">
        <TextView
            android:id="@+id/TextView05"
            android:text="@string/TextView_05"
            android:layout_weight="1"
            android:background="#b0b0b0"
            android:textColor="#000000"
            android:padding="20dip"
            android:gravity="center"/>

        <TextView
            android:id="@+id/TextView06"
            android:text="@string/TextView_06"
            android:layout_weight="1"
            android:background="#a09f9f"
            android:textColor="#000000"
            android:padding="20dip"
            android:gravity="center"/>
    </TableRow>

</TableLayout>

Kết quả sau khi chạy ví dụ TableLayout trong Android

Tìm hiểu về TableLayout trong Android

Lời kết: Sau khi đã tìm hiểu về TableLayout trong Android các bạn cần nắm khái niệm UI Layout trong Android, UI Layout là gì?. Ngoài ra các bạn có thể xem thêm các nội dung khác trong chuyên mục lập trình Android được chia sẻ với Team Việt Dev.

Xem thêm các layout khác tại đây.

Sử dụng Linear Layout trong Android

Sử dụng Relative Layout trong Android

Đang cập nhật…

(Tác giả: Team Việt Dev)

Bình luận