首页 > 移动开发 > android布局——TableLayout(表格布局)详解

android布局——TableLayout(表格布局)详解

表格布局(TableLayout)

前言

表格布局采用行和列的方式来管理UI组件,但不像Android 4.0 新增的网格布局,直接设置行列数

如果我们直接向TableLayout添加组件的话,那么这个组件将独占一行

如果要让多个组件在同一行的话,那么我们要添加一个TableRow的容器,用于存储这些组件

而这些组件的数目也决定了该行有多少列

列的宽度由该列中最宽的单元格决定

整个表格布局的宽度则取决于父容器的宽度(占满父容器本身)

三个常用的属性

android:collapseColumns:设置需要被隐藏的列的序号

android:shrinkColumns:设置允许被收缩的列的列序号

android:stretchColumns:设置运行被拉伸的列的列序号

注意:

!!!!!!!!序号是从0开始的,可以同时设置多个列,用逗号","分隔即可

这些属性要写在TableLayout中哦!

下面依次演示下每个属性设置以后的效果:

①collapseColumns(隐藏列)

步骤:在TableRow中先定义了5个按钮,接着在最外层的TableLayout中添加以下属性:

android:collapseColumns = "0,2" 

隐藏第一和第三列

代码如下:

[html] view plaincopy在CODE上查看代码片派生到我的代码片

  1. <TableLayout  
  2.     android:id="@+id/TableLayout2"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="wrap_content"  
  5.     android:collapseColumns="0,2" >  
  6.   
  7.     <TableRow  
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="wrap_content" >  
  10.   
  11.         <Button  
  12.             android:layout_width="wrap_content"  
  13.             android:layout_height="wrap_content"  
  14.             android:text="one" />  
  15.   
  16.         <Button  
  17.             android:layout_width="wrap_content"  
  18.             android:layout_height="wrap_content"  
  19.             android:text="two" />  
  20.   
  21.         <Button  
  22.             android:layout_width="wrap_content"  
  23.             android:layout_height="wrap_content"  
  24.             android:text="three" />  
  25.   
  26.         <Button  
  27.             android:layout_width="wrap_content"  
  28.             android:layout_height="wrap_content"  
  29.             android:text="four" />  
  30.   
  31.         <Button  
  32.             android:layout_width="wrap_content"  
  33.             android:layout_height="wrap_content"  
  34.             android:text="five" />  
  35.              
  36.     </TableRow>  
  37. </TableLayout>  


效果图:

代码解释:

如图,第一和第三列不见了,其实仅仅是被隐藏了而已,还是可以在代码中进行调用的

②stretchColumns(拉伸列)

步骤:在TableLayout中设置了四个按钮,接着在最外层的TableLayout中添加以下属性:

android:stretchColumns = “1”

设置第二列为可拉伸列,让该列填满这一行所有的剩余空间

代码如下:

[html] view plaincopy在CODE上查看代码片派生到我的代码片

  1. <TableLayout  
  2.     android:id="@+id/TableLayout2"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="wrap_content"  
  5.     android:stretchColumns="1" >  
  6.   
  7.     <TableRow  
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="wrap_content" >  
  10.   
  11.         <Button  
  12.             android:layout_width="wrap_content"  
  13.             android:layout_height="wrap_content"  
  14.             android:text="one" />  
  15.   
  16.         <Button  
  17.             android:layout_width="wrap_content"  
  18.             android:layout_height="wrap_content"  
  19.             android:text="two" />  
  20.   
  21.         <Button  
  22.             android:layout_width="wrap_content"  
  23.             android:layout_height="wrap_content"  
  24.             android:text="three" />  
  25.   
  26.         <Button  
  27.             android:layout_width="wrap_content"  
  28.             android:layout_height="wrap_content"  
  29.             android:text="four" />  
  30.   
  31.              
  32.     </TableRow>  
  33. </TableLayout>  


效果图:

代码解释:

如图,第二列填满了这行剩下的所有空间

③shrinkColumns(收缩列)

步骤:这里为了演示出效果,设置了5个按钮和一个文本框,在最外层的TableLayout中添加以下属性:

android:shrinkColumns =  "1"

设置第二个列为可收缩列

代码如下:

[html] view plaincopy在CODE上查看代码片派生到我的代码片

  1. <TableLayout  
  2.     android:id="@+id/TableLayout2"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="wrap_content"  
  5.     android:shrinkColumns="1" >  
  6.   
  7.     <TableRow  
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="wrap_content" >  
  10.   
  11.         <Button  
  12.             android:layout_width="wrap_content"  
  13.             android:layout_height="wrap_content"  
  14.             android:text="one" />  
  15.   
  16.         <Button  
  17.             android:layout_width="wrap_content"  
  18.             android:layout_height="wrap_content"  
  19.             android:text="two" />  
  20.   
  21.         <Button  
  22.             android:layout_width="wrap_content"  
  23.             android:layout_height="wrap_content"  
  24.             android:text="three" />  
  25.   
  26.         <Button  
  27.             android:layout_width="wrap_content"  
  28.             android:layout_height="wrap_content"  
  29.             android:text="four" />  
  30.   
  31.         <Button  
  32.             android:layout_width="wrap_content"  
  33.             android:layout_height="wrap_content"  
  34.             android:text="five" />  
  35.           
  36.         <TextView   
  37.             android:layout_height="wrap_content"  
  38.             android:layout_width="wrap_content"  
  39.             android:text="文本"                  
  40.             />  
  41.              
  42.     </TableRow>  
  43. </TableLayout>  


效果图:

代码解释:

第二列,明显给压得不成人样= =,这个就是收缩,为了保证表格能够适应父容器的宽度

以上就是TableLayout表格布局比较常用的三个属性了

应用实例:

下面演示下用TableLayout布局实现用户登陆界面的布局

效果图:

流程解释:

①调用gravity属性,设置为center_vertical,让布局里面的组件在竖直方向上居中

②将TableLayout中的第一和第四列设置为可拉伸

③在每个TableRow中添加两个TextView,用于拉伸填满该行,这样可以让表格水平居中

自己想想为什么= =,很简单呢

代码如下:

[html] view plaincopy在CODE上查看代码片派生到我的代码片

  1. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:id="@+id/TableLayout1"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     tools:context=".MainActivity"   
  7.     android:stretchColumns="0,3"  
  8.     android:gravity="center_vertical"  
  9.     android:background="#FFD700"  
  10.     >  
  11.       
  12.     <TableRow>  
  13.         <TextView />  
  14.         <TextView   
  15.             android:layout_width="wrap_content"  
  16.             android:layout_height="wrap_content"  
  17.             android:text="用户名:"      
  18.         />  
  19.         <EditText   
  20.             android:layout_width="wrap_content"  
  21.             android:layout_height="wrap_content"  
  22.             android:minWidth="150dp"      
  23.         />  
  24.         <TextView />  
  25.     </TableRow>  
  26.       
  27.     <TableRow>  
  28.         <TextView />  
  29.         <TextView   
  30.             android:layout_width="wrap_content"  
  31.             android:layout_height="wrap_content"  
  32.             android:text="密  码:"      
  33.         />  
  34.         <EditText   
  35.             android:layout_width="wrap_content"  
  36.             android:layout_height="wrap_content"  
  37.             android:minWidth="150dp"      
  38.         />  
  39.         <TextView />  
  40.     </TableRow>  
  41.       
  42.     <TableRow>  
  43.         <TextView />  
  44.         <Button   
  45.             android:layout_width="wrap_content"  
  46.             android:layout_height="wrap_content"  
  47.             android:text="登陆"      
  48.         />  
  49.         <Button  
  50.             android:layout_width="wrap_content"  
  51.             android:layout_height="wrap_content"  
  52.             android:text="退出"     
  53.         />  
  54.         <TextView />  
  55.     </TableRow>  
  56.       
  57. </TableLayout>  



好吧,TableLayout的相关属性的应用就介绍到这里


本文固定链接: http://www.devba.com/index.php/archives/5272.html | 开发吧

报歉!评论已关闭.