HarmonyOS学习路之开发篇—Java UI框架(TableLayout)

简介: TableLayoutTableLayout使用表格的方式划分子组件。

TableLayout

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

423ed88369307acc27359a118e4bcf1b.png

支持的XML属性

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

TableLayout的自有XML属性见下表:

image.png

TableLayout的创建

  • 在XML中创建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:padding="8vp">
</TableLayout>
  • 添加子组件

a.在graphic文件夹下创建Text的背景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>

b.在TableLayout布局中添加子组件。

1.<?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:padding="8vp">
    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="$graphic:table_text_bg_element"
        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:table_text_bg_element"
        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:table_text_bg_element"
        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:table_text_bg_element"
        ohos:margin="8vp"
        ohos:text="4"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
</TableLayout>

TableLayout默认一列多行

设置行列数

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

 设置TableLayout的行为2,列为2效果

设置布局排列方向

在XML中设置布局排列方向,以“vertical”为例:

<TableLayout
    ...
    ohos:orientation="vertical">
    ...
</TableLayout>

设置布局排列方向为“vertical”的效果

设置对齐方式

TableLayout提供两种对齐方式,边距对齐“align_contents”、边界对齐“align_edges”,默认为边距对齐“align_contents”。

  • 边距对齐方式

代码如下:

<?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="$graphic:layout_borderline"
    ohos:column_count="3"
    ohos:padding="8vp">
    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        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="$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="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="$graphic:table_text_bg_element"
        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="$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="8vp"
        ohos:padding="8vp"
        ohos:text="6"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>
</TableLayout>

边距对齐效果

  • 边界对齐方式

将TableLayout的对齐方式修改为边界对齐。

<TableLayout
    ...
    ohos:alignment_type="align_edges">
    ...
</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>

设置子组件的行列属性

实现合并单元格的效果

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

设置子组件的行列属性均为2的效果展示

在XML中创建TableLayout,并添加子组件,代码如下:

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

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

    @Override
    protected void onStart(Intent intent) {
        ...
        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);
    }
    private int vp2px(float vp) {
        return AttrHelper.vp2px(vp, getContext());
    }
  • 说明

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

目前仅支持Java代码设置TableLayout子组件的行列属性。

在创建子组件的行列属性时,还可设置子组件的对齐方式,修改上述Java代码如下:

    @Override
    protected void onStart(Intent intent) {
        ...
        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);
        ...
    }

子组件的对齐方式设置为ALIGNMENT_FILL的效果

设置子组件的权重

代码如下:

 @Override
    protected void onStart(Intent intent) {
        ...
        TableLayout.LayoutConfig tlc = new TableLayout.LayoutConfig(0, vp2px(48));
        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 1, 1.0f);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 1);
        findComponentById(ResourceTable.Id_text_one).setLayoutConfig(tlc);
        findComponentById(ResourceTable.Id_text_two).setLayoutConfig(tlc);
        findComponentById(ResourceTable.Id_text_three).setLayoutConfig(tlc);
        findComponentById(ResourceTable.Id_text_four).setLayoutConfig(tlc);
        findComponentById(ResourceTable.Id_text_five).setLayoutConfig(tlc);
        findComponentById(ResourceTable.Id_text_six).setLayoutConfig(tlc);
    }

上述代码将子组件的宽度权重设置为1.0,每行子组件会均分TableLayout的宽度,所以需要设置TableLayout为固定宽度或match_parent。

<TableLayout
    ohos:width="match_parent"
    ...>
    <Text
        ohos:id="$+id:text_one"
        .../>
    <Text
        ohos:id="$+id:text_two"
        .../>
    <Text
        ohos:id="$+id:text_three"
        .../>
    <Text
        ohos:id="$+id:text_four"
        .../>
    <Text
        ohos:id="$+id:text_five"
        .../>
    <Text
        ohos:id="$+id:text_six"
        .../>
</TableLayout>

将子组件的宽度权重设置为1.0的效果展示

相关文章
|
5天前
|
算法 Java 测试技术
滚雪球学Java(54):从零开始学习Java中的Math类,轻松解决数学难题
【6月更文挑战第8天】🏆本文收录于「滚雪球学Java」专栏,专业攻坚指数级提升,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&订阅!持续更新中,up!up!up!!
10 0
滚雪球学Java(54):从零开始学习Java中的Math类,轻松解决数学难题
|
6天前
|
Java
Java线程学习经典例子-读写者演示
Java线程学习经典例子-读写者演示
8 0
|
12天前
|
JavaScript Java 测试技术
Java项目基于ssm+vue.js的网络类课程思政学习系统附带文章和源代码设计说明文档ppt
Java项目基于ssm+vue.js的网络类课程思政学习系统附带文章和源代码设计说明文档ppt
13 0
|
12天前
|
Android开发 开发者 UED
探索安卓应用开发中的UI设计趋势
随着移动应用市场的不断发展和用户需求的变化,安卓应用的UI设计趋势也在不断演进。本文将深入探讨当前安卓应用开发中的UI设计趋势,包括暗黑模式、原生化设计、动效设计等方面的发展趋势,为开发者提供参考和启发。
|
15天前
|
JavaScript Java 测试技术
基于JAVA语言的在线考试与学习交流网页平台附带文章和源代码设计说明文档ppt
基于JAVA语言的在线考试与学习交流网页平台附带文章和源代码设计说明文档ppt
18 1
|
16天前
|
JavaScript API
鸿蒙开发接口UI界面:【@ohos.mediaquery (媒体查询)】
鸿蒙开发接口UI界面:【@ohos.mediaquery (媒体查询)】
21 1
|
29天前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
37 0
|
29天前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
23 0
|
29天前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
49 0
|
29天前
|
JSON 前端开发 测试技术
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
29 0