Android基礎入門教程——2.2.3 TableLayout(表格版面配置)

標籤：android   布局   教程   tablelayout   表格版面配置   

Android基礎入門教程——2.2.3 TableLayout(表格版面配置)

標籤（空格分隔）： Android基礎入門教程

本節引言：

前面我們已經學習了平時實際開發中用得較多的線性布局(LinearLayout)與相對布局(RelativeLayout),
其實學完這兩個基本就夠用了,筆者在實際開發中用得比較多的也是這兩個,當然作為一個好學的程式猿,
都是喜歡刨根問題的,所以雖說用得不多,但是還是有必要學習一下基本的用法的,說不定哪一天能用得上呢!
你說是吧,學多點東西沒什麼的,又不吃虧！好了,扯淡就扯到這裡,開始這一節的學習吧,這一節我們會學習
Android中的第三個布局:TableLayout(表格版面配置)！

1.本節學習路線圖

路線圖分析：
從上面的路線圖,可以看出TableLayout的用法還是很簡單的,無非就是確定表格的行數,以及使用
那三個屬性來設定每一行中的第某列的元素隱藏,展開,或者收縮即可！

2.TableLayout的介紹

相信學過HTML的朋友都知道,我們可以通過< table >< tr >< td >就可以產生一個HTML的表格,
而Android中也允許我們使用表格的方式來排列組件,就是行與列的方式,就說我們這節的TableLayout!
但卻不像我們後面會講到的Android 4.0後引入的GridLayout(網格)布局一樣,直接就可以設定多少行與多少列！

3.如何確定行數與列數

• ①如果我們直接往TableLayout中添加組件的話,那麼這個組件將佔滿一行！！！
• ②如果我們想一行上有多個組件的話,就要添加一個TableRow的容器,把組件都丟到裡面！
• ③tablerow中的組件個數就決定了該行有多少列,而列的寬度由該列中最寬的儲存格決定
• ④tablerow的layout_width屬性,預設是fill_parent的,我們自己設定成其他的值也不會生效！！！
  但是layout_height預設是wrapten——content的,我們卻可以自己設定大小！
• ⑤整個表格版面配置的寬度取決於父容器的寬度(佔滿父容器本身)
• ⑥有多少行就要自己數啦,一個tablerow一行,一個單獨的組件也一行！多少列則是看tableRow中
  的組件個數,組件最多的就是TableLayout的列數

4.三個常用屬性

android:collapseColumns:設定需要被隱藏的列的序號
android:shrinkColumns:設定允許被收縮的列的列序號
android:stretchColumns:設定運行被展開的列的列序號

以上這三個屬性的列號都是從0開始算的,比如shrinkColunmns = “2”,對應的是第三列！
可以設定多個,用逗號隔開比如”0,2”,如果是所有列都生效,則用”*”號即可
除了這三個常用屬性,還有兩個屬性,分別就是跳格子以及合併儲存格,這和HTML中的Table類似:

android:layout_column=”2”:表示的就是跳過第二個,直接顯示到第三個格子處,從1開始算的!
android:layout_span=”4”:表示**合并**4個儲存格,也就說這個組件佔4個儲存格

屬性使用樣本：

①collapseColumns(隱藏列)

流程:在TableRow中定義5個按鈕後,接著在最外層的TableLayout中添加以下屬性:
android:collapseColumns = “0,2”，就是隱藏第一與第三列,代碼如下:

<TableLayout          android:id="@+id/TableLayout2"          android:layout_width="fill_parent"          android:layout_height="wrap_content"          android:collapseColumns="0,2" >          <TableRow>              <Button                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:text="one" />              <Button                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:text="two" />              <Button                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:text="three" />              <Button                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:text="four" />              <Button                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:text="five" />          </TableRow>      </TableLayout>  

運行：

②stretchColumns(展開列)

流程:在TableLayout中設定了四個按鈕,接著在最外層的TableLayout中添加以下屬性:
android:stretchColumns = “1”
設定第二列為可展開列,讓該列填滿這一行所有的剩餘空間,代碼如下:

<TableLayout        android:id="@+id/TableLayout2"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:stretchColumns="1" >        <TableRow>            <Button                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="one" />            <Button                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="two" />            <Button                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="three" />            <Button                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="four" />                     </TableRow>    </TableLayout>    

運行：

③shrinkColumns(收縮列)

步驟:這裡為了示範出效果,設定了5個按鈕和一個文字框,在最外層的TableLayout中添加以下屬性:
android:shrinkColumns = “1”
設定第二個列為可收縮列,代碼如下:

<TableLayout          android:id="@+id/TableLayout2"          android:layout_width="fill_parent"          android:layout_height="wrap_content"          android:shrinkColumns="1" >          <TableRow>              <Button                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:text="one" />              <Button                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:text="two" />              <Button                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:text="three" />              <Button                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:text="four" />              <Button                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:text="five" />              <TextView                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:text="文本XX" />          </TableRow>      </TableLayout>  

運行：

我們可以看到two這個按鈕被擠壓成條條狀,這個就是收縮,為了保證表格能適應
父容器的寬度！至於另外兩個屬性就不講解了,用法和HTML相同！有興趣的可以研究下！

5.使用執行個體

使用TableLayout來完成簡單的登入介面,運行如下:

流程解析:

①調用gravity屬性,設定為center_vertical,讓布局裡面的組件在豎直方向上置中
②將TableLayout中的第一和第四列設定為可展開
③在每個TableRow中添加兩個TextView,用於展開填滿該行,這樣可以讓表格水平置中
android:stretchColumns=”0,3” 設定為0.3，是為了讓兩邊都充滿,那麼中間部分就可以置中了

詳細代碼如下：

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

6.發現的問題

相信大家在使用這個這TableLayout的TableRow的時候會遇到這個警告:

當然,程式還是可以啟動並執行,不過或許你是強迫症患者,看到黃色驚嘆號你就不爽的話！
而解決這個警告的方法也是很奇葩的:只要你的TableLayout裡面有2個或以上的TableRow就可以了！

本節小結：

好的，關於Android的第三個布局:TableLayout就到這裡~無非就是五個屬性的使用而已，實際開發
表格版面配置我們用的不多，知道簡單的用法就可以了！

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

Android基礎入門教程——2.2.3 TableLayout(表格版面配置)