Android表格佈局(Table Layout)

Android表格佈局(Table Layout)

 

先來看佈局管理器之間繼承關係圖：

圖1

可知TableLayout繼承了LinearLayout，因此表格佈局本質上依然是線性管理器。

 

表格佈局採用行、列的形式來管理組件，它並不須要明確地聲明包含了多少行、多少列，而是經過添加TableRow、其餘組件來控制表格的行數和列數。

 

每向TableLayout添加一個TableRow，該TableRow就是一個表格行，TableRow也是容器，所以它也能夠不斷地添加組件，每添加一個子組件該表格就添加一列。

 

TableLayout通常如下面兩種方式實現：

(1)  本身做爲最頂層父容器

<!--定義一個TableLayout，有兩行
   第1列全部單元格的寬度能夠被收縮，以保證該表格能適應父容器的寬度
   第2列全部單元格的寬度能夠拉伸，以保證能徹底填滿表格空餘空間-->
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/TableLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:shrinkColumns="1"
    android:stretchColumns="2">
   
   <!--這是此TableLayout的第1行，沒有使用TableRow，直接添加一個Button，那麼次Button本身佔用整行 -->
   <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="獨自一行的按鈕1"/>
   
   <!-- 這是第2行，先添加一個TableRow，併爲TableRow添加三個Button，也就是此行包含三列 -->
   <TableRow>
        <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="普通按鈕1"/>
       
        <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被收縮的按鈕1"/>
       
        <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被拉伸的按鈕1"/>
   </TableRow>
   
   <!--這是此TableLayout的第3行，沒有使用TableRow，直接添加一個Button，那麼次Button本身佔用整行 -->
   <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="獨自一行的按鈕2"/>
   
   <!-- 這是第4行，先添加一個TableRow，併爲TableRow添加三個Button，也就是此行包含三列 -->
   <TableRow>
        <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="普通按鈕2"/>
       
        <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被收縮的按鈕2"/>
       
        <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被拉伸的按鈕2"/>
   </TableRow>
   
</TableLayout>

效果以下：

圖2

這裏只有一個TableLayout，若是咱們想單獨控制地4行，好比想把「普通按鈕2」隱藏，也就是增長android:collapseColumns="0"，這樣會把「普通按鈕1」，這一列也隱藏了，以下圖：

圖3

但若是要實現只「普通按鈕2」這列，咱們來看下面的實現

 

(2)  LinearLayout做爲TableLayout的容器

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">-->
 
<!--定義第1個TableLayout，有兩行
   第1列全部單元格的寬度能夠被收縮，以保證該表格能適應父容器的寬度
   第2列全部單元格的寬度能夠拉伸，以保證能徹底填滿表格空餘空間-->
<TableLayout
    android:id="@+id/TableLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:shrinkColumns="1"
    android:stretchColumns="2">
   
   <!--這是此TableLayout的第1行，沒有使用TableRow，直接添加一個Button，那麼次Button本身佔用整行 -->
   <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="獨自一行的按鈕1"/>
   
   <!-- 這是第2行，先添加一個TableRow，併爲TableRow添加三個Button，也就是此行包含三列 -->
   <TableRow>
        <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="普通按鈕1"/>
       
        <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被收縮的按鈕1"/>
       
        <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被拉伸的按鈕1"/>
   </TableRow>
   
   
   
</TableLayout>
<!--定義第2個TableLayout，有兩行
   第1列全部單元格的寬度能夠被收縮，以保證該表格能適應父容器的寬度
   第2列全部單元格的寬度能夠拉伸，以保證能徹底填滿表格空餘空間-->
<TableLayout
    android:id="@+id/TableLayout2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:collapseColumns="0"
    android:shrinkColumns="1"
    android:stretchColumns="2">
   
   <!--這是此TableLayout的第3行，沒有使用TableRow，直接添加一個Button，那麼次Button本身佔用整行 -->
   <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="獨自一行的按鈕2"/>
   
   <!-- 這是第4行，先添加一個TableRow，併爲TableRow添加三個Button，也就是此行包含三列 -->
   <TableRow>
        <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="普通按鈕2"/>
       
        <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被收縮的按鈕2"/>
       
        <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被拉伸的按鈕2"/>
   </TableRow>
   
   </TableLayout>
  
</LinearLayout>

效果以下：

圖4

 

經過在第2個TableLayout中增長android:collapseColumns="0"實現，這裏須要主要的是LinearLayout的android:orientation屬性值的設置，若是沒有這一項或是其值爲horizontal，那麼後面兩行都看不到，由於是以水平方向排列的，後面兩行顯示在前兩行的右邊，看不到。