[Android] TableLayout 的使用法

目前最喜歡用 TableLayout, 不過, 直覺使用時有些並不符合我的期待, 因此研究一下這個Layout 使用法。 分為兩部份, 第一部份是 Android Reference 裡的內容, 第二部份是 Api Demo 裡的實作。

Android Reference :  TableLayout

HightLight Principles

1 .  Table 有 row & column 。  column 可以 Span (像 HTML  )
2.  Column 寬度的定義是 - 所有 row 裡有著最寬的cell的那個column 的寬度。
3. Table 總寬度就是他的 container 的寬度, Table 的 children 寬度必須是MATCH_PARENT, 但高度可以是其它, 像 TableRow default 就是 WRAP_CONTENT

4.  TableLayout 可以設定特定 Column 是 shrinkable 與stretchable (兩者可同時存在)
5.  Shrinkable 就是說 column width 可以減縮到讓 table 放在他的 parent object 裡 (感覺好偉大 www)
6. Stretchable  就是說  column 可以延展自己的寬度把空白填滿
7. 如果要隱藏column 用 Collapse
8. Column - number ,  Cell ( ie. view object)  可以設定 column-number 如果不自訂的化系統會幫忙定   以 increase +1 的方法. Column number 是從 0 開始的
9. 如果你的view object 不放在 Table row 裡, layout會把這個 view 當作一個 row 來看 (span all columns)

ApiDemo 解析 : 

Api TableLayout Demo 06. More spanning and stretchable (學習  Column Number / Stretch  )

以上Layout 解析為下圖 綠色字為 column , 紅色字為row ( Row 4 & 7 並不放在 TableRow 裡, 如 HightLight 9)  (編碼有點錯誤, row 1 在 program 裡應該是 Row 0 , 以此類推) 

現在讓我們還原一下, 如果啥麼參數都沒加, 只是把View 放進去TableRow 會是怎麼樣!?  (但 Column 2 的Gravity 已設為 right)

如上圖所示, open/save/Save As/Quit 對到了  X  , 要如何把這些與Import 與Export 對齊呢 ?   使用 column number 的設定。 ( Hightlight 8 對照一下)
把  open/save/Save As/Quit  都加入這個參數

   <TextView
            android:layout_column="1"
            android:text="@string/table_layout_6_save"
            android:padding="3dip" />


加入這行後layout 變成了這樣 open/save/Save As/Quit  & Import/Export 就對齊了!

接下來就要把Column 2放到最右邊, 該用啥麼方法呢? 這邊使用的方法就是Stretch。 參照Hightlight 6  - column 可以延展自己的寬度把空白填滿。 那倒底哪一個 column 要延展呢? 筆者使用過 column 1  或是 column 2 都可以得到同樣的效果。(API Demo 是使用 column 1 ) 

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:stretchColumns="1" >

以上為  Api TableLayout Demo 06 的分析 --- Column Number / Strech  的應用 

Api TableLayout Demo 09. Toggle Shrink   (學習 Shrink  的應用 )

按下 Toggle Shrink Button 後 原本被剪掉的長文字與 short- Cut 都顯示出來了

我們來看一下, 與原始的xml 對應的 Graphic , 最右邊有一個藍色框框其實是 shortcut 的cell , 

因為row4 太長所以被推擠到超出 screen 

當使用者按下 Toggle Shrink button 後 program 動態設定 shrinkable 

 table.setColumnShrinkable(0, mShrink);

筆者使用靜態的方法將shrink column 設 0 後得到同樣的效果

 <TableLayout

            android:id="@+id/menu"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:shrinkColumns="0" >

筆者對 shrink 的理解就是 - 不管怎樣都要塞進 parent 裡面。(www) 定義還是請看 highlight 5 吧! 

以上為  Api TableLayout Demo 09 的分析 --- Shrink  的應用 

Api TableLayout Demo 12: Cell Spanning  的分析 --- (學習 Span 應用)

紅色與綠色數字是外加的, 方便看 row 與 column

以上 Layout 總共有 3 個 column , Row 2 (注意: Program 裡是 Row 1 )  的 D 占了兩個 column 是使用 span 的方式。

  <TextView
            android:text="@string/table_layout_12_d"
            android:layout_span="2"
            android:gravity="center_horizontal"
            android:background="#FF0000FF"
            android:padding="3dip" />


同樣的Row4的 BB 也是 span 了兩格

  <TextView

            android:text="@string/table_layout_12_b"

            android:layout_span="2"

            android:gravity="center_horizontal"

            android:background="#FF0000FF"

            android:padding="3dip" />

但如果中間的的 column span 2 格會怎樣呢? => column 3 的就會被踢出去了

Row 5 就是 span  了 3 格 

  <TextView

            android:text="@string/table_layout_12_g"

            android:layout_span="3"

            android:gravity="center_horizontal"

            android:background="#FFC0C0C0"

            android:padding="3dip" />

以上為  Api TableLayout Demo 12 的分析 --- span  的應用