Android学习|布局——TableLayout 表格布局

Android开发：TableLayout详解与示例

原创已于 2022-02-24 21:06:46 修改 · 9.3k 阅读

42 ·

CC 4.0 BY-SA版权

文章标签：

#android #学习 #java

于 2022-02-24 20:57:46 首次发布

Android 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了Android中的TableLayout布局，包括如何使用TableRow创建表格样式，以及TableLayout的常用属性如android:collapseColumns、android:stretchColumns和android:shrinkColumns的用法。此外，还探讨了子控件的属性android:layout_column和android:layout_span在调整列位置和合并列中的应用。通过示例代码展示了如何实现列的隐藏、拉伸和收缩，以及按钮在表格中的位置调整。

Android学习|布局——TableLayout 表格布局

一、概述

TableLayout ：即表格布局。

当TableLayout下面写控件、则控件占据一行的大小。(自适应一行，不留空白)

但是，想要多个组件占据一行，则配合TableRow实现

如下，设置三个button，其宽度为match_parent、按道应该不占据一行，而却一个button占了一整行

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
    android:layout_width="match_parent"/>
    
    <Button
        android:layout_width="match_parent"/>
    
    <Button
        android:layout_width="match_parent"/>
    

</TableLayout>

请添加图片描述
添加TableRow，使其成表格状

一个TableRow代表一行

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableRow>
        <Button
            android:layout_width="match_parent"
            android:text="第一列"/>

        <Button
            android:layout_width="match_parent"
            android:text="第二列"/> 
    </TableRow>

    <TableRow>
        <Button
            android:layout_width="match_parent"
            android:text="第一列"/>

        <Button
            android:layout_width="match_parent"
            android:text="第二列"/>

        <Button
            android:layout_width="match_parent"
            android:text="第三列"/>

        <Button
            android:layout_width="match_parent"
            android:text="第四列"/>

        <Button
            android:layout_width="match_parent"
            android:text="第五列"/>
    </TableRow>


	<TableRow>
        <Button
            android: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="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<!--    子控件属性设置-->
  
    <TableRow>
        <Button
            android:layout_width="match_parent"
            android:text="第一列"/>
        <Button
            android:layout_width="match_parent"
            android:text="第二列"/>
    </TableRow>

    <TableRow>
        <Button
            android:layout_width="match_parent"
            android:text="第一列"/>
        <Button
            android:layout_width="match_parent"
            android:text="第二列"/>
        <Button
            android:layout_width="match_parent"
            android:text="第三列"/>
        <Button
            android:layout_width="match_parent"
            android:text="第四列"/>
        <Button
            android:layout_width="match_parent"
            android:text="第五列"/>
    </TableRow>



    <TableRow>
        <Button
            android:layout_width="match_parent"
            android:text="第一列"/>
    </TableRow>

</TableLayout>

请添加图片描述

a、android:layout_column：显示在第几列

修改第一行的"第一列"到"第二列"位置。第一个TableRow的第一个button添加如下代码：

android:layout_column=“1”

则代码为：

<Button
            android:layout_width="match_parent"
            android:layout_column="1"
            android:text="第一列"/>

请添加图片描述

b、android:layout_span：横向跨几列

刚刚基础上，设置第一行的"第二列"占据两列，添加如下代码

android:layout_span=“2”

<Button
            android:layout_width="match_parent"
            android:layout_span="2"
            android:text="第二列"/>

请添加图片描述