Android学习笔记第2章 Android应用的界面编程 2.2 第1组UI组件：布局管理器 2.2.2 表格布局

超、凢脫俗 2024-03-22 13:34 45阅读 0赞

#### Android学习笔记 ####

#### 文章目录 ####

*   *   *  Android学习笔记
         *  第2章 Android应用的界面编程
         *   *  2.2 第1组UI组件：布局管理器
             *   *  2.2.2 表格布局

> 疯狂Android讲义

#### 第2章 Android应用的界面编程 ####

##### 2.2 第1组UI组件：布局管理器 #####

###### 2.2.2 表格布局 ######

表格布局由TableLayout所代表，TableLayout继承了LinearLayout,因此它的本质依然是线性布局管理器。

表格布局采用行、列的形式来管理UI组件，TableLayout并不需要明确地声明包含多少行、多少列，而是通过添加TableRow、其他组件来控制表格的行数和列数。

每次向TableLayout中添加一个TableRow,该TableRow就是一个表格行，TableRow也是容器，因此它也可以不断地添加其他组件，每添加一个子组件该表格就增加一列。

如果直接向TableLayout中添加组件，那么这个组件将直接占用一行。

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

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

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

TableLayout继承了LinearLayout,因此它完全可以支持LinearLayout所支持的全部XML属性。

除此之外，TableLayout还支持如下所示的常用XML属性及相关方法。

![在这里插入图片描述][882c93c6d5694fcfb7c42d2864389d1e.png_pic_center]

举个例子，新建模块

![在这里插入图片描述][ca30651f068d44e5af7c66110781d6a2.png_pic_center]

布局文件

<?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">
        
        <TableLayout
            android:id="@+id/TableLayout01"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:shrinkColumns="1"
            android:stretchColumns="2">
            
            <Button
                android:id="@+id/ok1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="独自一行的按钮" />
            
            <TableRow>
                
                <Button
                    android:id="@+id/ok2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="普通按钮" />
    
                <Button
                    android:id="@+id/ok3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="收缩的按钮" />
    
                <Button
                    android:id="@+id/ok4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="拉伸的按钮" />
            </TableRow>
        </TableLayout>
        
        <TableLayout
            android:id="@+id/TableLayout02"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:collapseColumns="1">
            
            <Button
                android:id="@+id/ok5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="独自一行的按钮" />
            
            <TableRow>
                
                <Button
                    android:id="@+id/ok6"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="普通按钮1" />
    
                <Button
                    android:id="@+id/ok7"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="普通按钮2" />
    
                <Button
                    android:id="@+id/ok8"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="普通按钮3" />
            </TableRow>
        </TableLayout>
        
        <TableLayout
            android:id="@+id/TableLayout03"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:stretchColumns="1,2">
            
            <Button
                android:id="@+id/ok9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="独自一行的按钮" />
            
            <TableRow>
                
                <Button
                    android:id="@+id/ok10"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="普通按钮" />
    
                <Button
                    android:id="@+id/ok11"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="拉伸的按钮" />
    
                <Button
                    android:id="@+id/ok12"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="拉伸的按钮" />
            </TableRow>
            
            <TableRow>
                
                <Button
                    android:id="@+id/ok13"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="普通按钮" />
    
                <Button
                    android:id="@+id/ok14"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="拉伸的按钮" />
            </TableRow>
        </TableLayout>
    </LinearLayout>

运行效果

![在这里插入图片描述][cd912f29b3984755a839878529b20807.png_pic_center]

布局文件中定义了3 个TableLayout，

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

[882c93c6d5694fcfb7c42d2864389d1e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/2611414a16fb4302a1b6f5d28d2576f3.png
[ca30651f068d44e5af7c66110781d6a2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/3253d1a3b3e94d008c07e616a723f2d1.png
[cd912f29b3984755a839878529b20807.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c7e1baa645f642e18f80d3f87b8e49cc.png