AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-08-05 211
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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的效果展示

文章标签：
Java
数据格式
XML
关键词：
Java框架
Java开发
开发UI
HarmonyOS开发
Java学习
爱吃土豆丝的打工人
目录
相关文章
java冯坚持
|
8天前
|
存储 SQL 小程序
JVM知识体系学习五：Java Runtime Data Area and JVM Instruction （java运行时数据区域和java指令（大约200多条，这里就将一些简单的指令和学习））
这篇文章详细介绍了Java虚拟机（JVM）的运行时数据区域和JVM指令集，包括程序计数器、虚拟机栈、本地方法栈、直接内存、方法区和堆，以及栈帧的组成部分和执行流程。
java冯坚持
15 2
JVM知识体系学习五：Java Runtime Data Area and JVM Instruction （java运行时数据区域和java指令（大约200多条，这里就将一些简单的指令和学习））
zacksleo
|
5天前
|
开发者
鸿蒙Flutter实战：07-混合开发
鸿蒙Flutter混合开发支持两种模式：1) 基于har包，便于主项目开发者无需关心Flutter细节，但不支持热重载；2) 基于源码依赖，利于代码维护与热重载，需配置Flutter环境。项目结构包括AppScope、flutter_module等目录，适用于不同开发需求。
zacksleo
19 3
小王老师呀
|
5天前
|
缓存 测试技术 C#
使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题
【10月更文挑战第20天】本文介绍了使用 Radzen Blazor 组件库开发基于 ABP 框架的炫酷 UI 主题的步骤。从准备工作、引入组件库、设计主题、集成到 ABP 框架，再到优化和调试，详细讲解了每个环节的关键点和注意事项。通过这些步骤，你可以打造出高性能、高颜值的应用程序界面。
小王老师呀
12 1
java冯坚持
|
8天前
|
小程序 Oracle Java
JVM知识体系学习一：JVM了解基础、java编译后class文件的类结构详解，class分析工具 javap 和 jclasslib 的使用
这篇文章是关于JVM基础知识的介绍，包括JVM的跨平台和跨语言特性、Class文件格式的详细解析，以及如何使用javap和jclasslib工具来分析Class文件。
java冯坚持
21 0
JVM知识体系学习一：JVM了解基础、java编译后class文件的类结构详解，class分析工具 javap 和 jclasslib 的使用
zacksleo
|
5天前
|
编解码 Dart API
鸿蒙Flutter实战：06-使用ArkTs开发Flutter鸿蒙插件
本文介绍了如何开发一个 Flutter 鸿蒙插件，实现 Flutter 与鸿蒙的混合开发及双端消息通信。通过定义 `MethodChannel` 实现 Flutter 侧的 token 存取方法，并在鸿蒙侧编写 `EntryAbility` 和 `ForestPlugin`，使用鸿蒙的首选项 API 完成数据的读写操作。文章还提供了注意事项和参考资料，帮助开发者更好地理解和实现这一过程。
zacksleo
23 0
zacksleo
|
5天前
|
Dart Android开发
鸿蒙Flutter实战：03-鸿蒙Flutter开发中集成Webview
本文介绍了在OpenHarmony平台上集成WebView的两种方法：一是使用第三方库`flutter_inappwebview`，通过配置pubspec.lock文件实现；二是编写原生ArkTS代码，自定义PlatformView，涉及创建入口能力、注册视图工厂、处理方法调用及页面构建等步骤。
zacksleo
10 0
LKIDTI数据
|
6天前
|
存储 算法 Java
带你学习java的数组军队列
带你学习java的数组军队列
LKIDTI数据
24 0
LKIDTI数据
|
9天前
|
Java 大数据 开发工具
java学习——环境准备（1）
java学习——环境准备（1）
LKIDTI数据
22 0
赵广陆
|
SQL Java 数据库连接
Java面试题日积月累(SSM框架面试题22道)
Java面试题日积月累(SSM框架面试题22道)
赵广陆
86 0
杰哥在此
|
3月前
|
设计模式 存储 安全
Java面试题：设计一个线程安全的单例类并解释其内存占用情况?使用Java多线程工具类实现一个高效的线程池，并解释其背后的原理。结合观察者模式与Java并发框架，设计一个可扩展的事件处理系统
Java面试题：设计一个线程安全的单例类并解释其内存占用情况?使用Java多线程工具类实现一个高效的线程池，并解释其背后的原理。结合观察者模式与Java并发框架，设计一个可扩展的事件处理系统
杰哥在此
57 1

热门文章

最新文章

  • 1
    NODE-WEBKIT教程(6)NATIVE UI API 之MENU(菜单)
  • 2
    swift UI专项训练14 ImageView图像视图
  • 3
    分析SpinnerActivityTest中有关控件操作以及UI线程问题
  • 4
    UI/UE对个性化推荐的影响
  • 5
    Android Open Source：陌陌（momo）源代码及实现（大部分UI+功能）
  • 6
    VUE element-ui之table表格前端自动过滤（筛选），不调用数据接口筛选表格，方法
  • 7
    WPF的UI虚拟化
  • 8
    Android UI学习 - Linear Layout, RelativeLayout
  • 9
    【Qt UI相关】Qt中如何控制 窗口的最大化、最小化和关闭按钮？一文带你掌握用法
  • 10
    UGUI防止穿透和判断点击的是否是UI
  • 1
    Java毕设之学院党员管理系统的设计与实现
    35
  • 2
    JAVA毕设之基于SSM学生智能选课系统
    75
  • 3
    JAVA毕设之高校学生请假管理系统的设计与实现
    144
  • 4
    Java与物联网：连接与控制设备
    463
  • 5
    Java微服务架构实践指南
    77
  • 6
    Java容器技术：Docker与Kubernetes
    257
  • 7
    Java编码规范与最佳实践
    138
  • 8
    使用Java构建机器人应用
    81
  • 9
    掌握Java并发编程：Lock、Condition与并发集合
    46
  • 10
    Java测试驱动开发实践指南
    84

    • 相关课程

    更多
  • Java面试疑难点解析 - 面试技巧及语言基础
  • Java面试疑难点解析 - Java Web开发
  • Java面试疑难点解析 - 系统架构及项目设计
  • Java编程入门
  • Java面向对象编程
  • Java高级编程

    • 相关电子书

    更多
  • 使用TensorFlow搭建智能开发系统自劢生成App UI代码
  • Fusion Design - 企业级UI解决方案揭秘
  • 使用TensorFlow搭建智能开发系统自动生成App UI

    • 相关实验场景

    更多
  • 基于ECS搭建Java Web开发环境
  • 使用Aliyun Java Intializr进行项目开发
  • 搭建Java Web开发环境
  • 部署基于Dragonwell的Java运行环境
  • 阿里云平台上进行Java程序的编译与运行
  • RocketMQ中使用Java客户端发送消息和消费的应用
    • 下一篇
    AI助理直击要害，从繁复中提炼精华——使用CDN加速访问OSS存储的图片