2.5「HarmonyOS鸿蒙开发」表格布局TableLayout(补充更新)

RubyHan 06-05 409

前言：

此时大家对“div实现表格布局”大概比较讲究，你们都需要知道一些“div实现表格布局”的相关资讯。那么小编也在网摘上汇集了一些关于“div实现表格布局””的相关资讯，希望兄弟们能喜欢，朋友们快快来学习一下吧！

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

作者：韩茹

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

鸿蒙巴士专栏作家

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

一、支持的XML属性

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

属性名称

中文描述

取值

取值说明

使用案例

控件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=";    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=";    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=";    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=";    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=";       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=";       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=";    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());    }}

然后运行即可。

本文地址：http://www.longkongtuishu.com/cac0bDGsCBFAHDV0.html

标签： #div实现表格布局