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

简介: 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>
相关文章
|
7天前
|
前端开发 JavaScript Java
计算机java项目|springboot基于spring框架的电影订票系统
计算机java项目|springboot基于spring框架的电影订票系统
|
1天前
|
Java 测试技术 Python
《手把手教你》系列基础篇(七十九)-java+ selenium自动化测试-框架设计基础-TestNG依赖测试-下篇(详解教程)
【6月更文挑战第20天】TestNG是一个Java测试框架,提供两种测试方法依赖机制:强依赖(所有前置方法成功后才运行)和弱依赖(即使前置方法失败,后置方法仍运行)。文中通过代码示例展示了这两种依赖如何实现,并解释了当依赖方法失败时,如何影响后续方法的执行。文章还包含了TestNG Suite的运行结果截图来辅助说明。
22 8
|
5天前
|
Cloud Native Java API
Java一分钟之-Micronaut:轻量级微服务框架
【6月更文挑战第16天】Micronaut是面向JVM的微服务框架,以其快速启动、低内存占用著称。文章探讨了配置管理、注解理解和AOT编译的挑战,提供了解决方案,并通过一个简单的HTTP服务示例展示了如何创建控制器和应用启动类。通过克服这些问题,开发者能更好地利用Micronaut构建高效微服务。
33 8
|
3天前
|
Java 测试技术 Python
《手把手教你》系列基础篇(七十七)-java+ selenium自动化测试-框架设计基础-TestNG依赖测试- 上篇(详解教程)
【6月更文挑战第18天】TestNG是一个Java测试框架,它允许在测试方法间定义执行顺序和依赖关系。当不指定依赖时,TestNG默认按方法名首字母排序执行。`@Test`注解的`dependsOnMethods`属性用于指定方法依赖,如`test1`依赖`test4`,则实际执行顺序为`test4`、`test2`、`test3`、`test1`。如果依赖的方法失败,后续依赖的方法将被跳过。此外,`dependsOnGroups`属性通过组名指定依赖,方便管理多个相关测试方法。通过`groups`定义方法所属组,然后在其他方法中用`dependsOnGroups`引用这些组。
20 5
|
2天前
|
XML Web App开发 测试技术
《手把手教你》系列基础篇(七十八)-java+ selenium自动化测试-框架设计基础-TestNG依赖测试- 中篇(详解教程)
【6月更文挑战第19天】本文介绍了使用TestNG框架配置XML文件来管理测试用例的分组和依赖关系。
14 2
|
3天前
|
存储 XML Java
在 Java 中,Spring 框架提供了一种更加简单的方式来读取和存储对象
【6月更文挑战第18天】Java Spring 框架利用注解简化对象管理:@Component(及衍生注解@Service等)标注Bean类,自动注册到容器;@Autowired用于字段或方法,实现依赖注入,提升灵活性,减少XML配置。
12 2
|
9天前
|
存储 安全 算法
Java基础19-一文搞懂Java集合类框架,以及常见面试题(二)
Java基础19-一文搞懂Java集合类框架,以及常见面试题(二)
37 8
|
7天前
|
Web App开发 XML 安全
《手把手教你》系列基础篇(七十三)-java+ selenium自动化测试-框架设计基础-TestNG实现启动不同浏览器(详解教程)
【6月更文挑战第14天】本文介绍了如何使用TestNg进行自动化测试,特别是通过变量参数启动不同浏览器的步骤。
20 5
|
9天前
|
安全 Java 开发工具
Java基础19-一文搞懂Java集合类框架,以及常见面试题(一)
Java基础19-一文搞懂Java集合类框架,以及常见面试题(一)
31 6
|
5天前
|
XML 测试技术 数据格式
《手把手教你》系列基础篇(七十五)-java+ selenium自动化测试-框架设计基础-TestNG实现DDT - 中篇(详解教程)
【6月更文挑战第16天】本文介绍了TestNG中`@DataProvider`的两种使用方法。本文通过实例展示了TestNG如何利用`@DataProvider`结合方法名和`ITestContext`来灵活地为测试方法传递参数。
12 1