当前位置： 首页 > news >正文

Android 基础知识4-2.8 TableLayout（表格布局）详解

news 2025/9/12 0:23:08

一、TableLayout的概述

        表格布局是以行数和列数来确定位置进行排列。就像一间教室，确定好行数与列数就能让同学有序入座。

注意：我们需要先添加<TableRow容器，每添加一个就会多一行，然后再往<TableRow容器中添加其它组件。

二、TableLayout的属性

    2.1 、TableLayout(表格布局)的样式，就像是一张表格。每个TableLayout，都由多个TableRow组成，每个TableRow就是一行，有几个TableRow就有几行。TableLayout不会显示行号和列号，也没有分割线，其行数和列数都可以进行操作。
        下面是 3 (行) x 3(列) 的TableLayout基本使用，其xml布局文件table_layout.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><TableRow><Buttonandroid:id="@+id/button01"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮1" /><Buttonandroid:id="@+id/button02"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮2" /><Buttonandroid:id="@+id/button03"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮3" /></TableRow><TableRow><Buttonandroid:id="@+id/button04"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮4" /><Buttonandroid:id="@+id/button05"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮5" /><Buttonandroid:id="@+id/button06"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮6" /></TableRow><TableRow><Buttonandroid:id="@+id/button07"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮7" /><Buttonandroid:id="@+id/button08"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮8" /><Buttonandroid:id="@+id/button09"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮9" /></TableRow>
</TableLayout>

效果图：

 2.2 、TableLayout的android:shrinkColumns属性，当TableRow里边的空间布满布局的时候，指定列自动延伸以填充可用部分。当TableRow里边的控件还没有布满布局时，android:shrinkColumns不起作用。
下面的布局文件table_layout2.xml，演示了android:shrinkColumns属性的使用：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:shrinkColumns="2"><TableRow><Buttonandroid:id="@+id/button01"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮1" /><!-- android:text="按钮1AAAAAAAAAAAAAAA" --><Buttonandroid:id="@+id/button02"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮2" /><!-- android:text="按钮2AAAAAAAAAAAAAAA" --><Buttonandroid:id="@+id/button03"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮3AAAAAAAAAAAAAAA" /></TableRow><TableRow><Buttonandroid:id="@+id/button04"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮4" /><Buttonandroid:id="@+id/button05"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮5" /><Buttonandroid:id="@+id/button06"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮6" /></TableRow><TableRow><Buttonandroid:id="@+id/button07"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮7" /><Buttonandroid:id="@+id/button08"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮8" /><Buttonandroid:id="@+id/button09"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮9" /></TableRow>
</TableLayout>

效果图：

         从上面的实际效果图片可以看到，当TableLayout设置了android:shrinkColumns属性，则在TableRow中的控件如果超长的话，设置指定的列为可收缩的列。当可收缩的列太宽(内容过多)不会被挤出屏幕。当需要设置多列为可收缩时，将列序号用逗号隔开。 

 2.3 、下面的布局文件table_layout3.xml，演示了没有设置android:shrinkColumns属性，则在TableRow中的控件超长，也不会自动延伸以填充可用部分。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><TableRow><Buttonandroid:id="@+id/button01"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮1" /><!-- android:text="按钮1AAAAAAAAAAAAAAA" --><Buttonandroid:id="@+id/button02"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮2AAAAAAAAAAAAAAA" /><!-- android:text="按钮2" --><Buttonandroid:id="@+id/button03"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮3AAAAAAAAAAAAAAA" /></TableRow><TableRow><Buttonandroid:id="@+id/button04"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮4" /><Buttonandroid:id="@+id/button05"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮5" /><Buttonandroid:id="@+id/button06"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮6" /></TableRow><TableRow><Buttonandroid:id="@+id/button07"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮7" /><Buttonandroid:id="@+id/button08"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮8" /><Buttonandroid:id="@+id/button09"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮9" /></TableRow>
</TableLayout>

效果图：

 2.4、TableLayout的android:stretchColumns属性，用于指定列对空白部分进行填充。
下面的布局文件table_layout4.xml，演示了android:stretchColumns属性的使用：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:stretchColumns="1"><TableRow><Buttonandroid:id="@+id/button01"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮1"/><Buttonandroid:id="@+id/button02"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮2"/><!-- android:text="按钮2" --><Buttonandroid:id="@+id/button03"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮3"/></TableRow><TableRow><Buttonandroid:id="@+id/button04"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮4"/><Buttonandroid:id="@+id/button05"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮5"/><Buttonandroid:id="@+id/button06"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮6"/></TableRow><TableRow><Buttonandroid:id="@+id/button07"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮7"/><Buttonandroid:id="@+id/button08"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮8"/><Buttonandroid:id="@+id/button09"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮9"/></TableRow>
</TableLayout>

效果图：

 2.5、collapseColumns(隐藏列)

        流程:在TableRow中定义5个按钮后,接着在最外层的TableLayout中添加以下属性:
android:collapseColumns = “0,2”，就是隐藏第一与第三列,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:stretchColumns="1"><TableLayoutandroid:id="@+id/TableLayout2"android:layout_width="fill_parent"android:layout_height="wrap_content"android:collapseColumns="0,2"><TableRow><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="one" /><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="two" /><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="three" /><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="four" /><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="five" /></TableRow></TableLayout>
</TableLayout>

效果图：

三、使用实例

使用TableLayout来完成简单的登录界面,运行效果图如下:

流程解析:

（1）.调用gravity属性,设置为center_vertical,让布局里面的组件在竖直方向上居中
（2）.将TableLayout中的第一和第四列设置为可拉伸
（3）.在每个TableRow中添加两个TextView,用于拉伸填满该行,这样可以让表格水平居中
android:stretchColumns=”0,3” 设置为0.3，是为了让两边都充满,那么中间部分就可以居中了

 

<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:background="#FFFFFF"android:gravity="center_vertical"android:stretchColumns="0,3"><TableRow><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="用户名:" /><EditTextandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:minWidth="300dp" /></TableRow><TableRow><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="密  码:" /><EditTextandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:minWidth="300dp" /></TableRow><TableRow><Buttonandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:text="登陆" /><Buttonandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:text="退出" /></TableRow></TableLayout>

效果图：

http://www.lryc.cn/news/12505.html

相关文章：

  • SQL代码编码原则和规范
  • 【博客627】gobgp服务无损变更：graceful restart特性
  • 一起学 pixijs（1）：常见图形的绘制
  • 2023年PMP考试教材有哪些?（含pmp资料）
  • centos7防火墙工具firewall-cmd使用
  • js html过滤所有标签格式并清除所有nbsp；
  • 「技术选型」深度学习软件如何选择？
  • 加油站会员管理小程序实战开发教程13
  • Go语言Web入门之浅谈Gin框架
  • 《MySQL学习》 MySQL优化器选择如何选择索引
  • uniapp 悬浮窗（应用内、无需授权） Ba-FloatWindow2
  • MMKV与mmap：全方位解析
  • 【信息系统项目管理师】项目管理十大知识领域记忆敲出（整体范围进度）
  • 一起学 pixijs（3）：Sprite
  • 深入讲解Kubernetes架构-垃圾收集
  • Flink03: 集群安装部署
  • OCR项目实战（一）：手写汉语拼音识别（Pytorch版）
  • 【js】export default也在影响项目性能呢
  • 《软件安全》 彭国军 阅读总结
  • 深入讲解Kubernetes架构-节点与控制面之间的通信
  • 120个IT冷知识，看完就不愁做选择题了
  • Java之动态规划之机器人移动
  • seata源码-全局事务提交 服务端源码
  • C++ 模板
  • JWT安全漏洞以及常见攻击方式
  • 华为OD机试题 - 最小施肥机能效（JavaScript）
  • Python(1)变量的命名规则
  • Shiro1.9学习笔记
  • 2.5｜iot｜嵌入式Linux系统开发与应用｜第4章：Linux外壳shell脚本程序编程
  • 九龙证券|连续七周获加仓，四大行业成“香饽饽”！