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

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

2023-08-05 383
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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学习
Java框架
HarmonyOS开发
HarmonyOS框架
爱吃土豆丝的打工人
目录
相关文章
一枚后端工程狮
|
5月前
|
安全 前端开发 Java
《深入理解Spring》：现代Java开发的核心框架
Spring自2003年诞生以来，已成为Java企业级开发的基石，凭借IoC、AOP、声明式编程等核心特性，极大简化了开发复杂度。本系列将深入解析Spring框架核心原理及Spring Boot、Cloud、Security等生态组件，助力开发者构建高效、可扩展的应用体系。（238字）
一枚后端工程狮
723 55
HELLO程序员
|
6月前
|
人工智能 Java 开发者
阿里出手！Java 开发者狂喜！开源 AI Agent 框架 JManus 来了，初次见面就心动～
JManus是阿里开源的Java版OpenManus，基于Spring AI Alibaba框架，助力Java开发者便捷应用AI技术。支持多Agent框架、网页配置、MCP协议及PLAN-ACT模式，可集成多模型，适配阿里云百炼平台与本地ollama。提供Docker与源码部署方式，具备无限上下文处理能力，适用于复杂AI场景。当前仍在完善模型配置等功能，欢迎参与开源共建。
HELLO程序员
2510 58
阿里出手！Java 开发者狂喜！开源 AI Agent 框架 JManus 来了，初次见面就心动～
程序员潘Sir
|
6月前
|
JSON 自然语言处理 数据格式
使用Tabs选项卡组件快速搭建鸿蒙APP框架
ArkUI提供了很多布局组件，其中Tabs选项卡组件可以用于快速搭建鸿蒙APP框架，本文通过案例研究Tabs构建鸿蒙原生应用框架的方法和步骤。
程序员潘Sir
498 5
使用Tabs选项卡组件快速搭建鸿蒙APP框架
蓝易云
|
5月前
|
消息中间件 缓存 Java
Spring框架优化：提高Java应用的性能与适应性
以上方法均旨在综合考虑Java Spring 应该程序设计原则, 数据库交互, 编码实践和系统架构布局等多角度因素, 旨在达到高效稳定运转目标同时也易于未来扩展.
蓝易云
361 8
一枚后端工程狮
|
5月前
|
存储 安全 Java
《数据之美》：Java集合框架全景解析
Java集合框架是数据管理的核心工具，涵盖List、Set、Map等体系，提供丰富接口与实现类，支持高效的数据操作与算法处理。
一枚后端工程狮
260 0
蓝易云
|
5月前
|
存储 算法 安全
Java集合框架：理解类型多样性与限制
总之，在 Java 题材中正确地应对多样化与约束条件要求开发人员深入理解面向对象原则、范式编程思想以及JVM工作机理等核心知识点。通过精心设计与周密规划能够有效地利用 Java 高级特征打造出既健壮又灵活易维护系统软件产品。
蓝易云
158 7
varin
|
6月前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念，并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容，同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
varin
483 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
艾伦~耶格尔
|
7月前
|
存储 缓存 安全
Java集合框架（二）：Set接口与哈希表原理
本文深入解析Java中Set集合的工作原理及其实现机制，涵盖HashSet、LinkedHashSet和TreeSet三大实现类。从Set接口的特性出发，对比List理解去重机制，并详解哈希表原理、hashCode与equals方法的作用。进一步剖析HashSet的底层HashMap实现、LinkedHashSet的双向链表维护顺序特性，以及TreeSet基于红黑树的排序功能。文章还包含性能对比、自定义对象去重、集合运算实战和线程安全方案，帮助读者全面掌握Set的应用与选择策略。
艾伦~耶格尔
573 23
蓝易云
|
6月前
|
SQL Java 数据库连接
区分iBatis与MyBatis：两个Java数据库框架的比较
总结起来：虽然从技术角度看,iBATIS已经停止更新但仍然可用；然而考虑到长期项目健康度及未来可能需求变化情况下MYBATISS无疑会是一个更佳选择因其具备良好生命周期管理机制同时也因为社区力量背书确保问题修复新特征添加速度快捷有效.
蓝易云
441 12
艾伦~耶格尔
|
7月前
|
存储 缓存 安全
Java集合框架（三）：Map体系与ConcurrentHashMap
本文深入解析Java中Map接口体系及其实现类，包括HashMap、ConcurrentHashMap等的工作原理与线程安全机制。内容涵盖哈希冲突解决、扩容策略、并发优化，以及不同Map实现的适用场景，助你掌握高并发编程核心技巧。
艾伦~耶格尔
443 6

热门文章

最新文章

  • 1
    工业相机如何实现实时和本地Raw格式图像和Bitmap格式图像的保存和相互转换（C#代码，UI界面版）
  • 2
    一起谈.NET技术，VS2010 测试功能之旅：编码的UI测试（4）-通过编写测试代码的方式建立UI测试（上）
  • 3
    iOS开发UI篇—iPad开发中得modal介绍
  • 4
    Python Qt GUI设计：UI界面可视化组件、属性概述（基础篇—4）
  • 5
    Android异步回调中的UI同步性问题
  • 6
    【Web API系列教程】3.7 — 实战：处理数据（创建UI视图）
  • 7
    基于Vue项目整合Element UI 做登录和注册表单，如果你看不懂就是我的问题。
  • 8
    swift UI专项训练18 ToolBar工具条
  • 9
    VS2010 测试功能之旅：编码的UI测试（4）-通过编写测试代码的方式“.NET研究”建立UI测试（下）
  • 10
    iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局
  • 1
    鸿蒙HarmonyOS实战-Stage模型（线程模型）
    451
  • 2
    鸿蒙开发接口UI界面：【@ohos.mediaquery (媒体查询)】
    317
  • 3
    【通讯录教程】苹果安卓鸿蒙系统通用，如何大批量导入手机号码到手机的通讯录，下面教你方法，只需1分钟搞定几万个号码的导入手机电话本
    2926
  • 4
    MediaBox音视频终端SDK已适配鸿蒙星河版（HarmonyOS NEXT）
    632
  • 5
    首个身份认证SDK适配鸿蒙系统！阿里云金融级实人认证产品再升级
    1275
  • 6
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Scroll容器组件
    1500
  • 7
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之RowSplit容器组件
    356
  • 8
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Row容器组件
    378
  • 9
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之FlowItem容器组件
    295
  • 10
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Flex容器组件
    445

    • 相关课程

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

    • 相关电子书

    更多
  • 使用TensorFlow搭建智能开发系统自劢生成App UI代码
  • Fusion Design - 企业级UI解决方案揭秘
  • 使用TensorFlow搭建智能开发系统自动生成App UI
    • 下一篇
    ECS账号安全防护最佳实践