Lập trình Android — August 24, 2016 at 2:53 am

Tìm hiểu về Table Layout trong lập trình Android

by

Trong bài viết ngày hôm nay, chúng ta sẽ cùng nhau tìm hiểu về Table Layout trong lập trình Android cũng như giúp ta ôn lại những kiến thức cơ bản. Cùng theo dõi nhé các bạn.

TableLayout thể hiện các View dưới dạng lưới. Bạn có sử dụng thẻ <TableRow> để tạo ra các hàng, các cột trong layout.

Các ô được tạo có thể chứa các View và layout khác.

Hình dưới đây cho các bạn thấy một cái nhìn tổng quan về Table Layout

table_layout_sketch_thumb

Ví dụ về một Table Layout:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/TableLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="#ffffff"
    android:shrinkColumns="*"
    android:stretchColumns="*"
    tools:context=".MainActivity" >
    <!-- Row 1 with single column -->
    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" >
        <TextView
            android:id="@+id/tv1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_span="3"
            android:background="#47BDED"
            android:padding="18dip"
            android:text="Row 1"
            android:textColor="#000000" />
    </TableRow>
    <!-- Row 2 with 3 columns -->
    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <TextView
            android:id="@+id/tv21"
            android:layout_weight="1"
            android:background="#FFB500"
            android:gravity="center"
            android:padding="20dip"
            android:text="Row 2 column 1"
            android:textColor="#000000" />
        <TextView
            android:id="@+id/tv22"
            android:layout_weight="1"
            android:background="#FFFA99"
            android:gravity="center"
            android:padding="20dip"
            android:text="Row 2 column 2"
            android:textColor="#000000" />
        <TextView
            android:id="@+id/tv23"
            android:layout_weight="1"
            android:background="#FFC03E"
            android:gravity="center"
            android:padding="20dip"
            android:text="Row 2 column 3"
            android:textColor="#000000" />
    </TableRow>
    <!-- Row 3 with 2 columns -->
    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" >
        <TextView
            android:id="@+id/tv31"
            android:layout_weight="1"
            android:background="#00B9CD"
            android:gravity="center"
            android:padding="20dip"
            android:text="Row 3 column 1"
            android:textColor="#000000" />
        <TextView
            android:id="@+id/tv32"
            android:layout_weight="1"
            android:background="#58F5FF"
            android:gravity="center"
            android:padding="20dip"
            android:text="Row 3 column 2"
            android:textColor="#000000" />
    </TableRow>
</TableLayout>

Với thiết kế này, chúng ta có kết quả như sau:

TableLayout_thumb

Trên đây chúng tôi đã chia sẻ với các bạn về Table Layout trong lập trình Android. Hy vọng với bài viết bao gồm khái niệm và ví dụ sẵn sẽ giúp ích cho các bạn trong quá trình học tập. Chúc các bạn học tốt!

Nguồn: code5s

Leave a Comment

Your email address will not be published. Required fields are marked *