在之前的章节中我使用的是Java 代码构建UI界面，从本节开始，将使用XML构建UI界面。

使用XML构建UI（默认你已经会在项目中创建XML布局文件）界面相对Java代码构建的好处是：结构清晰，代码简洁。

DirectionalLayout（单一方向排列布局）是Java UI的一种重要的组件布局，用于将一组组件按照水平或垂直方向排布，能够方便地对齐布局内的组件。与Android中的线性布局相似。可以通过设置orientation属性来控制组件的排列方式，默认为垂直排列。

<?xml version="1.0" encoding="utf-8"?>

<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"

                   ohos:width="match_parent"

                   ohos:height="match_parent"

                   ohos:background_element="#FFCCCCCC"

                   ohos:orientation="vertical">

    <Text

        ohos:id="$+id:txtOne"

        ohos:width="match_content"

        ohos:height="match_content"

        ohos:padding="20vp"

        ohos:margin="20vp"

        ohos:text_size="30vp"

        ohos:text_color="#FFFFFFFF"

        ohos:background_element="#FFFF00FF"

        ohos:text="我是第一个"/>

    <Text

        ohos:id="$+id:txtTwo"

        ohos:width="match_content"

        ohos:height="match_content"

        ohos:padding="20vp"

        ohos:margin="20vp"

        ohos:text_size="30vp"

        ohos:text_color="#FFFFFFFF"

        ohos:background_element="#FFFF00FF"

        ohos:text="我是第二个"/>

    <Text

        ohos:id="$+id:txtThird"

        ohos:width="match_content"

        ohos:height="match_content"

        ohos:padding="20vp"

        ohos:margin="20vp"

        ohos:text_size="30vp"

        ohos:text_color="#FFFFFFFF"

        ohos:background_element="#FFFF00FF"

        ohos:text="我是第三个"/>

</DirectionalLayout>

将上面代码中的ohos:orientation="vertical"换成ohos:orientation="horizontal" 然后运行查看效果如下所示。

DirectionalLayout布局中的组件不会自动换行，会按照设定的方向依次排列，若超出布局本身大小，超出布局大小的部分将不会显示。我们将上面示例代码中的Text组件宽度设定为400vp，然后运行效果如下所示，我们可以看到，第三个Text组件显示了一部分。

DirectionalLayout中的组件使用layout_alignment控制自身在布局中的对齐方式，当对齐方式与排列方式一致时，对齐方式不会生效，如布局为水平方法排列，则其下组件左对齐、右对齐将不会生效。因为布局中可以嵌套布局来丰富UI样式，我们可以使用这个方式来演示一下对齐样式

<?xml version="1.0" encoding="utf-8"?>

<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"

                   ohos:width="match_parent"

                   ohos:height="match_parent"

                   ohos:orientation="vertical">

    <DirectionalLayout

            ohos:width="match_parent"

            ohos:height="0vp"

            ohos:weight="2"

            ohos:margin="10vp"

            ohos:background_element="#FFDDDDDD"

            ohos:orientation="vertical">

        <Text

                ohos:width="match_content"

                ohos:height="match_content"

                ohos:padding="10vp"

                ohos:margin="10vp"

                ohos:text_size="20vp"

                ohos:text_color="#FFFFFFFF"

                ohos:layout_alignment="left"

                ohos:background_element="#FFFF00FF"

                ohos:text="左对齐"/>

        <Text

                ohos:width="match_content"

                ohos:height="match_content"

                ohos:padding="10vp"

                ohos:margin="10vp"

                ohos:text_size="20vp"

                ohos:text_color="#FFFFFFFF"

                ohos:layout_alignment="horizontal_center"

                ohos:background_element="#FFFF00FF"

                ohos:text="水平方向居中"/>

        <Text

                ohos:width="match_content"

                ohos:height="match_content"

                ohos:padding="10vp"

                ohos:margin="10vp"

                ohos:text_size="20vp"

                ohos:text_color="#FFFFFFFF"

                ohos:layout_alignment="right"

                ohos:background_element="#FFFF00FF"

                ohos:text="右对齐"/>

        <Text

                ohos:width="match_content"

                ohos:height="match_content"

                ohos:padding="10vp"

                ohos:margin="10vp"

                ohos:text_size="20vp"

                ohos:text_color="#FFFFFFFF"

                ohos:layout_alignment="center"

                ohos:background_element="#FFFF00FF"

                ohos:text="垂直与水平方向都居中"/>

    </DirectionalLayout>

    <DirectionalLayout

            ohos:width="match_parent"

            ohos:height="0vp"

            ohos:margin="10vp"

            ohos:weight="1"

            ohos:background_element="#FFCCCCCC"

            ohos:orientation="horizontal">

        <Text

                ohos:width="match_content"

                ohos:height="match_content"

                ohos:padding="10vp"

                ohos:margin="10vp"

                ohos:text_size="20vp"

                ohos:text_color="#FFFFFFFF"

                ohos:layout_alignment="top"

                ohos:background_element="#FFFF00FF"

                ohos:text="顶部对齐"/>

        <Text

                ohos:width="match_content"

                ohos:height="match_content"

                ohos:padding="10vp"

                ohos:margin="10vp"

                ohos:text_size="20vp"

                ohos:text_color="#FFFFFFFF"

                ohos:layout_alignment="vertical_center"

                ohos:background_element="#FFFF00FF"

                ohos:text="垂直方向居中"/>

        <Text

                ohos:width="match_content"

                ohos:height="match_content"

                ohos:padding="10vp"

                ohos:margin="10vp"

                ohos:text_size="20vp"

                ohos:text_color="#FFFFFFFF"

                ohos:layout_alignment="bottom"

                ohos:background_element="#FFFF00FF"

                ohos:text="底部对齐"/>

        <Text

                ohos:width="match_content"

                ohos:height="match_content"

                ohos:padding="10vp"

                ohos:margin="10vp"

                ohos:text_size="20vp"

                ohos:text_color="#FFFFFFFF"

                ohos:layout_alignment="center"

                ohos:background_element="#FFFF00FF"

                ohos:text="垂直与水平方向都居中"/>

    </DirectionalLayout>

</DirectionalLayout>

在上面代码中我们看到两个DirectionalLayout子布局中有ohos:weight="1"属性，这个属性就是设置组件在布局中的权重，按照比例来分配组件占用父组件的大小。

DirectionalLayout布局需要掌握的知识点也就这么多，接下来再说说题外话。

设置UI显示界面问题

我们使用XML方式构建UI，在AbilitySlice中设置界面入口的时候，一般会报错，找不到布局文件。官方推荐使用Build -> Build App(s)/Hap(s) > Build Debug Hap(s)重新编译一次即可。

下载原文资源包

作者：IT明

想了解更多内容，请访问：

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com#bky

HarmonyOS Java UI之DirectionalLayout布局的更多相关文章

  1. HarmonyOS Java UI之DependentLayout布局示例

    DependentLayout简介 DependentLayout意为相对位置布局,与DirectionalLayout相比较有更多的排布方式,每个组件可以指定相对于其他同级组件的位置,也可以指定相对 ...

  2. HarmonyOS Java UI之StackLayout布局示例

    StackLayout简介 StackLayout意为堆叠布局,用于在屏幕上保留一个区域来显示组件,实现特殊的功能.通常,堆叠布局中只应该放置一个子组件,如果存在多个子组件,则显示最新的组件.这个布局 ...

  3. Android开发1：基本UI界面设计——布局和组件

    前言 啦啦啦~本学期要开始学习Android开发啦~ 博主在开始学习前是完完全全的小白,只有在平时完成老师要求的实验的过程中一步一步学习~从此篇博文起,博主将开始发布Android开发有关的博文,希望 ...

  4. 【详细】Android入门到放弃篇-YES OR NO-》各种UI组件，布局管理器，单元Activity

    问:达叔,你放弃了吗? 答:不,放弃是不可能的,丢了Android,你会心疼吗?如果别人把你丢掉,你是痛苦呢?还是痛苦呢?~ 引导语 有人说,爱上一个人是痛苦的,有人说,喜欢一个人是幸福的. 人与人之 ...

  5. HDC技术分论坛：HarmonyOS新一代UI框架的全面解读

    作者:yuzhiqiang,UI编程框架首席技术专家 在Harmony 3.0.0开发者预览版中,包含了新一代的声明式UI框架ArkUI 3.0.多语言跨平台编译器ArkCompiler 3.0.跨端 ...

  6. [前端]使用JQuery UI Layout Plug-in布局 - wolfy

    引言 使用JQuery UI Layout Plug-in布局框架实现快速布局,用起来还是挺方便的,稍微研究了一下,就能上手,关于该布局框架的材料,网上也挺多的.在项目中也使用到了,不过那是前端的工作 ...

  7. (转)Java 的swing.GroupLayout布局管理器的使用方法和实例

    摘自http://www.cnblogs.com/lionden/archive/2012/12/11/grouplayout.html (转)Java 的swing.GroupLayout布局管理器 ...

  8. JQuery UI Layout Plug-in布局

    端]使用JQuery UI Layout Plug-in布局   引言 使用JQuery UI Layout Plug-in布局框架实现快速布局,用起来还是挺方便的,稍微研究了一下,就能上手,关于该布 ...

  9. Java对象的内存布局

    对象的内存布局 平时用java编写程序,你了解java对象的内存布局么? 在HotSpot虚拟机中,对象在内存中存储的布局可以分为3块区域: 对象头 实例数据 对齐填充 对象头 对象头包括两部分信息: ...

随机推荐

  1. 架构师根本不会被语言限制住，php照样可以用领域驱动设计DDD四层架构！

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 你在通往架构师的路上吗? 程序员这个行业就像是在不断的打怪升级,突破每一阶段的瓶颈期 ...

  2. 洛谷 P4819 [中山市选]杀人游戏（tarjan缩点）

    P4819 [中山市选]杀人游戏 思路分析 题意最开始理解错了(我太菜了) 把题意简化一下,就是找到可以确定杀手身份的最小的危险查看数 (就是不知道该村名的身份,查看他的身份具有危险的查看数量),用 ...

  3. pytest文档52-命令行参数--setup-show查看fixture的执行过程

    前言 使用命令行运行 pytest 用例的时候,看不到 fixture 的执行过程. 如果我们想知道fixture的执行过程和先后顺序,可以加上 --setup-show 命令行参数,帮助查看 fix ...

  4. 【树形DP】JSOI BZOJ4472 salesman

    题目内容 vjudge链接 某售货员小T要到若干城镇去推销商品,由于该地区是交通不便的山区,任意两个城镇 之间都只有唯一的可能经过其它城镇的路线. 小T 可以准确地估计出在每个城镇停留的净收 益.这些 ...

  5. 接入WxPusher微信推送服务出现错误：Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported

    背景 使用WxPusher微信推送服务 ,可以及时的将服务的一些运行异常信息,发送到自己的微信上,方便了解服务的运行状态(PS:这个服务是免费的). 你可以在这里看到WxPusher微信推送服务的接入 ...

  6. git stash功能的使用

    一,git stash的作用: 能够将所有未提交的修改(工作区和暂存区)保存至堆栈中,用于后续恢复当前工作目录 说明:架构森林是一个专注架构的博客,地址:https://www.cnblogs.com ...

  7. centos8平台使用stress做压力测试

    一,安装stress: 说明:el8的源里面还没有,先用el7的rpm包 [root@centos8 source]# wget https://download-ib01.fedoraproject ...

  8. c++ qsort的使用

    c++ qsort的使用 qsort函数定义在头文件algorithm中,使用时需要include该头文件 void qsort (void* base, size_t num, size_t siz ...

  9. Disconnected from the target VM, address: '127.0.0.1:1135', transport: 'socket'-SpringBoot启动报错

    一.问题由来 本地代码在一次打包后,再次启动项目时报了一个错误,详细的错误信息如下: 2020-10-23 15:10:26.724 [] [main] INFO o.s.c.a.Annotation ...

  10. Vue框架 周期

    用Vue框架,熟悉它的生命周期可以让开发更好的进行. 首先先看看官网的图,详细的给出了vue的生命周期: 它可以总共分为8个阶段: beforeCreate(创建前), created(创建后), b ...