乐趣区

关于harmonyos:22HarmonyOS鸿蒙开发布局DirectionLayout

jiezi

作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

DirectionalLayout 是 Java UI 中的一种重要组件布局，用于将一组组件 (Component) 依照程度或者垂直方向排布，可能不便地对齐布局内的组件。该布局和其余布局的组合，能够实现更加丰盛的布局形式。

DirectionalLayout 示意图

一、反对的 XML 属性

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

属性名称 中文形容 取值 取值阐明 应用案例
id 控件 identity，用以辨认不同控件对象，每个控件惟一 integer 类型 仅可用于配置控件的 id。 ohos:id=”$+id:component_id”
theme 款式 援用 仅可援用 pattern 资源。 ohos:theme=”$pattern:button_pattern”
width 宽度，必填项 float 类型，match_parent，match_content ohos:width=”20″
ohos:width=”10vp”
ohos:width=”$float:size_value”
height 高度，必填项 float 类型，match_parent，match_content ohos:height=”20″
ohos:height=”20vp”
ohos:height=”$float:size_value”
min_width 最小宽度 float 类型 ohos:min_width=”20″
ohos:min_width=”20vp”
ohos:min_width=”$float:size_value”
min_height 最小高度 float 类型 ohos:min_height=”20″
ohos:min_height=”20vp”
ohos:min_height=”$float:size_value”
alpha 透明度 float 类型 取值范畴在 0~1。 ohos:alpha=”0.86″
ohos:alpha=”$float:value”
enabled 是否启用 boolean 类型 ohos:enabled=”true”
ohos:enabled=”$boolean:true”
visibility 可见性 visible，invisible，hide ohos:visibility=”visible”
padding 内间距 float 类型
margin 外边距 float 类型

DirectionalLayout 的自有 XML 属性见下表：详见官网文档：

属性名称 中文形容 取值 取值阐明 应用案例
orientation 子布局排列方向 horizontal 示意程度方向布局。 ohos:orientation=”horizontal”
vertical 示意垂直方向布局。 ohos:orientation=”vertical”
alignment 对齐形式 left 示意左对齐。 能够设置取值项如表中所列，也能够应用“\ ”进行多项组合。ohos:alignment=”top\ left”
ohos:alignment=”left”
top 示意顶部对齐。
right 示意右对齐。
bottom 示意底部对齐。
horizontal_center 示意程度居中对齐。
vertical_center 示意垂直居中对齐。
center 示意居中对齐。
start 示意靠起始端对齐。
end 示意靠完结端对齐。
total_weight 所有子视图的权重之和 float 类型 能够间接设置浮点数值，也能够援用 float 浮点数资源。 ohos:total_weight=”2.5″
ohos:total_weight=”$float:total_weight”

DirectionalLayout 所蕴含组件可反对的 XML 属性见下表：

表 2 DirectionalLayout 所蕴含组件可反对的 XML 属性

属性名称 中文形容 取值 取值阐明 应用案例
ayout_alignment 对齐形式 left 示意左对齐。 能够设置取值项如表中所列，
也能够应用“\		 ”进行多项组合。
ohos:layout_alignment=”top”
ohos:layout_alignment=”top\		 left”
top 示意顶部对齐。
right 示意右对齐。
bottom 示意底部对齐。
horizontal_center 示意程度居中对齐。
vertical_center 示意垂直居中对齐。
center 示意居中对齐。
weight 比重 float 类型 能够间接设置浮点数值，也能够援用 float 浮点数资源。 ohos:weight=”1″
ohos:weight=”$float:weight”

二、排列形式

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

  • 垂直排列

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

<img src=”https://img.chengxuka.com/WX20210601-175801@2x.png/mark” alt=”WX20210601-175801@2x” style=”zoom:50%;” />

<?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">


<!--
    ohos:orientation="vertical"，垂直排列
    ohos:orientation="horizontal"，程度排列
-->
    <Button
        ohos:width="80vp"
        ohos:height="40vp"
        ohos:margin="20vp"
        ohos:text_size="16fp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 1"/>
    <Button
        ohos:width="80vp"
        ohos:height="40vp"
        ohos:margin="20vp"
        ohos:text_size="16fp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 2"/>
    <Button
        ohos:width="80vp"
        ohos:height="40vp"
        ohos:margin="20vp"
        ohos:text_size="16fp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 3"/>
</DirectionalLayout>

新增一个 graphic 文件，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="#FFC0CB"/>
</shape>
  • 程度排列

程度方向排列三个按钮，成果如下：

只须要批改下面的 DirectionalLayout 布局中的 ohos:orientation 属性即可：由 vertical 改为horizontal。

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:orientation="horizontal">
  <!--
    ohos:orientation="vertical"，垂直排列
    ohos:orientation="horizontal"，程度排列
-->

要留神：

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

<?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">


<!--
    ohos:orientation="vertical"，垂直排列
    ohos:orientation="horizontal"，程度排列
-->
    <Button
        ohos:width="100vp"
        ohos:height="40vp"
        ohos:margin="20vp"
        ohos:text_size="16fp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 1"/>
    <Button
        ohos:width="100vp"
        ohos:height="40vp"
        ohos:margin="20vp"
        ohos:text_size="16fp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 2"/>
    <Button
        ohos:width="100vp"
        ohos:height="40vp"
        ohos:margin="20vp"
        ohos:text_size="16fp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 3"/>
</DirectionalLayout>

还是之前的代码，咱们将 Button 的宽度由 80 调整为 100，成果如下：

三、对齐形式

DirectionalLayout 中的组件应用 layout_alignment 管制本身在布局中的对齐形式，当对齐形式与排列形式方向统一时，对齐形式不会失效，如设置了程度方向的排列形式，则左对齐、右对齐将不会失效。

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="500vp"
    ohos:width="300vp"
    ohos:background_element="#FFDEAD"
    ohos:orientation="vertical"
    >
    <Button
        ohos:width="80vp"
        ohos:height="40vp"
        ohos:text_size="16fp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 1"/>
    <Button
        ohos:width="80vp"
        ohos:height="40vp"
        ohos:text_size="16fp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 2"/>
    <Button
        ohos:width="80vp"
        ohos:height="40vp"
        ohos:text_size="16fp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 3"/>
</DirectionalLayout>

默认成果如下：

<img src=”https://img.chengxuka.com/WX20210601-181803@2x.png/mark” alt=”WX20210601-181803@2x” style=”zoom:50%;” />

当初是垂直方向的布局，3 个按钮呈纵向排列，那么咱们能够通过 layout_alignment 属性来设置他们的对齐形式就是横向上的，所以无效的属性值是：left，right，horizontal_center，center。

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="500vp"
    ohos:width="300vp"
    ohos:background_element="#FFDEAD"
    ohos:orientation="vertical"
    >
    <Button
        ohos:width="80vp"
        ohos:height="40vp"
        ohos:text_size="16fp"
        ohos:layout_alignment="left"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 1"/>
    <Button
        ohos:width="80vp"
        ohos:height="40vp"
        ohos:text_size="16fp"
        ohos:layout_alignment="horizontal_center"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 2"/>
    <Button
        ohos:width="80vp"
        ohos:height="40vp"
        ohos:text_size="16fp"
        ohos:layout_alignment="right"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 3"/>
</DirectionalLayout>

效果图：

<img src=”https://img.chengxuka.com/WX20210601-182140@2x.png/mark” alt=”WX20210601-182140@2x” style=”zoom:50%;” />

如果是程度方向的布局，3 个按钮呈横向排列，那么咱们能够通过 layout_alignment 属性来设置他们的对齐形式就是纵向上的，所以无效的属性值是：top，bottom，vertical_center，center。

效果图：

<img src=”https://img.chengxuka.com/WX20210601-182701@2x.png/mark” alt=”WX20210601-182701@2x” style=”zoom:50%;” />

设置对齐形式后：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="500vp"
    ohos:width="350vp"
    ohos:background_element="#FFDEAD"
    ohos:orientation="horizontal"
    >
    <Button
        ohos:width="80vp"
        ohos:height="40vp"
        ohos:text_size="16fp"
        ohos:layout_alignment="top"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 1"/>
    <Button
        ohos:width="80vp"
        ohos:height="40vp"
        ohos:text_size="16fp"
        ohos:layout_alignment="vertical_center"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 2"/>
    <Button
        ohos:width="80vp"
        ohos:height="40vp"
        ohos:text_size="16fp"
        ohos:layout_alignment="center"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 3"/>
    <Button
        ohos:width="80vp"
        ohos:height="40vp"
        ohos:text_size="16fp"
        ohos:layout_alignment="bottom"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 4"/>
</DirectionalLayout>

效果图：

<img src=”https://img.chengxuka.com/WX20210601-182613@2x.png/mark” alt=”WX20210601-182613@2x” style=”zoom:50%;” />

在 DirectionLayout 上应用 alignment 属性，也能够管制外面的内容的对齐形式：

<?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:orientation="vertical"
    ohos:alignment="bottom|right"
    >

    <Text
        ohos:height="200vp"
        ohos:width="200vp"
        ohos:background_element="#ff00ff"
        />
    <Text
        ohos:height="200vp"
        ohos:width="200vp"
        ohos:background_element="#ffff00"
        />
</DirectionalLayout>

效果图：

<img src=”https://img.chengxuka.com/WX20210602-104916@2x.png/mark” alt=”WX20210602-104916@2x” style=”zoom:50%;” />

写个例子，画个五饼：其实这个例子应用 DependentLayout 布局，特地容易实现，然而此处为了练习，咱们用 DirectionLayout 布局实现。

<img src=”https://img.chengxuka.com/WX20210602-111113@2x.png/mark” alt=”WX20210602-111113@2x” style=”zoom:50%;” />

示例代码：

<?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="match_content"
        ohos:orientation="horizontal"
        >
        <Text
            ohos:width="80vp"
            ohos:height="80vp"
            ohos:background_element="$media:binggan"
            ohos:layout_alignment="left"
            />
        <DirectionalLayout
            ohos:height="match_content"
            ohos:weight="1"
            ohos:width="0vp"
            ohos:orientation="vertical">
            <Text
                ohos:width="80vp"
                ohos:height="80vp"
                ohos:background_element="$media:binggan"
                ohos:layout_alignment="right"
                />
        </DirectionalLayout>
    </DirectionalLayout>

<!-- 两头的饼 -->

    <DirectionalLayout
        ohos:height="0vp"
        ohos:width="match_parent"
        ohos:weight="1"
        ohos:alignment="center"
        ohos:orientation="vertical">
        <Text
            ohos:width="80vp"
            ohos:height="80vp"
            ohos:background_element="$media:binggan"
            />
    </DirectionalLayout>


    <!-- 上面两个饼 -->
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:orientation="horizontal"
        >
        <Text
            ohos:width="80vp"
            ohos:height="80vp"
            ohos:background_element="$media:binggan"
            ohos:layout_alignment="left"
            />
        <DirectionalLayout
            ohos:height="match_content"
            ohos:weight="1"
            ohos:width="0vp"
            ohos:alignment="bottom|right"
            ohos:orientation="vertical">
            <Text
                ohos:width="80vp"
                ohos:height="80vp"
                ohos:background_element="$media:binggan"
                />
        </DirectionalLayout>
    </DirectionalLayout>
</DirectionalLayout>

四、权重

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

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

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

理论应用过程中，倡议应用 width= 0 来按比例调配父布局的宽度，1:1: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="horizontal">
    <Button
        ohos:width="0vp"
        ohos:height="20vp"
        ohos:weight="1"
        ohos:top_margin="20vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 1"/>
    <Button
        ohos:width="0vp"
        ohos:height="20vp"
        ohos:weight="1"
        ohos:top_margin="20vp"
        ohos:background_element="$graphic:color_gray_element"
        ohos:text="Button 2"/>
    <Button
        ohos:width="0vp"
        ohos:height="20vp"
        ohos:weight="1"
        ohos:top_margin="20vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 3"/>
</DirectionalLayout>

新增一个 graphic 文件：color_gray_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>

权重的例子，效果图如下：

<img src=”https://img.chengxuka.com/WX20210602-103744@2x.png/mark” alt=”WX20210602-103744@2x” style=”zoom:50%;” />

示例代码：

<?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
     -->
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="0vp"
        ohos:weight="1"
        ohos:orientation="horizontal"
        >
        <Text
            ohos:width="0vp"
            ohos:height="match_parent"
            ohos:weight="1"
            ohos:background_element="#59D887"
            ohos:text_alignment="center"
            ohos:text="1"
            ohos:text_size="28fp"
            />
        <Text
            ohos:width="0vp"
            ohos:height="match_parent"
            ohos:weight="1"
            ohos:background_element="#88558D"
            ohos:text_alignment="center"
            ohos:text="2"
            ohos:text_size="28fp"
            />
        <Text
            ohos:width="0vp"
            ohos:height="match_parent"
            ohos:weight="1"
            ohos:background_element="#FCCF20"
            ohos:text_alignment="center"
            ohos:text="3"
            ohos:text_size="28fp"
            />
        <Text
            ohos:width="0vp"
            ohos:height="match_parent"
            ohos:weight="1"
            ohos:background_element="#6C8CE0"
            ohos:text_alignment="center"
            ohos:text="4"
            ohos:text_size="28fp"
            />


    </DirectionalLayout>

    <!--
    下半局部：垂直的 DirectionalLayout
     -->
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="0vp"
        ohos:weight="1"
        ohos:orientation="vertical"
        >
        <Text
            ohos:width="match_parent"
            ohos:height="0vp"
            ohos:weight="1"
            ohos:background_element="#59D887"
            ohos:text_alignment="center"
            ohos:text="a"
            ohos:text_size="28fp"
            />
        <Text
            ohos:width="match_parent"
            ohos:height="0vp"
            ohos:weight="1"
            ohos:background_element="#88558D"
            ohos:text_alignment="center"
            ohos:text="b"
            ohos:text_size="28fp"
            />
        <Text
            ohos:width="match_parent"
            ohos:height="0vp"
            ohos:weight="1"
            ohos:background_element="#FCCF20"
            ohos:text_alignment="center"
            ohos:text="c"
            ohos:text_size="28fp"
            />
        <Text
            ohos:width="match_parent"
            ohos:height="0vp"
            ohos:weight="1"
            ohos:background_element="#6C8CE0"
            ohos:text_alignment="center"
            ohos:text="d"
            ohos:text_size="28fp"
            />
    </DirectionalLayout>

</DirectionalLayout>

利用文本组件实现一个标题栏和具体内容的界面。

<img src=”https://img.chengxuka.com/WX20210602-091458@2x.png/mark” alt=”WX20210602-091458@2x” style=”zoom:50%;” />

源码示例：

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:background_element="$graphic:color_light_gray_element">
    <Text
        ohos:id="$+id:text1"
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:text_size="25fp"
        ohos:top_margin="15vp"
        ohos:left_margin="15vp"
        ohos:right_margin="15vp"

        ohos:top_padding="10vp"
        ohos:bottom_padding="10vp"

        ohos:background_element="$graphic:background_text"
        ohos:text="Title"
        ohos:text_weight="1000"
        ohos:text_alignment="horizontal_center"/>
    <Text
        ohos:id="$+id:text2"
        ohos:width="match_parent"
        ohos:height="640vp"
        ohos:text_size="25fp"
        ohos:background_element="$graphic:background_text"
        ohos:text="Content"
        ohos:top_margin="15vp"
        ohos:left_margin="15vp"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:text_alignment="center"
        ohos:below="$id:text1"
        ohos:text_font="serif"/>
    <Button
        ohos:id="$+id:button1"
        ohos:width="100vp"
        ohos:height="match_content"
        ohos:text_size="15fp"
        ohos:background_element="$graphic:background_text"
        ohos:text="Previous"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:padding="5vp"
        ohos:below="$id:text2"
        ohos:left_of="$id:button2"
        ohos:text_font="serif"/>
    <Button
        ohos:id="$+id:button2"
        ohos:width="100vp"
        ohos:height="match_content"
        ohos:text_size="15fp"
        ohos:background_element="$graphic:background_text"
        ohos:text="Next"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:padding="5vp"
        ohos:align_parent_end="true"
        ohos:below="$id:text2"
        ohos:text_font="serif"/>
</DependentLayout>

color_light_gray_element.xml：

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

background_text.xml：

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="30"/>
    <solid
        ohos:color="#C0C0C0"/>
</shape>

更多内容：

1、社区：鸿蒙巴士 https://www.harmonybus.net/

2、公众号：HarmonyBus

3、技术交换 QQ 群：714518656

4、视频课：https://www.chengxuka.com

退出移动版