表格布局(TableLayout),呈现行列方式,无法设置列,可以设置行,行数由TableRow对象个数决定。下图中有两个TableRow元素,所以,说明表格布局中有两行。
将内容填充到行中
第一行中,添加了四个按钮组件,在组件树中也能清晰看到,右侧效果图中,四个按钮水平排列。
看到右侧还有空白,于是再增加一个按钮
增加后,发现超出界面。
解决办法1:删除新增按钮,将最后一个按钮进行拉伸
属性1:android:stretchColumns
android:stretchColumns用来设置允许被拉伸的列的列序号(列序号从0开始计数)
解决办法2:保留新增按钮,将最后一个按钮进行压缩
属性2:android:shrinkColumns
android:shrinkColumns:设置允许被收缩的列的列序号(列序号从0开始计数)
属性3:android:collapseColumns
android:collapseColumns:设置被隐藏的列的序号(列序号从0开始计数)
假设列序号为1的列需要被隐藏起来(蓝色标注)
则可以增加该属性
代码:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:collapseColumns="1">
<TableRow android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0行0列"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0行1列"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0行2列"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0行3列"/>
</TableRow>
<TableRow android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1行0列"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1行1列"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1行2列"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1行3列"/>
</TableRow>
</TableLayout>
效果:
从效果中可以看出,序列号为1的列被隐藏起来,后面的列依次往前移了位置
核心代码:在表格布局中,除了以上三个属性比较常用,还有一个常用功能:跨列
表格布局实现跨列案例
目标效果图如下:第二行中,第一个位置占据了两列的效果
具体操作:在第2行第1列上设置跨列数为2,再将第2行第2列的代码注释掉。注释掉的原因是:因为位置已经被前面一个组件占用了。
整体代码:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TableRow android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0行0列"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0行1列"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0行2列"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0行3列"/>
</TableRow>
<TableRow android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_span="2"
android:text="1行0列"/>
<!-- <Button android:layout_width="wrap_content"-->
<!-- android:layout_height="wrap_content"-->
<!-- android:text="1行1列"/>-->
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1行2列"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1行3列"/>
</TableRow>
</TableLayout>
注意:表格布局无法实现跨行。