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

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

2023-08-05 100
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： DirectionalLayout是Java UI中的一种重要组件布局，用于将一组组件(Component)按照水平或者垂直方向排布，能够方便地对齐布局内的组件。该布局和其他布局的组合，可以实现更加丰富的布局方式。

DirectionalLayout


DirectionalLayout是Java UI中的一种重要组件布局，用于将一组组件(Component)按照水平或者垂直方向排布，能够方便地对齐布局内的组件。该布局和其他布局的组合，可以实现更加丰富的布局方式。



                                                           DirectionalLayout示意图


支持的XML属性

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


DirectionalLayout的自有XML属性见下表：

image.png

image.pngDirectionalLayout所包含组件可支持的XML属性见下表：

image.png

image.png

排列方式

DirectionalLayout的排列方向（orientation）分为水平（horizontal）或者垂直（vertical）方向。使用orientation设置布局内组件的排列方式，默认为垂直排列。

垂直排列

垂直方向排列三个按钮，效果如下：

1.<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:orientation="vertical">
    <Button
        ohos:width="33vp"
        ohos:height="20vp"
        ohos:bottom_margin="3vp"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 1"/>
    <Button
        ohos:width="33vp"
        ohos:height="20vp"
        ohos:bottom_margin="3vp"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 2"/>
    <Button
        ohos:width="33vp"
        ohos:height="20vp"
        ohos:bottom_margin="3vp"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 3"/>
</DirectionalLayout>

color_cyan_element.xml：

1.<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#00FFFD"/>
</shape>

水平排列

子组件未超过布局本身大小

水平方向排列三个按钮，效果如下：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:orientation="horizontal">
    <Button
        ohos:width="33vp"
        ohos:height="20vp"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 1"/>
    <Button
        ohos:width="33vp"
        ohos:height="20vp"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 2"/>
    <Button
        ohos:width="33vp"
        ohos:height="20vp"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 3"/>
</DirectionalLayout>
  • 子组件超过布局本身大小

DirectionalLayout不会自动换行，其子组件会按照设定的方向依次排列，若超过布局本身的大小，超出布局大小的部分将不会被显示。

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="20vp"
    ohos:orientation="horizontal">
    <Button
        ohos:width="166vp"
        ohos:height="match_content"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 1"/>
    <Button
        ohos:width="166vp"
        ohos:height="match_content"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 2"/>
    <Button
        ohos:width="166vp"
        ohos:height="match_content"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 3"/>
</DirectionalLayout>

color_cyan_element.xml：


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#00FFFD"/>
</shape>

此布局包含了三个按钮，但由于DirectionalLayout不会自动换行，超出布局大小的组件部分无法显示。界面显示如下：

20eb379b73c4fe51b91d136e5a2fcc9e.png



对齐方式

DirectionalLayout中的组件使用layout_alignment控制自身在布局中的对齐方式。对齐方式和排列方式密切相关，当排列方式为水平方向时，可选的对齐方式只有作用于垂直方向的类型（top、bottom、vertical_center、center）其他对齐方式不会生效。当排列方式为垂直方向时，可选的对齐方式只有作用于水平方向的类型（left、right、start、end、horizontal_center、center）其他对齐方式不会生效。


三种对齐方式的示例代码：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="60vp">
    <Button
        ohos:width="50vp"
        ohos:height="20vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:layout_alignment="left"
        ohos:text="Button 1"/>
    <Button
        ohos:width="50vp"
        ohos:height="20vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:layout_alignment="horizontal_center"
        ohos:text="Button 2"/>
    <Button
        ohos:width="50vp"
        ohos:height="20vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:layout_alignment="right"
        ohos:text="Button 3"/>
</DirectionalLayout>

color_cyan_element.xml：


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#00FFFD"/>
</shape>

三种对齐方式效果示例

306d9867420e0a146a7f4c131e69f5fb.png



权重

权重（weight）就是按比例来分配组件占用父组件的大小，在水平布局下计算公式为：


父布局可分配宽度=父布局宽度-所有子组件width之和；


组件宽度=组件weight/所有组件weight之和*父布局可分配宽度；


实际使用过程中，建议使用width=0来按比例分配父布局的宽度，1:1:1效果如下：


75ac91403f4dd66af42e12779c96b9ce.png

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:orientation="horizontal">
    <Button
        ohos:width="0vp"
        ohos:height="20vp"
        ohos:weight="1"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 1"/>
    <Button
        ohos:width="0vp"
        ohos:height="20vp"
        ohos:weight="1"
        ohos:background_element="$graphic:color_gray_element"
        ohos:text="Button 2"/>
    <Button
        ohos:width="0vp"
        ohos:height="20vp"
        ohos:weight="1"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 3"/>
</DirectionalLayout>

color_cyan_element.xml：


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#00FFFD"/>
</shape>


color_cyan_element.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#878787"/>
</shape>

场景示例


40a76fdd9f006f1a89a4ba46892a158c.jpg


源码示例：


<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#FFFFFFFF">
    <DirectionalLayout
        ohos:height="70vp"
        ohos:width="match_parent"
        ohos:orientation="vertical"
        ohos:background_element="#FF9F9F9F"
        ohos:top_margin="10vp">
        <Button
            ohos:height="20vp"
            ohos:width="33vp"
            ohos:background_element="#FF00FFFD"
            ohos:bottom_margin="3vp"
            ohos:left_margin="13vp"
            ohos:text="Button 1"/>
        <Button
            ohos:height="20vp"
            ohos:width="33vp"
            ohos:background_element="#FF00FFFD"
            ohos:bottom_margin="3vp"
            ohos:left_margin="13vp"
            ohos:text="Button 2"/>
        <Button
            ohos:height="20vp"
            ohos:width="33vp"
            ohos:background_element="#FF00FFFD"
            ohos:bottom_margin="3vp"
            ohos:left_margin="13vp"
            ohos:text="Button 3"/>
    </DirectionalLayout>
    <DirectionalLayout
        ohos:height="70vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:background_element="#FF9F9F9F"
        ohos:top_margin="10vp"
        >
        <Button
            ohos:height="20vp"
            ohos:width="33vp"
            ohos:background_element="#FF00FFFD"
            ohos:left_margin="13vp"
            ohos:text="Button 1"/>
        <Button
            ohos:height="20vp"
            ohos:width="33vp"
            ohos:background_element="#FF00FFFD"
            ohos:left_margin="13vp"
            ohos:text="Button 2"/>
        <Button
            ohos:height="20vp"
            ohos:width="33vp"
            ohos:background_element="#FF00FFFD"
            ohos:left_margin="13vp"
            ohos:text="Button 3"/>
    </DirectionalLayout>
    <DirectionalLayout
        ohos:height="70vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:background_element="#FF9F9F9F"
        ohos:top_margin="10vp"
        >
        <Button
            ohos:height="match_content"
            ohos:width="166vp"
            ohos:background_element="#FF00FFFD"
            ohos:left_margin="13vp"
            ohos:text="Button 1"/>
        <Button
            ohos:height="match_content"
            ohos:width="166vp"
            ohos:background_element="#FF00FFFD"
            ohos:left_margin="13vp"
            ohos:text="Button 2"/>
        <Button
            ohos:height="match_content"
            ohos:width="166vp"
            ohos:background_element="#FF00FFFD"
            ohos:left_margin="13vp"
            ohos:text="Button 3"/>
    </DirectionalLayout>
    <DirectionalLayout
        ohos:height="70vp"
        ohos:width="match_parent"
        ohos:background_element="#FF9F9F9F"
        ohos:top_margin="10vp"
        >
        <Button
            ohos:height="20vp"
            ohos:width="50vp"
            ohos:background_element="#FF00FFFD"
            ohos:layout_alignment="left"
            ohos:text="Button 1"/>
        <Button
            ohos:height="20vp"
            ohos:width="50vp"
            ohos:background_element="#FF00FFFD"
            ohos:layout_alignment="horizontal_center"
            ohos:text="Button 2"/>
        <Button
            ohos:height="20vp"
            ohos:width="50vp"
            ohos:background_element="#FF00FFFD"
            ohos:layout_alignment="right"
            ohos:text="Button 3"/>
    </DirectionalLayout>
    <DirectionalLayout
        ohos:height="70vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:background_element="#FF9F9F9F"
        ohos:top_margin="10vp"
        >
        <Button
            ohos:height="20vp"
            ohos:width="0vp"
            ohos:background_element="#FF00FFFD"
            ohos:text="Button 1"
            ohos:weight="1"/>
        <Button
            ohos:height="20vp"
            ohos:width="0vp"
            ohos:background_element="#FFFF8A8A"
            ohos:text="Button 2"
            ohos:weight="1"/>
        <Button
            ohos:height="20vp"
            ohos:width="0vp"
            ohos:background_element="#FF00FFFD"
            ohos:text="Button 3"
            ohos:weight="1"/>
    </DirectionalLayout>
</DirectionalLayout>
文章标签：
Java
数据格式
XML
关键词：
Java开发
Java框架
Java学习
UI开发
UI框架
爱吃土豆丝的打工人
目录
相关文章
老板这功能得加钱
|
2天前
|
Android开发 缓存 双11
android的基础ui组件，Android开发社招面试经验
android的基础ui组件，Android开发社招面试经验
老板这功能得加钱
12 1
android的基础ui组件，Android开发社招面试经验
源码宝
|
1天前
|
监控 安全 NoSQL
采用java+springboot+vue.js+uniapp开发的一整套云MES系统源码 MES制造管理系统源码
MES系统是一套具备实时管理能力，建立一个全面的、集成的、稳定的制造物流质量控制体系；对生产线、工艺、人员、品质、效率等多方位的监控、分析、改进，满足精细化、透明化、自动化、实时化、数据化、一体化管理，实现企业柔性化制造管理。
源码宝
12 3
长梦
|
1天前
|
安全 Java 容器
Java一分钟之-高级集合框架：并发集合(Collections.synchronizedXXX)
【5月更文挑战第18天】Java集合框架的`Collections.synchronizedXXX`方法可将普通集合转为线程安全，但使用时需注意常见问题和易错点。错误的同步范围（仅同步单个操作而非迭代）可能导致并发修改异常；错误地同步整个集合类可能引起死锁；并发遍历和修改集合需使用`Iterator`避免`ConcurrentModificationException`。示例代码展示了正确使用同步集合的方法。在复杂并发场景下，推荐使用`java.util.concurrent`包中的并发集合以提高性能。
长梦
9 3
长梦
|
1天前
|
Java 开发者
Java一分钟之-高级集合框架：优先队列(PriorityQueue)
【5月更文挑战第18天】`PriorityQueue`是Java集合框架中的无界优先队列，基于堆数据结构实现，保证队头元素总是最小。常见操作包括`add(E e)`、`offer(E e)`、`poll()`和`peek()`。元素排序遵循自然排序或自定义`Comparator`。常见问题包括错误的排序逻辑、可变对象排序属性修改和混淆`poll()`与`peek()`。示例展示了自然排序和使用`Comparator`的排序方式。正确理解和使用`PriorityQueue`能提升应用性能。
长梦
13 6
长梦
|
1天前
|
存储 Java
Java一分钟之-高级集合框架：Queue与Deque接口
【5月更文挑战第18天】本文探讨Java集合框架中的`Queue`和`Deque`接口，两者都是元素序列的数据结构。`Queue`遵循FIFO原则，主要操作有`add/remove/element/peek`，空队列操作会抛出`NoSuchElementException`。`Deque`扩展`Queue`，支持首尾插入删除，同样需注意空`Deque`操作。理解并正确使用这两个接口，结合具体需求选择合适数据结构，能提升代码效率和可维护性。
长梦
11 4
老板这功能得加钱
|
2天前
|
XML 监控 Dubbo
Dubbo03【管理控制台和监控中心搭建】，Java开发实用必备的几款插件
Dubbo03【管理控制台和监控中心搭建】，Java开发实用必备的几款插件
老板这功能得加钱
8 1
长梦
|
2天前
|
存储 Java 容器
Java一分钟之-高级集合框架：LinkedList与TreeSet
【5月更文挑战第17天】这篇博客对比了Java集合框架中的LinkedList和TreeSet。LinkedList是双向链表，适合中间插入删除，但遍历效率低且占用空间大；TreeSet基于红黑树，保证元素有序且不重复，插入删除速度较LinkedList慢但查找快。选择时需根据操作需求和性能考虑。
长梦
12 2
老板这功能得加钱
|
2天前
|
IDE Java 程序员
Java程序员必备的21个核心技术，你都掌握了哪些？，深入浅出Java开发
Java程序员必备的21个核心技术，你都掌握了哪些？，深入浅出Java开发
老板这功能得加钱
18 0
游客gy27fhrpaouum
|
2天前
|
存储 算法 Java
Java 集合框架
5月更文挑战第10天
游客gy27fhrpaouum
13 3
师兄白泽
|
存储 物联网 Java
《 HarmonyOS实战—HarmonyOS（鸿蒙）开发初体验，华为如何引领物联网时代》
自己开发的第一个鸿蒙应用程序初体验
师兄白泽
217 0
《 HarmonyOS实战—HarmonyOS（鸿蒙）开发初体验，华为如何引领物联网时代》

热门文章

最新文章

  • 1
    使用Redis进行Java缓存策略设计
  • 2
    Java语言开发的AI智慧导诊系统源码springboot+redis 3D互联网智导诊系统源码
  • 3
    【JAVA】Java 中什么叫单例设计模式？请用 Java 写出线程安全的单例模式
  • 4
    基于Java的公司员工工作日志办公系统的设计与实现(源码+lw+部署文档+讲解等)
  • 5
    【JAVA】线程的run()和start()有什么区别？
  • 6
    高德地图爬虫实践：Java多线程并发处理策略
  • 7
    [AIGC] 21世纪Java与Go的相爱相杀
  • 8
    Java多线程实战-CompletableFuture异步编程优化查询接口响应速度
  • 9
    打造个人的Minecraft服务器：Java+cpolar实现我的世界联机游戏
  • 10
    Java 开发者必备：JDK 版本详解与选择策略(含安装与验证)
  • 1
    MediaBox音视频终端SDK已适配鸿蒙星河版（HarmonyOS NEXT）
    104
  • 2
    首个身份认证SDK适配鸿蒙系统！阿里云金融级实人认证产品再升级
    275
  • 3
    “纯血鸿蒙”要来了，赶紧入手学习吧
    120
  • 4
    HarmonyOS的功能及场景应用
    39
  • 5
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Scroll容器组件
    129
  • 6
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之RowSplit容器组件
    58
  • 7
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Row容器组件
    37
  • 8
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之FlowItem容器组件
    38
  • 9
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Flex容器组件
    65
  • 10
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Counter容器组件
    47

    • 相关课程

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

    • 相关电子书

    更多
  • Spring Cloud Alibaba - 重新定义 Java Cloud-Native
  • The Reactive Cloud Native Arch
  • JAVA开发手册1.5.0

    • 相关实验场景

    更多
  • 基于ECS搭建Java Web开发环境
  • 使用Aliyun Java Intializr进行项目开发
  • 函数计算入门-HelloWorld应用开发
  • 搭建Java Web开发环境
  • 部署基于Dragonwell的Java运行环境
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考