Android零基础入门第29节：善用TableLayout表格布局，事半功倍

Posted 2020-10-01 鑫鱻

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android零基础入门第29节：善用TableLayout表格布局，事半功倍相关的知识，希望对你有一定的参考价值。

前面学习了线性布局和相对布局，线性布局虽然方便，但如果遇到控件需要排列整齐的情况就很难达到要求，用相对布局又比较麻烦，为此android系统中提供了表格布局。

技术分享

一、认识TableLayout

表格布局就是让控件以表格的形式来排列控件，只要将控件放在单元格中，控件就可以整齐地排列，使用TableLayout标签。

TableLayout继承了 LinearLayout，因此它的本质依然是线性布局管理器。每次向TableLayout中添加一个TableRow，该TableRow就是一个表格行，TableRow也是容器，因此它也可以不断地添加其他组件，每添加一个子组件该表格就增加一列。如果直接向TableLayout中添加组件，那么这个组件将直接占用一行。

在表格布局中，列的宽度由该列中最宽的那个单元格决定，整个表格布局的宽度则取决于父容器的宽度（默认总是占满父容器本身）。

在表格布局管理器中，可以为单元格设置如下3种行为方式。

Shrinkable：如果某个列被设为Shrinkable，那么该列的所有单元格的宽度可以被收缩，以保证该表格能适应父容器的宽度。
Stretchable：如果某个列被设为Stretchable，那么该列的所有单元格的宽度可以被拉伸，以保证组件能完全填满表格空余空间。
Collapsed：如果某个列被设为Collapsed，那么该列的所有单元格会被隐藏。

TableLayout继承了 LinearLayout，因此它完全可以支持LinearLayout所支持的全部XML属性。除此之外，TableLayout还支持如下表所示的XML属性和相关方法。

技术分享

二、示例

接下来通过一个简单的示例程序来学习TableLayout的使用用法。

同样使用WidgetSample工程，继续使用app/main/res/layout/目录下的activity_main.xml文件，在其中填充如下代码片段：

<?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">

    <!-- 定义第一个表格布局，指定第2列允许收缩，第3列允许拉伸 -->
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:shrinkColumns="1"
        android:stretchColumns="2">
        <!-- 直接添加按钮，它自己会占一行 -->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="独自一行的按钮"/>
        <!-- 添加一个表格行 -->
        <TableRow>
            <!-- 为该表格行添加三个按钮 -->
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="普通按钮"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="收缩的按钮"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="拉伸的按钮"/>
        </TableRow>
    </TableLayout>

    <!-- 定义第2个表格布局 ，指定第2列隐藏-->
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:collapseColumns="1">
        <!-- 添加一个表格行 -->
        <TableRow>
            <!-- 为该表格行添加三个按钮 -->
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="普通按钮1"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="普通按钮2"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="普通按钮3"/>
        </TableRow>
    </TableLayout>

    <!-- 定义第3个表格布局，指定第2列和第3列可以被拉伸-->
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="1,2">
        <!--定义一个表格行-->
        <TableRow>
            <!-- 为该表格行添加三个按钮 -->
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="普通按钮" />
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="拉伸的按钮" />
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="拉伸的按钮" />
        </TableRow>
        <!--定义一个表格行-->
        <TableRow>
            <!-- 为该表格行添加两个按钮 -->
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="普通按钮" />
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="拉伸的按钮" />
        </TableRow>
    </TableLayout>
</LinearLayout>

上面页面中定义了 3个TableLayout，3个TableLayout中粗体字代码指定了它们对各列的控制行为。

第1个TableLayout,指定第2列允许收缩，第3列允许拉伸。
第2个TableLayout，指定第2列被隐藏。
第3个TableLayout,指定第2列和第3列允许拉伸。

运行程序，可以看到下图所示界面效果。

技术分享

需要注意的是TableRow不需要设置宽度layout_width和高度layoutJieight，其宽度一定是match_parent，即自动填充父容器，高度一定为wrap_content，即根据内容改变高度。但对于TableRow中的其他控件来说，是可以设置宽度和高度的，但必其须是 wrap_content 或者 fill_parent。

到此，TableLayout的示例结束，关于TableLayout的更多用法可以多动手练习。

今天就先到这里，如果有问题欢迎留言一起探讨，也欢迎加入Android零基础入门技术讨论微信群，共同成长！

此文章版权为微信公众号分享达人秀（ShareExpert）——鑫鱻所有，若转载请备注出处，特此声明！

往期总结分享：

Android零基础入门第1节：Android的前世今生

Android零基础入门第2节：Android 系统架构和应用组件那些事

Android零基础入门第3节：带你一起来聊一聊Android开发环境

Android零基础入门第4节：正确安装和配置JDK, 高富帅养成第一招

Android零基础入门第5节：善用ADT Bundle, 轻松邂逅女神

Android零基础入门第6节：配置优化SDK Manager, 正式约会女神

Android零基础入门第7节：搞定Android模拟器，开启甜蜜之旅

Android零基础入门第8节：HelloWorld，我的第一趟旅程出发点