HarmonyOS —常用布局开发指导-DirectionalLayout
鸿蒙开发

HarmonyOS —常用布局开发指导-DirectionalLayout

Leave a comment

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

支持的XML属性

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

DirectionalLayout的自有XML属性见下表：

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

排列方式

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

垂直排列

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

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

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

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

<?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不会自动换行，超出布局大小的组件部分无法显示。界面显示如下：图4 DirectionalLayout不自动换行示例

对齐方式

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>

图5 三种对齐方式效果示例

权重

权重（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: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_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>

场景示例

图6

源码示例：

<?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>
0 0 投票数
文章评分
订阅评论
提醒
0 评论
最旧
最新 最多投票
内联反馈
查看所有评论
0
希望看到您的想法，请您发表评论x
🚀 如未找到文章请搜索栏搜素 | Ctrl+D收藏本站 | 联系邮箱:15810050733@qq.com