表格布局 TableLayout

學完了 Android 兩個經(jīng)典布局，是不是覺得已經(jīng)可以應對大多數(shù)場景了？我記得當我學完 LinearLayout 和 RelativeLayout 之后，我覺得 UI 布局已經(jīng)可以出師了，在本人從事了多年的 Android 研究之后，可以很負責任的告訴你，的確可以出師了。

大多數(shù)場景都可以通過這兩個布局方式組合出來，不過光靠這兩招出師可能會走不少彎路，因為 Google 還為我們提供了很多實用的 Layout，比如今天要學的 TableLayout，它是一種表格樣式，在很多 App 里面都會用到。當然你完全可以用 LinearLayout + RelativeLayout 實現(xiàn)，不過學完本節(jié)你就會發(fā)現(xiàn)，用 TableLayout 實現(xiàn)表格布局是多么簡單的一件事情！

1. TableLayout 的特性

和其他 Layout 一樣，TableLayout 也派生自 ViewGroup，它可以將內(nèi)部的 View 或者 Layout 整齊的排成幾行幾列，按照表格的形式擺放。我用使用<TableRow/>標簽標識一行，在標簽內(nèi)的 View 或者 Layout 都將擺放在同一行中。

注：看到行標簽，大家可以想到，TableLayout 是不需要注明表格列的數(shù)量的，因為 Android 系統(tǒng)會自動根據(jù)我們聲明在<TableRow/>中的元素推算出最終表格的列數(shù)

2. 關鍵屬性的用法

剛剛提到，我們用<TableRow/>來聲明表格的一行，而很多屬性都是作用于<TableRow/>內(nèi)部 View 的，這個也是和其他 Layout 不太一樣的地方，需要注意，下面就分別介紹一下 TableLayout 中這兩類屬性。

2.1 作用于 TableLayout 的屬性

• android:stretchColumns：
  當表格的某些列寬度比較窄的時候，你可以通過給 TableLayout 設置stretchColumns屬性來設置某些列向行方向伸展，最多可占據(jù)一整行。該屬性的參數(shù)直接填入需要拉伸的列的序號即可（從 0 開始），另外支持多輸入，各個列序號通過“，”分隔。如果需要對所有列拉伸，可以直接用“*”表示，如下：

  <!-- 針對所有列做拉伸 -->
  android:stretchColumns="*"
  
  <!-- 針對第1列、4列、13列做拉伸 -->
  android:stretchColumns="0,3,12"
  

• android:shrinkColumns：
  這是與 stretchColumns 相對的屬性，如果某些列的所占的空間太大，那么可以通過該屬性設置可收縮的列。當該列子控件的內(nèi)容太多（比如 TextView 中文本太長），已經(jīng)擠滿所在行，那么該子控件的內(nèi)容將往列方向顯示（TextView 折行顯示）。

注：雖然從名字上講，一個是擴展，一個是收縮，但二者并不沖突。一個列可以同時具備stretchColumns及shrinkColumns屬性。若此，那么當該列的內(nèi)容過多時，將“多行”顯示其內(nèi)容。當然這里不是真正的多行，而是系統(tǒng)根據(jù)需要自動調(diào)節(jié)該行的 layout_height。

• android:collapseColumns：
  隱藏部分列的內(nèi)容，使用方法和上述兩個屬性一樣，直接填入列的序號即可，支持多個列。

這 3 個屬性的用法示例如下：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:shrinkColumns="0"
    android:stretchColumns="1,2"
    android:collapseColumns="3"
    tools:context=".MainActivity">

    <TableRow>

        <TextView
            android:id="@+id/center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#EE0D0D"
            android:text="column1, Emercy Android Study"
            android:textSize="20sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#DBEE14"
            android:text="column2"
            android:textSize="20sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#7492CC"
            android:text="column3"
            android:textSize="20sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#09A234"
            android:text="column4"
            android:textSize="20sp" />
    </TableRow>

    <TableRow>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#FF80AB"
            android:text="row2"
            android:textSize="20sp" />
    </TableRow>
</TableLayout>

示例中定義另一個兩行的表格，根據(jù)元素最多的行可以計算出表格的列數(shù)，然后設置了shrinkColumns為第一行，stretchColumns為第二、三行，最后collapseColumns為最后一行，最終顯示的效果如下：

2.2 作用于 TableRow 內(nèi)部 View 的屬性

• android:layout_span：
  通常情況下，一個 View 只會占據(jù)一列的寬度，但是如果對某個 View 設置了layout_span=n，那么該 View 會超出所在列，占據(jù) n 個列。
• android:layout_column：
  設置 View 在第幾列顯示。

這兩個屬性比較好理解，我們直接在上面的例子中，在第二行加上這兩個參數(shù)：

<TableRow>

        <TextView
            android:layout_column="1"
            android:layout_span="3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#FF80AB"
            android:text="row2"
            android:textSize="20sp" />
    </TableRow>

設置當前 TextView 在第 2 列顯示，并占 3 列的寬度，效果如下：

3. TableLayout 的注意點

可以看到，用 TableLayout 去完成一個表格樣式是非常容易的，關于 TableLayout 有 3 點需要注意：

1. <TableRow/>標簽是不需要設置layout_width和layout_height的，系統(tǒng)會自動給這兩個屬性分別賦值為match_parent及wrap_content。也就是說，我們的每一行一定是占滿 TableLayout 的寬度，而高度則由內(nèi)部的 View 來決定；
2. TableLayout 表格的列數(shù)，由元素最多的<TableRow/>的元素數(shù)量決定；
3. 表格每一列的寬度就是該列最大的 View 寬度。

4. 小結(jié)

TableLayout 的功能比較簡單，屬性也很好理解，就是用來完成一個列表形式的布局，雖然形式比較單一，但是在相應場景中會有事半功倍的效果，相信在學會 LinearLayout 和 RelativeLayout 之后的你應該能夠完全掌握。

注：大家學完之后可以思考一下本節(jié)中的所有 UI 樣式如果用 LinearLayout 和 RelativeLayout 如何實現(xiàn)？