一、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="/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="/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="/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="/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="/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="/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>
效果图:
如果觉得《Android 基础知识4-2.8 TableLayout(表格布局)详解》对你有帮助,请点赞、收藏,并留下你的观点哦!