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

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

2023-08-05 235
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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框架
HarmonyOS开发
HarmonyOS框架
爱吃土豆丝的打工人
目录
相关文章
啦啦啦191
|
5月前
|
IDE Java 编译器
java编程最基础学习
Java入门需掌握：环境搭建、基础语法、面向对象、数组集合与异常处理。通过实践编写简单程序，逐步深入学习，打牢编程基础。
啦啦啦191
323 1
阿铭学Java
|
6月前
|
Java API 容器
Java基础学习day08-2
本节讲解Java方法引用与常用API，包括静态、实例、特定类型方法及构造器引用的格式与使用场景，并结合代码示例深入解析。同时介绍String和ArrayList的核心方法及其实际应用。
阿铭学Java
188 1
啦啦啦191
|
5月前
|
存储 Oracle Java
java零基础学习者入门课程
本课程为Java零基础入门教程，涵盖环境搭建、变量、运算符、条件循环、数组及面向对象基础，每讲配示例代码与实践建议，助你循序渐进掌握核心知识，轻松迈入Java编程世界。
啦啦啦191
487 0
一枚后端工程狮
|
5月前
|
安全 前端开发 Java
《深入理解Spring》：现代Java开发的核心框架
Spring自2003年诞生以来，已成为Java企业级开发的基石，凭借IoC、AOP、声明式编程等核心特性，极大简化了开发复杂度。本系列将深入解析Spring框架核心原理及Spring Boot、Cloud、Security等生态组件，助力开发者构建高效、可扩展的应用体系。（238字）
一枚后端工程狮
759 55
程序员潘Sir
|
6月前
|
JSON 自然语言处理 数据格式
使用Tabs选项卡组件快速搭建鸿蒙APP框架
ArkUI提供了很多布局组件，其中Tabs选项卡组件可以用于快速搭建鸿蒙APP框架，本文通过案例研究Tabs构建鸿蒙原生应用框架的方法和步骤。
程序员潘Sir
511 5
使用Tabs选项卡组件快速搭建鸿蒙APP框架
八进智
|
5月前
|
负载均衡 Java API
grpc-java 架构学习指南
本指南系统解析 grpc-java 架构，涵盖分层设计、核心流程与源码结构，结合实战路径与调试技巧，助你从入门到精通，掌握高性能 RPC 开发精髓。
八进智
561 8
阿铭学Java
|
6月前
|
Java
Java基础学习day08-作业
本作业涵盖Java中Lambda表达式的应用，包括Runnable与Comparator接口的简化实现、自定义函数式接口NumberProcessor进行加减乘及最大值操作，以及通过IntProcessor处理整数数组，实现遍历、平方和奇偶判断等功能，强化函数式编程实践。
阿铭学Java
106 5
枫叶丹4
|
10月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -＞ UI开发一
本文介绍了方舟开发框架（ArkUI）及其两种开发范式：基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架，提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言，以组件、动画和状态管理为核心，适合复杂团队协作；类Web开发范式采用HML、CSS、JavaScript三段式开发，适用于简单界面应用，贴近Web开发者习惯。文中还概述了两者的架构和基础能力，帮助开发者选择合适的范式进行高效开发。
枫叶丹4
338 15
枫叶丹4
|
10月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -＞ UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法，涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分，详细讲解了如何通过Circle组件为食物成分表添加圆形标签，以及使用Path组件结合SVG命令绘制自定义图形（如应用Logo）。动画效果部分则展示了如何利用animateTo实现闪屏动画，包括渐出、放大效果，并设置页面跳转；同时介绍了页面间共享元素转场动画的实现方式。最后，文章列举了声明式开发范式中的各类组件及其功能，帮助开发者快速上手构建复杂交互页面。
枫叶丹4
368 11
varin
|
6月前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念，并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容，同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
varin
495 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例

热门文章

最新文章

  • 1
    如何降低90%Java垃圾回收时间？以阿里HBase的GC优化实践为例
  • 2
    (2)java堆内存
  • 3
    《排序算法》——快速排序（Java）
  • 4
    【Java 网络编程】服务器端 ServerSocket 配置 ( 端口复用 | 缓冲区设置 | 超时时间 | 性能权重 | 端口绑定 )
  • 5
    Java中调用SQL Server存储过程示例
  • 6
    java实现csv大文件拆分，每个小文件都有标题行
  • 7
    MessagePack Java Jackson Dataformat 不使用 str8 数据类型的序列化
  • 8
    《java编程思想》读书笔记（13）
  • 9
    Java的接口、类、属性、方法的修饰符使用总结
  • 10
    JAVA-1007. 素数对猜想 (20)
  • 1
    鸿蒙HarmonyOS实战-Stage模型（线程模型）
    469
  • 2
    鸿蒙开发接口UI界面：【@ohos.mediaquery (媒体查询)】
    322
  • 3
    【通讯录教程】苹果安卓鸿蒙系统通用，如何大批量导入手机号码到手机的通讯录，下面教你方法，只需1分钟搞定几万个号码的导入手机电话本
    3010
  • 4
    MediaBox音视频终端SDK已适配鸿蒙星河版（HarmonyOS NEXT）
    641
  • 5
    首个身份认证SDK适配鸿蒙系统！阿里云金融级实人认证产品再升级
    1290
  • 6
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Scroll容器组件
    1509
  • 7
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之RowSplit容器组件
    366
  • 8
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Row容器组件
    385
  • 9
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之FlowItem容器组件
    304
  • 10
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Flex容器组件
    451

    • 相关课程

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

    • 相关电子书

    更多
  • Spring Cloud Alibaba - 重新定义 Java Cloud-Native
  • The Reactive Cloud Native Arch
  • JAVA开发手册1.5.0
    • 下一篇
    云安全中心：病毒查杀