Android学习|布局——TableLayout 表格布局
一、概述二、常见属性4、子控件设置属性三、Demo1、android:collapseColumns2、android:stretchColumns3、android:shrinkColumns4、子控件设置属性a、android:layout_column:显示在第几列b、android:layout_span:横向跨几列一、概述
TableLayout :即表格布局。
当TableLayout下面写控件、则控件占据一行的大小。(自适应一行,不留空白)
但是,想要多个组件占据一行,则配合TableRow实现
如下,设置三个button,其宽度为match_parent、按道应该不占据一行,而却一个button占了一整行
<?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><Buttonandroid:layout_width="match_parent"/><Buttonandroid:layout_width="match_parent"/><Buttonandroid:layout_width="match_parent"/></TableLayout>
添加TableRow,使其成表格状
一个TableRow代表一行
<?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><TableRow><Buttonandroid:layout_width="match_parent"android:text="第一列"/><Buttonandroid:layout_width="match_parent"android:text="第二列"/> </TableRow><TableRow><Buttonandroid:layout_width="match_parent"android:text="第一列"/><Buttonandroid:layout_width="match_parent"android:text="第二列"/><Buttonandroid:layout_width="match_parent"android:text="第三列"/><Buttonandroid:layout_width="match_parent"android:text="第四列"/><Buttonandroid:layout_width="match_parent"android:text="第五列"/></TableRow><TableRow><Buttonandroid:layout_width="match_parent"android:text="第一列"/></TableRow></TableLayout>
二、常见属性
1、android:collapseColumns:设置需要被隐藏的列的序号,从o开始
2、android:stretchColumns:设置允许被拉伸的列的列序号,从o开始
3、android:shrinkColumns:设置允许被收缩的列的列序号,从o开始
4、子控件设置属性
a、android:layout_column:显示在第几列
b、android:layout_span:横向跨几列(占据几列)。
TableLayout只能通过android:layout_span设置其占据几列(列合并),而不能进行 行的合并,要进行 行的合并,也使用GridLayout布局。
三、Demo
1、android:collapseColumns
设置需要被隐藏的列的序号,从0开始。
上方代码中最外层的TableLayout添加下面属性
android:collapseColumns=“0”
可以看出:原来“第一列”的button被隐藏
2、android:stretchColumns
设置允许被拉伸的列的列序号,从o开始
前面的显示可以看出,现在第五列右边有多余空间,调整使其到边界,最外层的TableLayout添加下面属性:
android:stretchColumns=“4”
可以看出:右边已被“第五列”button占满
3、android:shrinkColumns
设置允许被收缩的列的列序号,从o开始
最前面的“二”标题(刚添加TableRow),“第五列“部分显示在外面,添加以下代码:
android:shrinkColumns=“4”
"第五列"未超出屏幕了。
4、子控件设置属性
原来代码
<?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><!-- 子控件属性设置--><TableRow><Buttonandroid:layout_width="match_parent"android:text="第一列"/><Buttonandroid:layout_width="match_parent"android:text="第二列"/></TableRow><TableRow><Buttonandroid:layout_width="match_parent"android:text="第一列"/><Buttonandroid:layout_width="match_parent"android:text="第二列"/><Buttonandroid:layout_width="match_parent"android:text="第三列"/><Buttonandroid:layout_width="match_parent"android:text="第四列"/><Buttonandroid:layout_width="match_parent"android:text="第五列"/></TableRow><TableRow><Buttonandroid:layout_width="match_parent"android:text="第一列"/></TableRow></TableLayout>
a、android:layout_column:显示在第几列
修改第一行的"第一列"到"第二列"位置。第一个TableRow的第一个button添加如下代码:
android:layout_column=“1”
则代码为:
<Buttonandroid:layout_width="match_parent"android:layout_column="1"android:text="第一列"/>
b、android:layout_span:横向跨几列
刚刚基础上,设置第一行的"第二列"占据两列,添加如下代码
android:layout_span=“2”
<Buttonandroid:layout_width="match_parent"android:layout_span="2"android:text="第二列"/>
如果觉得《Android学习|布局——TableLayout 表格布局》对你有帮助,请点赞、收藏,并留下你的观点哦!