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>

執行截圖：