概述

Table译为表格。顾名思义，TableLayout布局就是以表格的形式来划分子组件。如下图所示：

TableLayout布局的使用

1、TableLayout常用XML属性（*）

属性	描述	取值
alignment_type	对齐方式	align_edges：表示TableLayout内的组件按边界对齐。align_contents：表示TableLayout内的组件按边距对齐。
column_count	列数	可以直接设置整型数值，也可以引用integer资源。
row_count	行数	可以直接设置整型数值，也可以引用integer资源。
orientation	排列方向	horizontal：表示水平方向布局。vertical：表示垂直方向布局。

2、TableLayout的使用

2.1、常规使用

1）在XML文件中创建TableLayout
代码如下：

    <TableLayout
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:background_element="#87CEEB"
        ohos:center_in_parent="true"
        ohos:padding="8vp">

    </TableLayout>
复制代码

2）在TableLayout布局中添加组件
代码如下：

    <TableLayout
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:background_element="#87CEEB"
        ohos:center_in_parent="true"
        ohos:padding="8vp">
        <Text
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:shape_bottom_bg"
            ohos:margin="8vp"
            ohos:text="1"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>
        <Text
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:shape_bottom_bg"
            ohos:margin="8vp"
            ohos:text="2"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>
        <Text
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:shape_bottom_bg"
            ohos:margin="8vp"
            ohos:text="3"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>
        <Text
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:shape_bottom_bg"
            ohos:margin="8vp"
            ohos:text="4"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>
    </TableLayout>
复制代码

运行结果如下：

2.2、TableLayout布局使用进阶

在上面的例子可以看出，TableLayout默认一列多行。接下来我们再来看看TableLayout的其他属性。

2.2.1、设置行数和列数

我们通过row_count和column_count来为TableLayout设置行数和列数。代码如下：

<TableLayout
    ...
    ohos:row_count="2"
    ohos:column_count="2">
复制代码

运行结果如下：

注意：TableLayout会将子控件全部显示出来，例如上面的例子，如果你将row_count取值为1，它不会只显示1行2列，而是会显示2行2列。

2.2.2、设置对齐方式

TableLayout提供两种对齐方式，一种是边距对齐（algin_contents），一种是边距对齐（algin_edges）。默认为边距对齐。接下来就让我们看看这两种对齐方式优势不同。

1.边距对齐

效果如下：

代码如下：

    <TableLayout
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:alignment_type="align_contents"
        ohos:background_element="#87CEEB"
        ohos:center_in_parent="true"
        ohos:column_count="3"
        ohos:padding="8vp">

        <Text
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:shape_bottom_bg"
            ohos:margin="8vp"
            ohos:padding="8vp"
            ohos:text="1"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>

        <Text
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:shape_bottom_bg"
            ohos:margin="16vp"
            ohos:padding="8vp"
            ohos:text="2"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>

        <Text
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:shape_bottom_bg"
            ohos:margin="32vp"
            ohos:padding="8vp"
            ohos:text="3"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>

        <Text
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:shape_bottom_bg"
            ohos:margin="32vp"
            ohos:padding="8vp"
            ohos:text="4"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>

        <Text
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:shape_bottom_bg"
            ohos:margin="16vp"
            ohos:padding="8vp"
            ohos:text="5"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>

        <Text
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:shape_bottom_bg"
            ohos:margin="8vp"
            ohos:padding="8vp"
            ohos:text="6"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>
    </TableLayout>
复制代码

2.边界对齐

在上面边距对齐方式代码的基础上，将TableLayout的对齐方式修改为边界对齐。
代码如下：

<TableLayout
    ...
    ohos:alignment_type="align_edges">

    ...
        
</TableLayout>

复制代码

边界对齐效果如下：

注意：边界对齐是以行跟列为单位进行对齐的。例如本例子，第一行的对齐基准为top_margin取值最高的那个子控件，为控件3，其top_margin值为32vp。同理以第二列为例，其对齐基准为right_margin+left_margin取值最高的子控件，为控件5，其值为32vp+16vp。

2.3、使用代码设置子组件的行列属性

TableLayout的合并单元格的功能可以通过设置子组件的行列属性来实现。实现效果如下：

java代码：
    private void testTableLayout(){
        Component component = findComponentById(ResourceTable.Id_text_one);
        TableLayout.LayoutConfig config = new TableLayout.LayoutConfig();
        config.columnSpec = TableLayout.specification(TableLayout.DEFAULT,2,TableLayout.Alignment.ALIGNMENT_FILL);
        config.rowSpec = TableLayout.specification(TableLayout.DEFAULT,2,TableLayout.Alignment.ALIGNMENT_FILL);
        component.setLayoutConfig(config);
    }
    
XML代码：
    <TableLayout
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:alignment_type="align_edges"
        ohos:background_element="#87CEEB"
        ohos:center_in_parent="true"
        ohos:row_count="3"
        ohos:column_count="3">

        <Text
            ohos:id="$+id:text_one"
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:shape_bottom_bg"
            ohos:margin="16vp"
            ohos:padding="8vp"
            ohos:text="1"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>

        <Text
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:shape_bottom_bg"
            ohos:margin="16vp"
            ohos:padding="8vp"
            ohos:text="2"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>

        <Text
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:shape_bottom_bg"
            ohos:margin="16vp"
            ohos:padding="8vp"
            ohos:text="3"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>

        <Text
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:shape_bottom_bg"
            ohos:margin="16vp"
            ohos:padding="8vp"
            ohos:text="4"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>

        <Text
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:shape_bottom_bg"
            ohos:margin="16vp"
            ohos:padding="8vp"
            ohos:text="5"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>

        <Text
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:shape_bottom_bg"
            ohos:margin="16vp"
            ohos:padding="8vp"
            ohos:text="6"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>
    </TableLayout>
复制代码

上面例子中使用了Java代码来设置子组件的行列属性。其中使用了TableLayout.Alignment.ALIGNMENT_FILL来使子组件占满2行2列。其实我们可以给它指定宽高，代码如下：

        Component component = findComponentById(ResourceTable.Id_text_one);
        TableLayout.LayoutConfig tlc = new TableLayout.LayoutConfig(vp2px(72), vp2px(72));
        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2);
        component.setLayoutConfig(tlc);
复制代码

注意：在设置子组件的行列属性时，TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。

2.4小结

在本篇幅中，我们主要讲了TableLayout的常用XML属性，其中有alginment_type、row_count、column_count以及orientation。然后我们讲了TableLayout的常规使用，接着设置了表格的行数和列数以及设置齐对齐方式。对齐方式有两种，一种是边距对齐（algin_contents），一种是边界对齐（algin_edges），默认为边界对齐。最后我们使用了Java代码来设置子组件的行列属性。需要注意的是使用了TableLayout.Config对象来设置行列，通过TableLayout.specification()来设置属性值，可以让其占满或设置固定大小。