Android五大布局詳解——TableLayout（表格布局）

TableLayout

前面所學的LinearLayout和RelativeLayout兩大布局已經完全適用於各種開發條件下，其他的布局僅供參考學習，畢竟知識就是力量，以后的開發過程中萬一遇到也能游刃有余。
表格布局允許我們使用表格的方式來排列組件,就是行與列的方式。

簡單描述

1.直接往TableLayout中添加組件,這個組件占滿一行。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TableLayout"
        />

</TableLayout>

效果如圖：

2.如果想要一行上有多個組件,就要添加一個TableRow的容器。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <TableRow>

        <Button
            android:id="@+id/button_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"
            />

        <Button
            android:id="@+id/button_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"
            />

        <Button
            android:id="@+id/button_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3"
            />

        <Button
            android:id="@+id/button_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="4"
            />

    </TableRow>
    
</TableLayout>

效果如圖：

3.tablerow中的組件個數就決定了該行有多少列。

常用屬性

1.android:collapseColumns:設置需要被隱藏的列的序號。比如android:collapseColumns="0,2"，隱藏第一列和第三列。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:collapseColumns="0,2"
    >

    <TableRow>

        <Button
            android:id="@+id/button_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"
            />

        <Button
            android:id="@+id/button_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"
            />

        <Button
            android:id="@+id/button_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3"
            />

        <Button
            android:id="@+id/button_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="4"
            />

        <Button
            android:id="@+id/button_5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="5"
            />

        <Button
            android:id="@+id/button_6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="6"
            />

    </TableRow>

</TableLayout>

效果如圖：

2.android:stretchColumns:設置允許被拉伸的列的列序號。比如android:stretchColumns="1"，設置第二列可拉伸列,讓該列填滿這一行所有的剩余空間。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1"
    >

    <TableRow>

        <Button
            android:id="@+id/button_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"
            />

        <Button
            android:id="@+id/button_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"
            />

        <Button
            android:id="@+id/button_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3"
            />

    </TableRow>

</TableLayout>

效果如圖：

3.android:shrinkColumns:設置允許被收縮的列的列序號

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:shrinkColumns="2"
    >

    <TableRow>

        <Button
            android:id="@+id/button_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"
            />

        <Button
            android:id="@+id/button_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"
            />

        <Button
            android:id="@+id/button_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"
            />

        <Button
            android:id="@+id/button_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="4"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Table" />

    </TableRow>

</TableLayout>

運行結果如圖：

demo

實現如圖所示的界面

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity"
    android:stretchColumns="0,3"
    android:gravity="center_vertical"
    android:background="#66FF66"
    >

    <TableRow>
        <TextView />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="用戶名:"/>
        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="150dp"/>
        <TextView />
    </TableRow>

    <TableRow>
        <TextView />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="密  碼:"
            />
        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="150dp"
            />
        <TextView />
    </TableRow>

    <TableRow>
        <TextView />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="登陸"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="退出"/>
        <TextView />
    </TableRow>

</TableLayout>

分析：
調用gravity屬性,設置為center_vertical,讓布局里面的組件在豎直方向上居中；將TableLayout中的第一和第四列設置為可拉伸；在每個TableRow中添加兩個TextView,用於拉伸填滿該行,這樣可以讓表格水平居中，android:stretchColumns="0,3" 設置為0和3，是為了讓兩邊都充滿,那么中間部分就可以居中了。