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

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

2023-08-05 219
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
HarmonyOS UI
开发UI
Java框架
爱吃土豆丝的打工人
目录
相关文章
五羟基己醛
|
22天前
|
JavaScript 安全 前端开发
【HarmonyOS开发】ArkTS基础语法及使用（鸿蒙开发基础教程）
【HarmonyOS开发】ArkTS基础语法及使用（鸿蒙开发基础教程）
五羟基己醛
264 4
二流小码农
|
21天前
|
存储 数据安全/隐私保护
鸿蒙开发：自定义一个动态输入框
在鸿蒙开发中，如何实现这一效果呢，最重要的解决两个问题，第一个问题是，如何在上一个输入框输入完之后，焦点切换至下一个输入框中，第二个问题是，如何禁止已经输入的输入框的焦点，两个问题解决完之后，其他的就很是简单了。
二流小码农
45 13
鸿蒙开发：自定义一个动态输入框
zacksleo
|
24天前
|
小程序 测试技术 API
鸿蒙原生开发手记：03-元服务开发全流程（开发元服务，只需要看这一篇文章）
本文详细介绍元服务的开发及上架全流程，涵盖元服务的特点、创建项目、服务卡片、签名打包、开发测试及上架审核等环节，帮助开发者轻松掌握从零开始开发并发布元服务的全过程。元服务以其轻量、免安装、易于使用等特点，成为未来服务提供的重要形式。
zacksleo
61 13
鸿蒙原生开发手记：03-元服务开发全流程（开发元服务，只需要看这一篇文章）
我不是游客20240119
|
13天前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图：打造个性化UI组件
在安卓应用开发中，自定义视图是一种强大的工具，它允许开发者创造独一无二的用户界面元素，从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例，引导你了解如何在安卓项目中实现自定义组件，并探讨其背后的技术原理。我们将从基础的View类讲起，逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者，这篇文章都将为你提供有价值的见解和技巧。
我不是游客20240119
27 4
小王老师呀
|
26天前
|
传感器 数据处理 数据库
鸿蒙开发Hvigor插件动态生成代码
【11月更文挑战第13天】Hvigor 是鸿蒙开发中的构建系统插件，主要负责项目的构建、打包及依赖管理，并能根据预定义规则动态生成代码，如数据库访问、网络请求等，提高开发效率和代码一致性。适用于大型项目初始化和组件化开发。
小王老师呀
40 6
二流小码农
|
24天前
|
Android开发 索引
鸿蒙开发：自定义一个车牌省份简称键盘
鸿蒙搞起来就比较的简单，直接一个Grid组件便可以搞定，最后的删除按钮，使用布局选项GridLayoutOptions便可轻松实现。
二流小码农
30 0
鸿蒙开发：自定义一个车牌省份简称键盘
二流小码农
|
26天前
|
安全 UED 开发者
鸿蒙开发：沉浸式效果实现
沉浸式效果实现后，一定要注意安全区域的内容避让，防止内容延伸后被导航条或者状态栏遮挡，具体是选择安全区域或者窗口管理方式，按照需求进行处理，如果仅仅是某个页面，直接安全区域即可。
二流小码农
86 0
鸿蒙开发：沉浸式效果实现
游客qf4jmczx4xu2y
|
1月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图：打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中，自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程，以及如何通过它们增强应用的用户体验。我们将从基础出发，逐步深入，最终让你能够自信地设计和实现专属的UI组件。
游客qf4jmczx4xu2y
45 4
小王老师呀
|
2月前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事？
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS，提供高效简洁的开发体验。ArkTS扩展了TypeScript，支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化，UI将自动更新，简化了开发流程。此外，其前后端分层设计与编译时优化确保了高性能运行，利于生态发展。通过组件创建、状态管理和渲染控制等方式，开发者能快速构建高质量的鸿蒙应用。
小王老师呀
133 3
土木林森
|
1月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发：掌握ArkUI（包括Java UI和JS UI）进行界面开发
【10月更文挑战第22天】随着科技发展，操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI，探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发，性能较高；JS UI适合快速开发简单界面，跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
土木林森
111 8

热门文章

最新文章

  • 1
    鸿蒙应用开发项目新建过程与hap包生成方法
  • 2
    【鸿蒙软件开发】ArkUI容器组件之Grid(网格布局)
  • 3
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（一） 嵌入式Linux开发基本概念以及开发流程介绍
  • 4
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（四）传输文件
  • 5
    【鸿蒙软件开发】UIAbility组件概况、生命周期与启动模式
  • 6
    【鸿蒙软件开发】文本显示（Text/Span）
  • 7
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发流程（六）烧写整个系统或更新部分系统
  • 8
    scrcpy投屏工具的在harmonyOS开发上的使用
  • 9
    【HarmonyOS 4.0 应用开发实战】ArkTS 快速入门
  • 10
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（七）Ubuntu开发环境配置
  • 1
    【Java开发指南 | 第三十一篇】Java 包(package)
    69
  • 2
    【Java开发指南 | 第二十九篇】Java接口
    43
  • 3
    【Java开发指南 | 第二十八篇】Java封装
    51
  • 4
    【Java开发指南 | 第二十六篇】Java多态
    38
  • 5
    【Java开发指南 | 第二十四篇】Java继承
    56
  • 6
    【Java开发指南 | 第九篇】访问实例变量和方法、继承、接口
    48
  • 7
    【Java开发指南 | 第八篇】Java变量、构造方法、创建对象
    89
  • 8
    Java医院绩效考核系统源码B/S+avue+MySQL助力医院实现精细化管理
    76
  • 9
    《手把手教你》系列技巧篇（四十三）-java+ selenium自动化测试-处理https 安全问题或者非信任站点-上篇（详解教程）
    126
  • 10
    Java中的多线程编程：基础知识与实践
    50

    • 相关课程

    更多
  • Java高级开发
  • Java Web项目实战 - 图书商城
  • Java Web开发系列课程 - Spring框架入门
  • Java零基础入门
  • 「大师课」搞定 Java 开发基础
  • Java面试疑难点解析 - 系统架构及项目设计

    • 相关电子书

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

    • 相关实验场景

    更多
  • 函数计算入门-HelloWorld应用开发
  • 语言入门-1：环境构建
  • 阿里云平台上进行Java程序的编译与运行
  • 使用Java面向对象编写网络通信程序应用
  • 手动部署Java Web环境（Alibaba Cloud Linux 2）
  • 搭建Java Web开发环境（Anolis OS）
    • 下一篇
    fs.oss.accessKeyId和fs.oss.accessKeySecret。