2.5【HarmonyOS鸿蒙开发】表格布局TableLayout

作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

TableLayout使用表格的方式划分子组件。

一、支持的XML属性

TableLayout的共有XML属性继承自：Component

属性名称	中文描述	取值	取值说明	使用案例
id	控件identity，用以识别不同控件对象，每个控件唯一	integer类型	仅可用于配置控件的id。	ohos:id="$+id:component_id"
theme	样式	引用	仅可引用pattern资源。	ohos:theme="$pattern:button_pattern"
width	宽度，必填项	float类型，match_parent，match_content		ohos:width="20" ohos:width="10vp" ohos:width="$float:size_value"
height	高度，必填项	float类型，match_parent，match_content		ohos:height="20" ohos:height="20vp" ohos:height="$float:size_value"
min_width	最小宽度	float类型		ohos:min_width="20" ohos:min_width="20vp" ohos:min_width="$float:size_value"
min_height	最小高度	float类型		ohos:min_height="20" ohos:min_height="20vp" ohos:min_height="$float:size_value"
alpha	透明度	float类型	取值范围在0~1。	ohos:alpha="0.86" ohos:alpha="$float:value"
enabled	是否启用	boolean类型		ohos:enabled="true" ohos:enabled="$boolean:true"
visibility	可见性	visible，invisible，hide		ohos:visibility="visible"
padding	内间距	float类型
margin	外边距	float类型

TableLayout的自有XML属性见下表：

表1 TableLayout的自有XML属性

属性名称	中文描述	取值	取值说明	使用案例
alignment_type	对齐方式	align_edges	表示TableLayout内的组件按边界对齐。	ohos:alignment_type="align_edges"
		align_contents	表示TableLayout内的组件按边距对齐。	ohos:alignment_type="align_contents"
column_count	列数	integer类型	可以直接设置整型数值，也可以引用integer资源。	ohos:column_count="3" ohos:column_count="$integer:count"
row_count	行数	integer类型	可以直接设置整型数值，也可以引用integer资源。	ohos:row_count="2" ohos:row_count="$integer:count"
orientation	排列方向	horizontal	表示水平方向布局。	ohos:orientation="horizontal"
		vertical	表示垂直方向布局。	ohos:orientation="vertical"

二、使用表格布局

2.1 默认一列多行

TableLayout默认一列多行。

我们先修改一下布局文件，项目/entry/src/main/resources/base/layout/下的ability_main_layout文件。

删除原来的代码，创建TableLayout：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#87CEEB"
    ohos:layout_alignment="horizontal_center"
    ohos:padding="8vp">
</TableLayout>

然后在里面添加4个Text子控件：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#87CEEB"
    ohos:layout_alignment="horizontal_center"
    ohos:padding="8vp">

    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="#00BFFF"
        ohos:margin="8vp"
        ohos:text="1"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="#00BFFF"
        ohos:margin="8vp"
        ohos:text="2"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="#00BFFF"
        ohos:margin="8vp"
        ohos:text="3"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="#00BFFF"
        ohos:margin="8vp"
        ohos:text="4"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
</TableLayout>

效果图：

2.2 设置多行多列

设置行数和列数：

<TableLayout
    ...
    ohos:row_count="2"
    ohos:column_count="2">

只需要在TableLayout标签中设置好行数和列数，其他的内容不用改，效果图：

2.3 设置对齐方式

在XML中设置对齐方式，以”align_contents“为例：

<TableLayout
    ...
    ohos:alignment_type="align_contents">
    ...
</TableLayout>

demo1_table_layout.xml示例代码：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:alignment_type="align_contents"
    ohos:background_element="#22AA0000"
    ohos:column_count="3"
    ohos:padding="8vp">

<!--
    TableLayout提供两种对齐方式，边距对齐“align_contents”、边界对齐“align_edges”，默认为边距对齐。
-->

    <Text

        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="#AA00AA"
        ohos:margin="8vp"
        ohos:padding="8vp"
        ohos:text="1"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="#AA00AA"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="2"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="#AA00AA"
        ohos:margin="32vp"
        ohos:padding="8vp"
        ohos:text="3"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="#AA00AA"
        ohos:margin="32vp"
        ohos:padding="8vp"
        ohos:text="4"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="#AA00AA"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="5"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="#AA00AA"
        ohos:margin="8vp"
        ohos:padding="8vp"
        ohos:text="6"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>
</TableLayout>

效果图：

如上代码，将TableLayout的对齐方式修改为边界对齐。

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

    ...
        
</TableLayout>

效果图：

2.4 设置子组件的行列属性(合并单元格)

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

现在layout目录下新建一个xml布局文件：demo2_table_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:alignment_type="align_edges"
    ohos:background_element="$graphic:layout_borderline"
    ohos:column_count="3"
    ohos:padding="8vp"
    ohos:row_count="3">

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

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

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

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

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

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="6"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>
</TableLayout>

graphic目录下的背景文件：layout_borderline.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="5vp"/>
    <stroke
        ohos:width="1vp"
        ohos:color="gray"/>
</shape>

table_text_bg_element.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="5vp"/>
    <stroke
        ohos:width="1vp"
        ohos:color="gray"/>
    <solid
        ohos:color="#00BFFF"/>
</shape>

预览效果：

在Java代码中设置子组件的行列属性，代码如下：

package com.example.hanrutablelayout.slice;

import com.example.hanrutablelayout.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.AttrHelper;
import ohos.agp.components.TableLayout;
import ohos.agp.components.Text;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_demo2_table_layout);

        Text text1 = (Text)findComponentById(ResourceTable.Id_text_one);
        TableLayout.LayoutConfig tlc = new TableLayout.LayoutConfig(vp2px(72), vp2px(72));
        // 设置表格规格：返回一个基于元素在表布局中的起始位置和元素大小返回规范实例。
        // TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。
        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2);


        text1.setLayoutConfig(tlc);



    }
    // vp转为px
    private int vp2px(float vp) {
        return AttrHelper.vp2px(vp, getContext());
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

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

效果图：

// 设置表格规格：返回一个基于元素在表布局中的起始位置和元素大小返回规范实例。
// 第一个参数int start：表示元素在表格布局中的起始位置。值不能小于0。
// 第二个参数int size：表示元素大小。值不能小于0。

public static TableLayout.Specification specification(int start, int size)
  
// 第三个参数int alignment：指示元素的对齐模式。ALIGN_EDGES表示边界对齐；ALIGN_CONTENTS表示页边距对齐。
public static TableLayout.Specification specification(int start, int size, int alignment) 

如果我们尝试再加一个参数：

    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_demo2_table_layout);

        //获取表格布局对象
//        TableLayout tableLayout1 = (TableLayout)findComponentById(ResourceTable.Id_tablelayout1);

//        TableLayout.CellSpan cellSpan = new TableLayout.CellSpan(1,3);

        Text text1 = (Text)findComponentById(ResourceTable.Id_text_one);
        TableLayout.LayoutConfig tlc = new TableLayout.LayoutConfig(vp2px(72), vp2px(72));
        // 设置表格规格：返回一个基于元素在表布局中的起始位置和元素大小返回规范实例。
        // TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。
        // tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2);
        // tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2);

        // 第三个参数表示对齐方式：
        // ALIGN_EDGES表示边界对齐；ALIGN_CONTENTS表示页边距对齐。
        // TableLayout.Alignment.ALIGNMENT_FILL，
        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_BOTTOM);
        text1.setLayoutConfig(tlc);



    }
	...
}

效果：

再改一下：

        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);
        text1.setLayoutConfig(tlc);

效果图：

三、写个例子

我们设计一个简易计算器的界面：

首先我们先创建一个xml布局文件：demo3_calculator.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="horizontal"
    ohos:row_count="4"
    ohos:column_count="4"
    ohos:alignment_type="align_edges"
    ohos:id="$+id:tablelayout1"
    ohos:background_element="#000000">

<!--    第一行-->
    <Text
        ohos:id="$+id:text_show"
        ohos:height="80vp"
        ohos:width="80vp"
        ohos:background_element="#EEEEEE"
        ohos:margin="5vp"
        ohos:text_alignment="right|vertical_center"
        ohos:text_size="60fp"
        ohos:padding="5vp"
        ohos:text_color="#000000"
        ohos:text="0"/>
<!--    第二行-->
    <Button
        ohos:id="$+id:btn_o"
        ohos:height="80vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:margin="5vp"
        ohos:text_color="#000000"
        />
    <Button
        ohos:id="$+id:btn_delete"
        ohos:height="80vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:margin="5vp"
        ohos:text_color="#ffffff"
        ohos:text="删除"
        ohos:text_size="30fp"
        />


<!--    第三行：789/-->
    <Button
        ohos:id="$+id:btn7"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text="7"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        />
    <Button
        ohos:id="$+id:btn8"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="8"/>
    <Button
        ohos:id="$+id:btn9"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="9"/>
    <Button
        ohos:id="$+id:btn_div"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="/"/>

    <!--    第四行：456X-->
    <Button
        ohos:id="$+id:btn4"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text="4"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        />
    <Button
        ohos:id="$+id:btn5"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="5"/>
    <Button
        ohos:id="$+id:btn6"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="6"/>
    <Button
        ohos:id="$+id:btn_mul"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="X"/>

    <!--    第五行：123- -->
    <Button
        ohos:id="$+id:btn1"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text="1"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        />
    <Button
        ohos:id="$+id:btn2"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="2"/>
    <Button
        ohos:id="$+id:btn3"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="3"/>
    <Button
        ohos:id="$+id:btn_sub"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="-"/>
    <!--    第六行：.0=+ -->
    <Button
        ohos:id="$+id:btn_dot"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text="."
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        />
    <Button
        ohos:id="$+id:btn0"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="0"/>
    <Button
        ohos:id="$+id:btn_equ"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="="/>
    <Button
        ohos:id="$+id:btn_add"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="+"/>
</TableLayout>

然后我们在slice下新建一个AbilitySlice文件：CalculatorAbilitySlice.java

package com.example.hanrutablelayout.slice;

import com.example.hanrutablelayout.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.AttrHelper;
import ohos.agp.components.Button;
import ohos.agp.components.TableLayout;
import ohos.agp.components.Text;

public class CalculatorAbilitySlice extends AbilitySlice {
    private Text textShow;
    private Button btn_o;
    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_demo3_calculator);
        initComponent();
        // 调整页面布局
        TableLayout.LayoutConfig tlc1 = new TableLayout.LayoutConfig(vp2px(80), vp2px(80));
        // 设置表格规格：返回一个基于元素在表布局中的起始位置和元素大小返回规范实例。
        // TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。
        // 第三个参数表示对齐方式：
        // ALIGN_EDGES表示边界对齐；ALIGN_CONTENTS表示页边距对齐。
        // TableLayout.Alignment.ALIGNMENT_FILL，
        tlc1.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 4, TableLayout.Alignment.ALIGNMENT_FILL);
        tlc1.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 1, TableLayout.Alignment.ALIGNMENT_FILL);
        textShow.setLayoutConfig(tlc1);

        TableLayout.LayoutConfig tlc2 = new TableLayout.LayoutConfig(vp2px(80), vp2px(80));
        tlc2.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 3, TableLayout.Alignment.ALIGNMENT_FILL);
        tlc2.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 1, TableLayout.Alignment.ALIGNMENT_FILL);
        btn_o.setLayoutConfig(tlc2);





    }
    // vp转为px
    private int vp2px(float vp) {
        return AttrHelper.vp2px(vp, getContext());
    }
    private void initComponent(){
        textShow = (Text) findComponentById(ResourceTable.Id_text_show);
        btn_o = (Button) findComponentById(ResourceTable.Id_btn_o);
    }
}

修改一下MainAbility：

package com.example.hanrutablelayout;

import com.example.hanrutablelayout.slice.CalculatorAbilitySlice;
import com.example.hanrutablelayout.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;

public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        // super.setMainRoute(MainAbilitySlice.class.getName());
        super.setMainRoute(CalculatorAbilitySlice.class.getName());
    }
}

然后运行即可。