TableLayout ( 表格布局 ) - Android 基础教程

TableLayout 是一种可以制作表格的布局，它和 GridLayout 的区别是 GridLayout 只能制定每一列宽度一样的表格布局，而 TableLayout 能够制定各列宽度不一样的表格布局

TableLayout 的主要属性

属性	说明
android:collapseColumns	设置需要被隐藏的列的序号
android:shrinkColumns	设置允许被收缩的列的列序号
android:stretchColumns	设置运行被拉伸的列的列序号

这三个属性的列号都是 从0开始算 的,比如 shrinkColunmns = "2" 对应的是第三列
可以 设置多个 ,用 逗号(,)隔开 比如"0,2", 如果是所有列 都生效 ,则 用"*"号
TableLayout 里面的子控件可以为 TableRow 或者其它 View，但是其子控件的 android:layout_width 属性被系统固定为 match_parent
TableLayout 里面所有行中某一列的宽度的最大值是这一列的宽度

还有两个属性,分别就是跳过格子以及合并单元格

属性	说明
android:layout_column="2"	表示的就是跳过第二个,直接显示到第三个格子处,从1开始算的
android:layout_span="4"	表示合并 4个单元格,也就说这个组件占4个单元格

TableRow 子控件的主要属性

属性	说明
android:layout_column="1"	该控件显示在第1列
android:layout_span="2"	该控件占据2列

TableLayout 中的行数与列数

如果我们往 TableLayout 中添加组件的话,那么这个组件将占满一行
如果要在一行上添加多个组件,就要添加一个 TableRow 的容器,把组件都丢到里面
TableRow 中的组件个数就决定了该行有多少列,而列的宽度由该列中最宽的单元格决定
TableRow layout_width 属性,默认是 fill_parent 的,设置成其它的值也不会生效

但是 layout_height 默认是 wrapten-content 的,可以自己设置大小
整个表格布局的宽度取决于父容器的宽度(占满父容器本身)
有多少行就要自己数啦,一个tablerow一行,一个单独的组件也一行！多少列则是看 TableRow 中的组件个数,组件最多的就是 TableLayout 的列数

范例

首先创建一个空的 Android 项目 cn.twle.android.TableLayout

然后修改 activity_main.xml 为 TableLayout 并添加 5 个按钮

<TableLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/TableLayout1"  
    android:layout_width="fill_parent"  
    android:layout_height="wrap_content">  

    <TableRow>  

        <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="二" />  

        <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="四" />  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="五" />  
    </TableRow>  
</TableLayout>

运行范例，显示结果如下

android: collapseColumns 隐藏列

然后修改最外层的 TableLayout 添加以下属性来隐藏第一与第三列

android:collapseColumns = "0,2"

修改 activity_main.xml 为以下内容

<TableLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/TableLayout1"  
    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="一" />  

        <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="三" />  

        <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="五" />  
    </TableRow>  
</TableLayout>

android:stretchColumns 拉伸列

在 TableLayout 中设置了四个按钮

修改 activity_main.xml 为以下内容

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/TableLayout1"    
    android:layout_width="fill_parent"    
    android:layout_height="wrap_content">    

    <TableRow>    

        <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="二" />    

        <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="四" />                 
    </TableRow>    
</TableLayout>

接着在最外层的 TableLayout 中添加以下属性设置第二列克拉伸，那么该列就会填满所有剩余的空间

android:stretchColumns = "1"

修改 activity_main.xml 为以下内容

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/TableLayout1"    
    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="一" />    

        <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="三" />    

        <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="四" />                 
    </TableRow>    
</TableLayout>

android:shrinkColumns 收缩列

在 TableLayout 中设置了 5 个按钮和一个文本框

修改 activity_main.xml 为以下内容

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/TableLayout1"  
    android:layout_width="fill_parent"  
    android:layout_height="wrap_content">  
    <TableRow>  
        <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="二" />  

        <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="四" />  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="五" />  

        <TextView  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="文本框" />  
    </TableRow>  
</TableLayout>

然后在最外层的 TableLayout 中添加以下属性设置第二列为可收缩列

android:shrinkColumns =  "1"

修改 activity_main.xml 添加 android:shrinkColumns = "1"

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/TableLayout1"  
    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="一" />  

        <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="三" />  

        <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  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="文本框" />  
    </TableRow>  
</TableLayout>

对前后两张图我们可以看到二这个按钮被挤压成了条状，这就是收缩，是为了保证表格能适应父容器的宽度

TableLayout 布局登录界面

为了实现 APP 的登录功能，我们可能会拿到 UI 设计师的下面这样的 UI ，这个 UI 布局可以用任何一个布局来完成，但我们这里使用 TableLayout 来完成吧

我们先来分析下这个 UI

使用 TableLayout 布局，这就是一个三行四列的表格

为什么不是三行两列？只用 TableLayout 布局的话没法处理左右两边对称的空白
登录界面距离屏幕顶端 100dp ，可以设置 android:layout_marginTop="100dp"
整个登录内容在屏幕上是垂直居中的，所以要给 TableLayout 设置属性 android:gravity="center_vertical" 让布局里面的组件在竖直方向上居中
为了保证不同的屏幕下左右两边的空白一样多，就要设置第一列和第四列为可拉伸 android:stretchColumns="0,3"
因为 TableLayout 是以自控件数量来定义列数的，所以一定要在第一列和第四列填充一些空白组件，只有 <TextView> 能胜任了

分析完成后的效果图如下

编码

修改我们的 TableLayout 项目中的 activity_main.xml 为以下内容

activity_main.xml

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    android:id="@+id/TableLayout1" 
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    android:stretchColumns="0,3"    
    android:gravity="center_vertical"  
    >    

    <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>

运行范例，显示如下