1.本節(jié)學(xué)習(xí)路線圖
路線圖分析: 從上面的路線圖,可以看出TableLayout的用法還是很簡(jiǎn)單的,無(wú)非就是確定表格的行數(shù),以及使用 那三個(gè)屬性來(lái)設(shè)置每一行中的第某列的元素隱藏,拉伸,或者收縮即可!
2.TableLayout的介紹
相信學(xué)過(guò)HTML的朋友都知道,我們可以通過(guò)< table >< tr >< td >就可以生成一個(gè)HTML的表格, 而Android中也允許我們使用表格的方式來(lái)排列組件,就是行與列的方式,就說(shuō)我們這節(jié)的TableLayout! 但卻不像我們后面會(huì)講到的Android 4.0后引入的GridLayout(網(wǎng)格)布局一樣,直接就可以設(shè)置多少行與多少列郎汪!
3.如何確定行數(shù)與列數(shù)
①如果我們直接往TableLayout中添加組件的話,那么這個(gè)組件將占滿一行3嗌蕖!煞赢!
②如果我們想一行上有多個(gè)組件的話,就要添加一個(gè)TableRow的容器,把組件都丟到里面抛计!
③tablerow中的組件個(gè)數(shù)就決定了該行有多少列,而列的寬度由該列中最寬的單元格決定
④tablerow的layout_width屬性,默認(rèn)是fill_parent的,我們自己設(shè)置成其他的值也不會(huì)生效!U罩吹截! 但是layout_height默認(rèn)是wrapten——content的,我們卻可以自己設(shè)置大小凝危!
⑤整個(gè)表格布局的寬度取決于父容器的寬度(占滿父容器本身)
⑥有多少行就要自己數(shù)啦,一個(gè)tablerow一行,一個(gè)單獨(dú)的組件也一行波俄!多少列則是看tableRow中 的組件個(gè)數(shù),組件最多的就是TableLayout的列數(shù)
4.三個(gè)常用屬性
android:collapseColumns:設(shè)置需要被隱藏的列的序號(hào)
android:shrinkColumns:設(shè)置允許被收縮的列的列序號(hào)
android:stretchColumns:設(shè)置運(yùn)行被拉伸的列的列序號(hào)
以上這三個(gè)屬性的列號(hào)都是從0開始算的,比如shrinkColunmns = "2",對(duì)應(yīng)的是第三列!可以設(shè)置多個(gè),用逗號(hào)隔開比如"0,2",如果是所有列都生效,則用""號(hào)即可除了這三個(gè)常用屬性,還有兩個(gè)屬性,分別就是跳格子以及合并單元格,這和HTML中的Table類似:
android:layout_column="2":表示的就是跳過(guò)第二個(gè),直接顯示到第三個(gè)格子處,從1開始算的!android:layout_span="4":表示合并*4個(gè)單元格,也就說(shuō)這個(gè)組件占4個(gè)單元格
屬性使用示例:
①collapseColumns(隱藏列)
流程:在TableRow中定義5個(gè)按鈕后,接著在最外層的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>
運(yùn)行效果圖:
②stretchColumns(拉伸列)
流程:在TableLayout中設(shè)置了四個(gè)按鈕,接著在最外層的TableLayout中添加以下屬性: android:stretchColumns = "1"
設(shè)置第二列為可拉伸列,讓該列填滿這一行所有的剩余空間,代碼如下:
<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>
運(yùn)行效果圖:
③shrinkColumns(收縮列)
步驟:這里為了演示出效果,設(shè)置了5個(gè)按鈕和一個(gè)文本框,在最外層的TableLayout中添加以下屬性: android:shrinkColumns = "1"
設(shè)置第二個(gè)列為可收縮列,代碼如下:
<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>
運(yùn)行截圖: