Android学习开发之路9——TableLayout

最新推荐文章于 2025-12-03 23:19:21 发布
最新推荐文章于 2025-12-03 23:19:21 发布 · 89 阅读 · 0
文章标签：

#移动开发 #ui

本文展示了如何使用TableLayout在Android中实现表格布局，包括指定列的拉伸、收缩及隐藏效果，并通过XML代码提供了实现效果的详细示例。

TableLayout即表格布局，也就是采用行列的方式来管理UI控件，每一个TableRow代表一行，列的数目根据你添加的控件的数目来确定。且可以指定每一列的拉伸收缩。

实现效果如下：


XML代码如下：

view plain copy to clipboard print ?
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent"
  6. >
  7. <!--定义第一个表格布局，指定第2列允许收缩，第3列允许拉伸-->
  8. <TableLayoutandroid:id="@+id/TableLayout01"
  9. android:layout_width="fill_parent"
  10. android:layout_height="wrap_content"
  11. android:shrinkColumns="1"
  12. android:stretchColumns="2"
  13. >
  14. <!--直接添加按钮，它自己会占一行-->
  15. <Buttonandroid:id="@+id/ok1"
  16. android:layout_width="wrap_content"
  17. android:layout_height="wrap_content"
  18. android:text="独自一行的按钮"
  19. />
  20. <!--添加一个表格行-->
  21. <TableRow>
  22. <!--为该表格行添加3个按钮-->
  23. <Buttonandroid:id="@+id/ok2"
  24. android:layout_width="wrap_content"
  25. android:layout_height="wrap_content"
  26. android:text="普通按钮"
  27. />
  28. <Buttonandroid:id="@+id/ok3"
  29. android:layout_width="wrap_content"
  30. android:layout_height="wrap_content"
  31. android:text="允许被收缩的按钮"
  32. />
  33. <Buttonandroid:id="@+id/ok4"
  34. android:layout_width="wrap_content"
  35. android:layout_height="wrap_content"
  36. android:text="允许被拉伸的按钮"
  37. />
  38. </TableRow>
  39. </TableLayout>
  40. <!--定义第二个表格布局，指定第二列隐藏-->
  41. <TableLayoutandroid:id="@+id/TableLayout01"
  42. android:layout_width="fill_parent"
  43. android:layout_height="wrap_content"
  44. android:collapseColumns="1"
  45. >
  46. <!--直接添加按钮，它自己会占一行-->
  47. <Buttonandroid:id="@+id/ok5"
  48. android:layout_width="wrap_content"
  49. android:layout_height="wrap_content"
  50. android:text="独自一行的按钮"
  51. />
  52. <!--定义一个表格行-->
  53. <TableRow>
  54. <!--为该表格行添加3个按钮-->
  55. <Buttonandroid:id="@+id/ok6"
  56. android:layout_width="wrap_content"
  57. android:layout_height="wrap_content"
  58. android:text="普通按钮1"
  59. />
  60. <Buttonandroid:id="@+id/ok7"
  61. android:layout_width="wrap_content"
  62. android:layout_height="wrap_content"
  63. android:text="被隐藏的按钮"
  64. />
  65. <Buttonandroid:id="@+id/ok8"
  66. android:layout_width="wrap_content"
  67. android:layout_height="wrap_content"
  68. android:text="普通按钮3"
  69. />
  70. </TableRow>
  71. </TableLayout>
  72. <!--定义第三个表格布局，指定第2、3两列可以被拉伸-->
  73. <TableLayoutandroid:id="@+id/TableLayout01"
  74. android:layout_width="fill_parent"
  75. android:layout_height="wrap_content"
  76. android:stretchColumns="1,2"
  77. >
  78. <!--直接添加按钮，它自己会占一行-->
  79. <Buttonandroid:id="@+id/ok9"
  80. android:layout_width="wrap_content"
  81. android:layout_height="wrap_content"
  82. android:text="独自一行的按钮"
  83. />
  84. <!--定义一个表格行-->
  85. <TableRow>
  86. <!--为该表格行添加3个按钮-->
  87. <Buttonandroid:id="@+id/ok10"
  88. android:layout_width="wrap_content"
  89. android:layout_height="wrap_content"
  90. android:text="普通按钮"
  91. />
  92. <Buttonandroid:id="@+id/ok11"
  93. android:layout_width="wrap_content"
  94. android:layout_height="wrap_content"
  95. android:text="允许被拉伸的按钮"
  96. />
  97. <Buttonandroid:id="@+id/ok12"
  98. android:layout_width="wrap_content"
  99. android:layout_height="wrap_content"
  100. android:text="允许被拉伸的按钮"
  101. />
  102. </TableRow>
  103. <!--定义一个表格行-->
  104. <TableRow>
  105. <!--为该表格行添加2个按钮-->
  106. <Buttonandroid:id="@+id/ok13"
  107. android:layout_width="wrap_content"
  108. android:layout_height="wrap_content"
  109. android:text="普通按钮"
  110. />
  111. <Buttonandroid:id="@+id/ok14"
  112. android:layout_width="wrap_content"
  113. android:layout_height="wrap_content"
  114. android:text="允许被拉伸的按钮"
  115. />
  116. </TableRow>
  117. </TableLayout>
  118. </LinearLayout>

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <!-- 定义第一个表格布局，指定第2列允许收缩，第3列允许拉伸 --> <TableLayout android:id="@+id/TableLayout01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:shrinkColumns="1" android:stretchColumns="2" > <!-- 直接添加按钮，它自己会占一行 --> <Button android:id="@+id/ok1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="独自一行的按钮" /> <!-- 添加一个表格行 --> <TableRow> <!-- 为该表格行添加3个按钮 --> <Button android:id="@+id/ok2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="普通按钮" /> <Button android:id="@+id/ok3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="允许被收缩的按钮" /> <Button android:id="@+id/ok4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="允许被拉伸的按钮" /> </TableRow> </TableLayout> <!-- 定义第二个表格布局 ，指定第二列隐藏--> <TableLayout android:id="@+id/TableLayout01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:collapseColumns="1" > <!-- 直接添加按钮，它自己会占一行 --> <Button android:id="@+id/ok5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" 独自一行的按钮 " /> <!--定义一个表格行--> <TableRow> <!-- 为该表格行添加3个按钮 --> <Button android:id="@+id/ok6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="普通按钮1" /> <Button android:id="@+id/ok7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="被隐藏的按钮" /> <Button android:id="@+id/ok8" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="普通按钮 3" /> </TableRow> </TableLayout> <!-- 定义第三个表格布局 ，指定第2、3两列可以被拉伸--> <TableLayout android:id="@+id/TableLayout01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:stretchColumns="1,2" > <!-- 直接添加按钮，它自己会占一行 --> <Button android:id="@+id/ok9" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="独自一行的按钮" /> <!--定义一个表格行--> <TableRow> <!-- 为该表格行添加3个按钮 --> <Button android:id="@+id/ok10" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="普通按钮" /> <Button android:id="@+id/ok11" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="允许被拉伸的按钮" /> <Button android:id="@+id/ok12" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="允许被拉伸的按钮" /> </TableRow> <!--定义一个表格行--> <TableRow> <!-- 为该表格行添加2个按钮 --> <Button android:id="@+id/ok13" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="普通按钮" /> <Button android:id="@+id/ok14" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="允许被拉伸的按钮" /> </TableRow> </TableLayout> </LinearLayout>

源码资料下载：

Android 应用功能150多个实例源码

iteye_3158
关注
Android布局系列（六）：TableLayout 表格布局的使用
weixin_39339407的博客
03-10 1536
通过这篇博客，我们了解了如何使用 TableLayout 来构建一个简单而清晰的登录页面。TableLayout 为我们提供了一种按行列方式排列控件的便捷方法，使得界面布局更加整洁，且易于管理。无论是在简单的表单界面，还是在需要精确对齐的复杂布局中，TableLayout 都能够发挥出色的作用。掌握了 TableLayout 的使用技巧后，您可以在 Android 开发中更高效地处理各种 UI 布局需求。
Android学习|布局——TableLayout 表格布局
weixin_52551903的博客
02-24 9388
Android学习|布局——TableLayout 表格布局一、概述二、常见属性4、子控件设置属性 一、概述 TableLayout ：即表格布局。 当TableLayout下面写控件、则控件占据一行的大小。(自适应一行，不留空白) 但是，想要多个组件占据一行，则配合TableRow实现 二、常见属性 1、android:collapseColumns：设置需要被隐藏的列的序号，从o开始 2、android:stretchColumns：设置允许被拉伸的列的列序号，从o开始 3、android:shrin
Android Studio开发学习（六）———TableLayout(表格布局)、FrameLayout(帧布局)
m0_73391179的博客
04-07 5157
前面已经学习了平时实际开发中用得较多的线性布局(LinearLayout)与相对布局(RelativeLayout), 其实学完这两个基本就够用了,小编在实际开发中用得比较多的也是这两个,虽说用得不多,但是还是有必要学习一下基本的用法的,说不定哪一天能用得上呢!你说是吧,学多点东西没什么的,又不吃亏！TableLayout(表格布局)一
android layout布局框架图,Android开发之路——Android的布局初步2——TableLayout布局...
weixin_42128015的博客
05-26 88
TableLayout的布局大致上和LinearLayout有一定的类似的地方，但是两者的不同也可想而知，有做过开发经验的朋友们肯定对Table不会很陌生吧，这里的TableLayout其实也是一个类似的Layout，在手机上显示的模式跟网站的有些类似。下面我先把显示的图和代码贴上来，然后对比较重要的代码进行一些解释。上面是显示的图，从上面的图可以看出来显示的是一个两行一列的表格。相关阅读：下面是...
9 表格布局——TableLayout
MC 的技术空间
09-01 910
学完了 Android 两个经典布局，是不是觉得已经可以应对大多数场景了？我记得当我学完 LinearLayout 和 RelativeLayout 之后，我觉得 UI 布局已经可以出师了，在本人从事了多年的 Android 研究之后，可以很负责任的告诉你，的确可以出师了。大多数场景都可以通过这两个布局方式组合出来，不过光靠这两招出师可能会走不少弯路，因为 Google 还为我们提供了很多实用的 Layout，比如今天要学的 TableLayout，它是一种表格样式，在很多 App 里面都会用到。当然你完全
Android布局深究(三)——TableLayout(表格布局)
qq_35149975的博客
11-27 1532
Android布局深究系列文章目录 Android布局深究(一)——LinearLayout(线性布局) Android布局深究(二)——RelativeLayout(相对布局) Android布局深究(三)——TableLayout(表格布局) Android布局深究(四)——FrameLayout(帧布局)(暂定) Android布局深究(五)——GridLayout(网格布局)(暂定) Android布局深究(六)——AbsoluteLayout(绝对布局)(暂定) 文章目录Android布局深究系
Android Studio简易计算器1——使用TableLayout表格布局
云间月呀
03-24 4628
一、开发环境 （1）Android Studio （2）夜神模拟器7.0.2.2 二、activity_main.xml <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_con
Android计算器界面的设计——表格布局TableLayout实操
学无止境，止于至善
07-07 1518
5）将4个Button拖入第2行，Button的宽度高度属性均设置为match_parent，android:textSize设置为"34sp"，第3行、第4行、第5行同样也是这样处理，第6行只需拖入3个Button，但第1个Button需要占据2列，设置其android:layout_span=“2”。3）将Palette区的TableRow拖到Component Tree，并设置TableRow的属性android:layout_weight=“1”，使这5行平分整个屏幕，如图2、图3所示。
android学习——TableLayout表格布局
weixin_30613433的博客
03-13 104
　TableLayout表格布局 　　TableLayout是指将子元素的位置分配到行或列中。Android的一个TableLayout有许多TableRow组成，每一个TableRow都会定义一个Row。TableLayout容器不会显示Row，Column，及Cell的边框线，每个Row拥有0个或多个Cell，每个Cell拥有一个View对象。 　　在使用tablelayout时，应注意每...
Android开发笔记 TableLayout常用的属性介绍
01-05
把android:collapseColumns=0,2————–》意思是把第0和第2列去掉，如下图： android:shrinkColumns：以第0行为序，自动延伸指定的列填充可用部分： 当LayoutRow里面的控件还没有布满布局时，shrinkColumns不起...
Android开发——布局方式Demo源码
08-09
Android布局详解实例，包含：线性布局(LinearLayout)、相对布局(RelativeLayout)、帧布局(FrameLayout)、表格布局(TableLayout)四大布局方式的demo
老王讲IT：Android应用开发第九章
m0_73193414的博客
01-26 1248
这节课我们来学习tablelayout 表格布局 ，对于学习android来说我们还是直接上代码来看它的效果是什么样子的。（创建一个项目）
Flutter使用VS Code打包app
u010112509的博客
12-03 239
本文介绍了Flutter开发环境的完整配置流程。首先在VSCode中安装Flutter和Dart插件，下载Flutter镜像源并配置环境变量。接着安装Android Studio及对应SDK，配置Java和Android相关环境变量。最后详细说明了创建Flutter项目、修改gradle源以及打包APK的具体步骤，包括设置本地gradle路径和构建release版本APK的命令。整个配置过程涵盖了从开发工具安装到项目构建的全流程。
【Android逆向工程】第19章：协议分析与接口还原
w987333120的博客
12-03 353
本文介绍了网络协议分析的关键技术与工具。主要内容包括HTTP/HTTPS协议分析流程、常用抓包工具配置（Charles/Burp Suite）、协议格式解析方法以及签名算法还原技术。通过示例展示了完整的请求/响应分析过程，涵盖请求行、请求头、请求体的解析方法，特别关注签名相关字段的识别。文章还提供了Python代码示例演示如何自动分析HTTP请求结构，帮助逆向工程师理解业务逻辑、还原接口签名算法并实现自动化脚本。
鸿蒙分布式能力与Flutter集成：Flutter三方库鸿蒙适配实践
nanxuan521的专栏
12-03 547
// 设备信息模型});?'',?'Unknown',?'unknown',?false,/// 分布式设备发现插件/// 初始化插件并开始监听设备发现/// [serviceId]：用于发现的业务标识符try {/// 获取当前已发现的设备列表try {return [];/// 在设备间发起一个认证请求（例如，建立连接前的安全握手）try {/// 停止发现并释放资源try {// 在Flutter应用中的使用示例/*
使用 adb shell 命令检查手机上 App的APK大小
最新发布
Simon的专栏
12-03 250
在 Android 开发或测试过程中，有时我们需要快速获取已安装应用在设备上的实际 APK 文件大小，而无需连接 Android Studio 或使用其他复杂工具。确保你的电脑已经安装了 Android Debug Bridge (ADB) 工具，并且已通过 USB 连接线将手机与电脑连接，并开启了 USB 调试模式。命令并结合应用的包名，来获取 APK 文件在设备存储中的绝对路径。（用于显示详细信息）和上一步得到的完整路径，来查看文件的大小。首先，你需要知道你想要查询的应用的准确包名。
如何将照片从 Mac 传输到 Android
Digitally的博客
12-03 433
将照片从 Mac 传输到 Android 手机或平板电脑有时会感觉像是跨越数字鸿沟。由于 Mac 和 Android 运行在不同的生态系统中，直接拖放的方法行不通。如果您想将照片从 Mac 传输到 Android，可以尝试本指南中介绍的有效方法，这些方法可以高质量地传输照片。
构建生产级应用：Flutter + OpenHarmony 的工程化实践与 CI/CD 体系搭建
2501_93573294的博客
11-30 1024
构建生产级应用：Flutter + OpenHarmony 的工程化实践与 CI/CD 体系搭建
OpenHarmony 后台任务与 Flutter 生命周期协调：构建稳定可靠的混合应用
2502_93572233的博客
11-30 1304
本文探讨了在OpenHarmony生态中协调Flutter应用生命周期的策略。OpenHarmony的Ability生命周期模型与Flutter原生设计存在差异，可能导致后台资源浪费、任务异常终止等问题。文章提出了双向生命周期同步方案，通过MethodChannel建立OpenHarmony与Flutter的通信机制：当应用进入后台时触发Flutter任务暂停，返回前台时恢复任务。实践部分展示了在OpenHarmony端监听生命周期事件并通知Flutter，以及在Flutter端接收通知管理任务的完整代码实
基于TABLELAYOUT实现Android表格布局
其中，“XML布局”表明该实现主要依赖于Android的声明式布局文件（.xml），而非完全通过Java或Kotlin代码动态生成，这符合Android开发的最佳实践——将UI结构与逻辑分离，提升可维护性和可视化编辑能力。同时，...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值