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

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

1. TableLayout 的特性

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

注：看到行標籤，大家可以想到，TableLayout 是不需要註明表格列的數量的，因為 Android 系統會自動根據我們宣告在<TableRow/>中的元素推算出最終表格的列數

2. 關鍵屬性的用法

剛剛提到，我們用<TableRow/>來宣告表格的一行，而很多屬性都是作用於<TableRow/>

2.1 作用於 TableLayout 的屬性

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

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

• android:shrinkColumns：
  這是與 stretchColumns 相對的屬性，如果某些列的所佔的空間太大，那麼可以通過該屬性設定可收縮的列。當該列子控制元件的內容太多（比如 TextView 中文字太長），已經擠滿所在行，那麼該子控制元件的內容將往列方向顯示（TextView 折行顯示）。

注：雖然從名字上講，一個是擴充套件，一個是收縮，但二者並不衝突。一個列可以同時具備stretchColumns及shrinkColumns屬性。若此，那麼當該列的內容過多時，將“多行”顯示其內容。當然這裡不是真正的多行，而是系統根據需要自動調節該行的 layout_height。

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

這 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>

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

2.2 作用於 TableRow 內部 View 的屬性

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

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

<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的，系統會自動給這兩個屬性分別賦值為match_parent及wrap_content。也就是說，我們的每一行一定是佔滿 TableLayout 的寬度，而高度則由內部的 View 來決定；
2. TableLayout 表格的列數，由元素最多的<TableRow/>的元素數量決定；
3. 表格每一列的寬度就是該列最大的 View 寬度。

4. 小結

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

注：大家學完之後可以思考一下本節中的所有 UI 樣式如果用 LinearLayout 和 RelativeLayout 如何實現？