Android 之 TableLayout 布局详解
TableLayout简介
•简介
Tablelayout 类以行和列的形式对控件进行管理，每一行为一个 TableRow 对象，或一个 View 控件。
当为 TableRow 对象时，可在 TableRow 下添加子控件，默认情况下，每个子控件占据一列。
当为View时，该 View 将独占一行。
•TableLayout行列数的确定
如果我们直接往TableLayout中添加组件的话，那么这个组件将占满一行；
如果我们想一行上有多个组件的话，就要添加一个 TableRow 的容器，把组件都丢到里面；
TableRow 中的组件个数就决定了该行有多少列，而列的宽度由含有最多子控件的 TableRow 决定；
TableRow 的 layout_width 属性，默认是 martch_parent 的，我们自己设置成其他的值也不会生效；
但是 layout_height 默认是 wrap_content 的，我们可以自己设置大小；
整个表格布局的宽度取决于父容器的宽度（占满父容器本身）
有多少行就要自己数啦，一个 TableRow 占一行，一个单独的 View 也占一行；
多少列则是看 TableRow 中的组件个数，组件最多的就是 TableLayout 的列数；
比如第一TableRow含2个子控件，第二个TableRow含3个，第三个TableRow含4个，那么该TableLayout的列数为4；
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
android:background="@color/teal_700"> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="测试行数，列数"
android:textSize="26sp"/>
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"> <TableRow
android:layout_height="match_parent"> <Button
android:text="(1,1)"/>
<Button
android:text="(1,2)"/>
</TableRow>
<TableRow
android:layout_height="match_parent"> <Button
android:text="(2,1)"/>
<Button
android:text="(2,2)"/>
<Button
android:text="(2,3)"/>
</TableRow>
<TableRow
android:layout_height="match_parent"> <Button
android:text="(3,1)"/>
<Button
android:text="(3,2)"/>
<Button
android:text="(3,3)"/>
<Button
android:text="(3,4)"/>
</TableRow>
<TextView
android:layout_marginLeft="5dp"
android:text="我单独占一行"
android:textSize="20sp"/>
</TableLayout>
</LinearLayout>运行效果：
行数 = 三个<TableRow> + 一个<TextView> = 4行
列数 = max{2,3,4} = 4列；
TableLayout属性详解
•简介
- android:stretchColumns : 设置运行被拉伸的列的列序号
- android:shrinkColumns : 设置允许被收缩的列的列序号
- android:collapseColumns : 设置需要被隐藏的列的序号
以上这三个属性的列号都是从 0 开始算的，比如 stretchColunmns = "2",对应的是第 3 列；
可以设置多个，用逗号隔开比如 stretchColunmns = "0,2"；
如果是所有列都生效,则用"*"号即可；
•stretchColumns
android:stretchColumns : 设置可伸展的列，该列可以向行方向伸展，最多可占据一整行。
先写出一个基础布局，在此基础上测试 strechColumns：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
android:background="@color/teal_700"> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="测试 stretchColumns 属性"
android:textSize="26sp"/> <TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:text="(1,1)"/>
<Button
android:layout_width="wrap_content"
android:text="(1,2)"/>
</TableRow> </TableLayout>
</LinearLayout>运行效果：
如图可知，这两个 Button 并没有占满整行，如何通过设置将这两个控件均匀占满整行呢？
添加语句 android:stretchColumns="0,1" ：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
android:background="@color/teal_700"> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="测试 stretchColumns 属性"
android:textSize="26sp"/> <TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="0,1">
<TableRow
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:text="(1,1)"/>
<Button
android:layout_width="wrap_content"
android:text="(1,2)"/>
</TableRow> </TableLayout>
</LinearLayout>运行效果：
当然，你也可以单独拉伸 (1,1)；
修改语句： android:stretchColumns="0" ；
运行效果：
•shrinkColumns
同样先写出一个基础布局，在此基础上测试 shrinkColumns：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
android:background="@color/teal_700"> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="测试 shrinkColumns 属性"
android:textSize="26sp"/> <TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="0"
android:shrinkColumns="2">
<TableRow
android:layout_height="match_parent">
<Button
android:id="@+id/btn_0"
android:layout_width="wrap_content"
android:text="(1,1)"/>
<Button
android:id="@+id/btn_1"
android:layout_width="wrap_content"
android:text="(1,2)"/>
<Button
android:id="@+id/btn_2"
android:layout_width="wrap_content"
android:text="(1,3)"/>
<Button
android:id="@+id/btn_3"
android:layout_width="wrap_content"
android:text="(1,4)"/>
</TableRow> </TableLayout>
</LinearLayout>可以看到，通过 android:stretchColumns="0" 将 btn_0 设置成 stretchColumns；
通过 android:shrinkColumns="2" 将 btn_2 设置成 shrinkColumns；
运行效果：
现在，我将 btn_0 设置的 Text 改为 (1,1)(1,1)(1,1)(1,1)：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
android:background="@color/teal_700"> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="测试 shrinkColumns 属性"
android:textSize="26sp"/> <TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="0"
android:shrinkColumns="2">
<TableRow
android:layout_height="match_parent">
<Button
android:id="@+id/btn_0"
android:layout_width="wrap_content"
android:text="(1,1)(1,1)(1,1)(1,1)"/>
<Button
android:id="@+id/btn_1"
android:layout_width="wrap_content"
android:text="(1,2)"/>
<Button
android:id="@+id/btn_2"
android:layout_width="wrap_content"
android:text="(1,3)"/>
<Button
android:id="@+id/btn_3"
android:layout_width="wrap_content"
android:text="(1,4)"/>
</TableRow> </TableLayout>
</LinearLayout>运行效果：
如果将 android:shrinkColumns="2" 这个语句去掉呢？
运行效果：
对比一下，是不是很容易得知 shrinkColunms 的作用？
如果不给 btn_2 设置这个属性，那么在 btn_0 拉伸的时候，将优先占用 btn_3 的空间；
如果给 btn_2 设置这个属性，那么优先占用 btn_2 的空间。
•collapseColumns
同样，还是先写出一个基础布局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
android:background="@color/teal_700"> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="测试 collapseColumns 属性"
android:textSize="26sp"/> <TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="*">
<TableRow
android:layout_height="match_parent">
<Button
android:id="@+id/btn_0"
android:layout_width="wrap_content"
android:text="(1,1)"/>
<Button
android:id="@+id/btn_1"
android:layout_width="wrap_content"
android:text="(1,2)"/>
<Button
android:id="@+id/btn_2"
android:layout_width="wrap_content"
android:text="(1,3)"/>
<Button
android:id="@+id/btn_3"
android:layout_width="wrap_content"
android:text="(1,4)"/>
</TableRow> </TableLayout>
</LinearLayout>运行效果：
在上述代码中添加语句： android:collapseColumns="1,3" ，也即是隐藏 btn_1,btn_3：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
android:background="@color/teal_700"> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="测试 collapseColumns 属性"
android:textSize="26sp"/> <TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="*"
android:collapseColumns="1,3">
<TableRow
android:layout_height="match_parent">
<Button
android:id="@+id/btn_1"
android:layout_width="wrap_content"
android:text="(1,1)"/>
<Button
android:id="@+id/btn_2"
android:layout_width="wrap_content"
android:text="(1,2)"/>
<Button
android:id="@+id/btn_3"
android:layout_width="wrap_content"
android:text="(1,3)"/>
<Button
android:id="@+id/btn_4"
android:layout_width="wrap_content"
android:text="(1,4)"/>
</TableRow> </TableLayout>
</LinearLayout>运行效果：
由图可知，虽然设置了 android:stretchColumns="*" 属性，但是btn_0,btn_2 并没有占据整个空间；
这就充分说明了 android:collapseColumns="1,3" 仅仅是让 btn_1,btn_3 隐藏了，并没有销毁；
单元格属性
•简介
- android:layout_column : 指定该单元格在第几列显示
- android:layout_span : 指定该单元格占据的列数（未指定时，为1）
•布局代码
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
android:background="@color/teal_700"> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="测试单元格属性"
android:textSize="26sp"/> <TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow>
<Button android:text="第0列"/>
<Button android:text="第1列"/>
<Button android:text="第2列"/>
</TableRow> <TableRow>
<TextView
android:layout_column="1"
android:text="我被指定在第1列"
android:textSize="15sp"
/>
</TableRow> <TableRow>
<TextView
android:layout_column="1"
android:layout_span="2"
android:text="我跨1到2列，不信你看！"
android:textSize="15sp"
/>
</TableRow>
</TableLayout> </LinearLayout>
•运行效果
Android 之 TableLayout 布局详解的更多相关文章
- [置顶] Android系统五大布局详解Layout
我们知道Android系统应用程序一般是由多个Activity组成,而这些Activity以视图的形式展现在我们面前,视图都是由一个一个的组件构成的.组件就是我们常见的Button.TextEdit等 ...
- Android系统五大布局详解Layout
我们知道Android系统应用程序一般是由多个Activity组成,而这些Activity以视图的形式展现在我们面前, 视图都是由一个一个的组件构成的.组件就是我们常见的Button.TextEdit ...
- Android LinearLayout线性布局详解
为了更好地管理Android应用的用户界面里的各组件,Android提供了布局管理器.通过使用布局管理器,Android应用图形用户界面具有良好的平台无关性.推荐使用布局管理器来管理组件的分布.大小, ...
- Android学习之基础知识六—Android四种布局详解
一.Android基本布局 布局是一种可以放置多个控件的容器,它可以按照一定规律调整内部控件的位置,而且布局内部除了可以放置控件外,还可以放置布局,实现多层布局嵌套.布局和控件.布局和布局之间的关系如 ...
- android:TableLayout表格布局详解
http://blog.csdn.net/justoneroad/article/details/6835915 这篇博文包括的内容:1.TableLayout简介2.TableLayout行列数的确 ...
- Android开发重点难点1：RelativeLayout(相对布局)详解
前言 啦啦啦~博主又推出了一个新的系列啦~ 之前的Android开发系列主要以完成实验的过程为主,经常会综合许多知识来写,所以难免会有知识点的交杂,给人一种混乱的感觉. 所以博主推出“重点难点”系列, ...
- Android布局详解之一：FrameLayout
原创文章,如有转载,请注明出处:http://blog.csdn.net/yihui823/article/details/6702273 FrameLayout是最简单的布局了.所有放在布局里的 ...
- Android 布局详解
Android 布局详解 1.重用布局 当一个布局文件被多处使用时,最好<include>标签来重用布局. 例如:workspace_screen.xml的布局文件,在另一个布局文件中被重 ...
- Android 布局学习之——Layout(布局)详解二（常见布局和布局参数）
[Android布局学习系列] 1.Android 布局学习之——Layout(布局)详解一 2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数) 3.And ...
随机推荐
- 如何使用 js 实现一个 throttle 函数
如何使用 js 实现一个 throttle 函数 原理 实现方式 "use strict"; /** * * @author xgqfrms * @license MIT * @c ...
- js & regex & var & highlight
js & regex & var & highlight let key = `ali`.toLocaleUpperCase(); let name = "阿里云计算 ...
- VAST上线后，如何提升NGK算力生态的收益和流动性？
自比特币诞生以来,"挖矿"一词就成功地步入了大众的视野,也成为了加密货币领域最重要的组成部分之一.无论是早前基于比特币和以太坊为主的算力挖矿,还是逐步进入大众视野的质押挖矿,亦或是 ...
- 云原生系列5 容器化日志之EFK
上图是EFK架构图,k8s环境下常见的日志采集方式. 日志需求 1 集中采集微服务的日志,可以根据请求id追踪到完整的日志: 2 统计请求接口的耗时,超出最长响应时间的,需要做报警,并针对性的进行调优 ...
- Dyno-queues 分布式延迟队列 之 生产消费
Dyno-queues 分布式延迟队列 之 生产消费 目录 Dyno-queues 分布式延迟队列 之 生产消费 0x00 摘要 0x01 前情回顾 1.1 设计目标 1.2 选型思路 0x02 产生 ...
- springboot学习过程随记
1.整合shiro+jwt(若忘记需结合测试代码springboot-mybatisplus-shiro-demo看) 配置比较简单 定义一个类继承AuthorizingRealm 如下: (1)pu ...
- linux系统解压命令总结
原文链接:https://www.cnblogs.com/lhm166/articles/6604852.html tar -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追 ...
- Hive实现自增序列及常见的Hive元数据问题处理
Hive实现自增序列 在利用数据仓库进行数据处理时,通常有这样一个业务场景,为一个Hive表新增一列自增字段(比如事实表和维度表之间的"代理主键").虽然Hive不像RDBMS如m ...
- 华硕主板开机无法进入BIOS
先说下本人情况,自己组装的台式机,华硕TUF B550M-Plus (wifi)的主板,CPU是锐龙 4650G(带核显),其他配件不涉及问题就不提了. 原来用独显的时候,没啥问题,开机有品牌logo ...
- 清晰图解深度分析HTTPS原理
前言 很高兴遇见你~ Https现在基本已经覆盖所有的http请求了,作为一个伟大的发明,保障了我们的通信安全.在Android中对于HTTPS其实感知不多,因为这些内容都有成熟的框架帮我们完成了,例 ...