TableLayout ( 表格布局 )

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

TableLayout 的主要属性

属性 说明
android:collapseColumns 设置需要 被隐藏 的列的序号
android:shrinkColumns 设置允许 被收缩 的列的列序号
android:stretchColumns 设置运行 被拉伸 的列的列序号
  1. 这三个属性的列号都是 从0开始算 的,比如 shrinkColunmns = "2" 对应的是第三列

  2. 可以 设置多个 ,用 逗号(,)隔开 比如"0,2", 如果是所有列 都生效 ,则 用"*"号

  3. TableLayout 里面的子控件可以为 TableRow 或者其它 View,但是其子控件的 android:layout_width 属性被系统固定为 match_parent

  4. TableLayout 里面所有行中某一列的宽度的最大值是这一列的宽度

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

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

TableRow 子控件的主要属性

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

TableLayout 中的行数与列数

  1. 如果我们往 TableLayout 中添加组件的话,那么这个组件将占满一行

  2. 如果要在一行上添加多个组件,就要添加一个 TableRow 的容器,把组件都丢到里面

  3. TableRow 中的组件个数就决定了该行有多少列,而列的宽度由该列中最宽的单元格决定

  4. TableRow layout_width 属性,默认是 fill_parent 的,设置成其它的值也不会生效

    但是 layout_height 默认是 wrapten-content 的,可以自己设置大小

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

  6. 有多少行就要自己数啦,一个tablerow一行,一个单独的组件也一行!多少列则是看 TableRow 中 的组件个数,组件最多的就是 TableLayout 的列数

范例

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

然后修改 activity_main.xmlTableLayout 并添加 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

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

    为什么不是三行两列?只用 TableLayout 布局的话没法处理左右两边对称的空白

  2. 登录界面距离屏幕顶端 100dp ,可以设置 android:layout_marginTop="100dp"

  3. 整个登录内容在屏幕上是垂直居中的,所以要给 TableLayout 设置属性 android:gravity="center_vertical" 让布局里面的组件在竖直方向上居中

  4. 为了保证不同的屏幕下左右两边的空白一样多,就要设置第一列和第四列为可拉伸 android:stretchColumns="0,3"

  5. 因为 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>

运行范例,显示如下

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.