openplanning

Hướng dẫn và ví dụ Android TableLayout

  1. Android TableLayout
  2. TableLayout - android:stretchColumns
  3. TableLayout - android:shrinkColumns
  4. TableLayout - android:collapseColumns
  5. View - android:layout_column
  6. View - android:layout_span
  7. View - android:layout_gravity
  8. View - android:layout_weight
  9. Ví dụ TableLayout

1. Android TableLayout

TableLayout sắp xếp các View bên trong nó dưới dạng bảng. Cụ thể, TableLayout là một ViewGroup chứa một hoặc nhiều TableRow, mỗi TableRow là một hàng (row) trong bảng, chứa các ô (cell). Các View con có thể được đặt trong một ô hoặc đặt trong một ô hợp nhất từ các ô liên tiếp của một hàng. Khác với bảng trong HTML, bạn không thể hợp nhất các ô liên tiếp trên cùng một cột.
TableLayout cũng giống như một View thông thường, bạn có thể kéo thả nó vào một giao diện có sẵn:
Hoặc hoặc sử dụng nó như Layout gốc của giao diện:
Thêm các TableRow và các View vào trong TableLayout:

2. TableLayout - android:stretchColumns

Trong TableLayout các cột được đánh chỉ số 0, 1, 2... Thuộc tính android:stretchColumns cho phép bạn chỉ định các cột sẽ được kéo dài (stretched) để lấp đầy không gian nằm ngang còn trống của TableLayout.
<!-- The columns with indexes 0 and 2 will be stretched. -->
<TableLayout  
    ...
    android:stretchColumns="0, 2">

     ...

</TableLayout>


<!-- All columns will be stretched. -->
<TableLayout  
    ...
    android:stretchColumns="*">

     ...

</TableLayout>

3. TableLayout - android:shrinkColumns

Trái ngược với android:stretchColumns, thuộc tính android:shrinkColumns chỉ định các cột sẽ bị co lại (shrinked) để tránh việc các View con tràn ra ngoài TableLayout.
<!-- The columns with indexes 0 and 2 will be shrinked. -->
<TableLayout  
    ...
    android:shrinkColumns="0, 2">

     ...

</TableLayout>


<!-- All columns will be shrinked. -->
<TableLayout  
    ...
    android:shrinkColumns="*">

     ...

</TableLayout>

4. TableLayout - android:collapseColumns

Thuộc tính android:collapseColumns chỉ định các cột sẽ bị sụp đổ (collapsed), nghĩa là chiều rộng của nó cột sẽ là 0, cột sẽ bị ẩn đi.
<!-- The columns with indexes 0 and 2 will be collapsed-->
<TableLayout  
    ...
    android:collapseColumns="0, 2">

     ...

</TableLayout>


<!-- All columns will be collapsed---->
<TableLayout  
    ...
    android:collapseColumns="*">

     ...

</TableLayout>

5. View - android:layout_column

Thuộc tính android:layout_column được áp dụng cho một View con trong một TableRow để chỉ định chỉ số cột của nó. Các giá trị có thể là 0, 1, 2,...

6. View - android:layout_span

Thuộc tính android:layout_span áp dụng cho View con để chỉ định số ô liên tiếp trong một TableRow sẽ được hợp nhất với nhau.

7. View - android:layout_gravity

Thuộc tính android:layout_gravity được áp dụng cho các View con (của TableRow) để chỉ định vị trí tương đối của nó của nó so với ô chứa nó. Thuộc tính này có ảnh hưởng tới cách cư xử của thuộc tính android:layout_width.
Trường hợp 1: Nếu thuộc tính android:layout_gravity không được sét đặt cho View con (Của TableRow), View con sẽ luôn có chiều rộng lấp đầy ô chứa nó, điều đó có nghĩa là thuộc tính android:layout_width sẽ luôn luôn nhận giá trị MATCH_PARENT.
Trường hợp 2: Nếu thuộc tính android:layout_gravity được sét đặt cho View con (Của TableRow), View con sẽ luôn có chiều rộng mặc định, điều đó có nghĩa là thuộc tính android:layout_width sẽ luôn luôn nhận giá trị WRAP_CONTENT.
Thuộc tính android:layout_gravity dùng để chỉ định vị trí của View trong ô chứa nó.
Constant in Java
Value
Description
Gravity.LEFT
left
Gravity.CENTER_HORIZONTAL
center_horizontal
Gravity.RIGHT
right
Gravity.CLIP_HORIZONTAL
clip_horizontal
Gravity.FILL_HORIZONTAL
fill_horizontal
Gravity.TOP
top
Gravity.CENTER_VERTICAL
center_vertical
Gravity.BOTTOM
bottom
Gravity.CLIP_VERTICAL
clip_vertical
Gravity.FILL_VERTICAL
fill_vertical
Gravity.START
start
Gravity.END
end
Gravity.CENTER
center
Gravity.FILL
fill

8. View - android:layout_weight

Thuộc tính android:layout_weight được sử dụng cho các View con (của TableRow), nó chỉ định có bao nhiêu không gian mà View con này sẽ chiếm trong View cha (TableRow) theo chiều ngang. Một giá trị layout_weight lớn hơn 0 cho phép View con mở rộng để điền vào bất kỳ không gian còn lại trong View cha. View con có thể chỉ định một giá trị layout_weight, và sau đó bất kỳ không gian còn lại trong View cha sẽ được gán cho các View con theo tỷ lệ layout_weight của chúng.
Khi tất cả các View con (của TableRow) có android:layout_weight=0, bạn sẽ nhìn thấy một không gian trống trong View cha (TableRow):
Các View con có android:layout_weight>0 sẽ chiếm lấy vùng không gian trống của View cha (TableRow):
Vùng không gian trống của View cha (TableRow) sẽ được phân bổ cho các View con theo theo tỷ lệ layout_weight của chúng.

9. Ví dụ TableLayout

Dưới đây là một cửa sổ đăng nhập, bạn có nghĩ rằng có thể sử dụng TableLayout để thiết kế giao diện cho nó?
Câu trả lời là "Hoàn toàn có thể", và đây là bản phác thảo ý tưởng thiết kế:
Tiếp theo là thực hiện theo ý tưởng:
Bước 1: Thêm 5 TableRow vào TableLayout:
Bước 2: Thêm 4 Button vào TableRow đầu tiên, chúng ta sẽ có một TableLayout với 4 cột, điều này sẽ làm cho quá trình thiết kế dễ dàng hơn. TableRow đầu tiên sẽ được xóa khỏi giao diện khi quá trình thiết kế hoàn thành.
Bước 3: Thêm các View con khác vào giao diện:
Bước 4: Sét đặt thuộc tính android:layout_span cho một vài View con:
Bước 5: Sét đặt android:layout_column cho button "Login":
Bước 6: Kéo giãn (stretch) các cột có chỉ số 1, 3:
  • (TableLayout) android:stretchColumns = "1, 3"
Bước 7: Sét đặt thuộc tính android:layout_gravity cho các button "Login""Forget Password":
Bước 8: Sét đặt text, textSize, padding, gravity cho các View con trên giao diện:
Bước 9: Xóa bỏ TableRow đầu tiên, và việc thiết kế giao diện hoàn thành.
layout_main.xml
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:stretchColumns="1, 3"
    tools:context=".MainActivity">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="4"
            android:gravity="center"
            android:text="Login"
            android:textSize="22sp" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="10dp"
            android:text="User name" />

        <EditText
            android:id="@+id/editText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="3"
            android:ems="10"
            android:inputType="textPersonName" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="10dp"
            android:text="Password" />

        <EditText
            android:id="@+id/editText2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="3"
            android:ems="10"
            android:inputType="textPassword" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_gravity="right"
            android:text="Login" />

        <Button
            android:id="@+id/button6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Cancel" />

        <Button
            android:id="@+id/button7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:text="Forget Password?" />
    </TableRow>
</TableLayout>

Các hướng dẫn lập trình Android

Show More