快捷導(dǎo)航

TableLayout(表格布局)基礎(chǔ)知識(shí)點(diǎn)詳解

更新時(shí)間：2019年02月21日 11:22:09 投稿：laozhang

在本文里我們給大家分享了關(guān)于TableLayout(表格布局)的相關(guān)基礎(chǔ)知識(shí)點(diǎn)內(nèi)容，需要的朋友們學(xué)習(xí)下。

前面我們已經(jīng)學(xué)習(xí)了平時(shí)實(shí)際開(kāi)發(fā)中用得較多的線性布局(LinearLayout)與相對(duì)布局(RelativeLayout), 其實(shí)學(xué)完這兩個(gè)基本就夠用了,筆者在實(shí)際開(kāi)發(fā)中用得比較多的也是這兩個(gè),當(dāng)然作為一個(gè)好學(xué)的程序猿, 都是喜歡刨根問(wèn)題的,所以雖說(shuō)用得不多,但是還是有必要學(xué)習(xí)一下基本的用法的,說(shuō)不定哪一天能用得上呢! 你說(shuō)是吧,學(xué)多點(diǎn)東西沒(méi)什么的,又不吃虧！好了,扯淡就扯到這里,開(kāi)始這一節(jié)的學(xué)習(xí)吧,這一節(jié)我們會(huì)學(xué)習(xí) Android中的第三個(gè)布局:TableLayout(表格布局)！

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è)組件將占滿一行?。?！

②如果我們想一行上有多個(gè)組件的話,就要添加一個(gè)TableRow的容器,把組件都丟到里面！

③tablerow中的組件個(gè)數(shù)就決定了該行有多少列,而列的寬度由該列中最寬的單元格決定

④tablerow的layout_width屬性,默認(rèn)是fill_parent的,我們自己設(shè)置成其他的值也不會(huì)生效?。?！但是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開(kāi)始算的,比如shrinkColunmns = "2",對(duì)應(yīng)的是第三列！
可以設(shè)置多個(gè),用逗號(hào)隔開(kāi)比如"0,2",如果是所有列都生效,則用"*"號(hào)即可
除了這三個(gè)常用屬性,還有兩個(gè)屬性,分別就是跳格子以及合并單元格,這和HTML中的Table類似:

android:layout_column="2":表示的就是跳過(guò)第二個(gè),直接顯示到第三個(gè)格子處,從1開(kāi)始算的!
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)行截圖：

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

5.使用實(shí)例

使用TableLayout來(lái)完成簡(jiǎn)單的登錄界面,運(yùn)行效果圖如下:

流程解析:

①調(diào)用gravity屬性,設(shè)置為center_vertical,讓布局里面的組件在豎直方向上居中

②將TableLayout中的第一和第四列設(shè)置為可拉伸

③在每個(gè)TableRow中添加兩個(gè)TextView,用于拉伸填滿該行,這樣可以讓表格水平居中

android:stretchColumns="0,3" 設(shè)置為0.3，是為了讓兩邊都充滿,那么中間部分就可以居中了

詳細(xì)代碼如下：

<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.發(fā)現(xiàn)的問(wèn)題

相信大家在使用這個(gè)這TableLayout的TableRow的時(shí)候會(huì)遇到這個(gè)警告:

當(dāng)然,程序還是可以運(yùn)行的,不過(guò)或許你是強(qiáng)迫癥患者,看到黃色感嘆號(hào)你就不爽的話！而解決這個(gè)警告的方法也是很奇葩的:只要你的TableLayout里面有2個(gè)或以上的TableRow就可以了！

本節(jié)小結(jié)：

好的，關(guān)于Android的第三個(gè)布局:TableLayout就到這里~無(wú)非就是五個(gè)屬性的使用而已，實(shí)際開(kāi)發(fā)表格布局我們用的不多，知道簡(jiǎn)單的用法就可以了！感謝大家的學(xué)習(xí)和對(duì)腳本之家的支持，如果在學(xué)習(xí)中有任何問(wèn)題也可以給我們留言。

您可能感興趣的文章: