#过年不停更# HarmonyOS基础之DirectionalLayout 原创 精华

发布于 2022-2-8 11:44
浏览
1收藏

春节不停更,此文正在参加「星光计划-春节更帖活动」
作者:肖瑜博

1. 前言

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

2. 属性

可取值 作用
width match_parent 宽度与父视图相等
match_content 宽度等于内容所需要的宽度
具体数值:30vp等 指定宽度为30vp
height match_parent 高度与父视图相等
match_content 高度等于内容所需要的宽度
具体数值:30vp等 指定高度为30vp
orientation horizontal 子视图水平排列
vertical 子视图竖直排列
background_element 具体某个xml文件,如:$graphic:color_gray_element 按照color_gray_element.xml文件设置布局样式
具体的颜色名称,如:red 设置背景颜色,例子中设置为红色
设置颜色值,如:#000000 设置背景颜色,例子中设置为黑色
alignment center 所有子视图居中对齐
left 所有子视图左对齐
top 所有子视图上对齐
right 所有子视图右对齐
bottom 所有子视图底部对齐
right bottom所有子视图按右下角对齐
total_weight 具体数值,整数或浮点数,如:2.5 所有子视图的权重之和为2.5
layout_alignment left 左对齐
top 上对齐
right 右对齐
bottom 下对齐
horizontal_center 水平方向居中
vertical_center 垂直方向居中
center 水平和垂直方向都居中
weight width=”0vp”,weight=”1” 组件在宽度上占的权重为1
height=”0vp”,weight=”1” 组件在高度上占的权重为1

3. 效果展示

纯DirectionLayout实现如下“爱心”效果:
 #过年不停更#  HarmonyOS基础之DirectionalLayout -开源基础软件社区

如上图所示,我们先对这颗爱心进行简单的分析!这是我们用16个正方形的方块拼成的爱心,其中最顶部有2颗方块,然后往下是4颗、3颗、2颗。。。到底部只有1颗。这就可以使用我们的垂直布局实现。然后每一行我们都可以使用水平布局,然后再配合使用left_margin,使每个一小方块都有水平间距,就能实现我们的爱心了!最后把第一行的2个小方块使用top_margin距离顶部一定的距离,就能把爱心居中显示了!具体代码如下:

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="top"
    ohos:orientation="vertical"
    >

    <DirectionalLayout
        ohos:height="40vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:top_margin="150vp">

        <Text
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:background_element="red"
            ohos:left_margin="80vp"/>

        <Text
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:background_element="red"
            ohos:left_margin="120vp"/>

    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="40vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal">

        <Text
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:background_element="red"
            ohos:left_margin="40vp"/>

        <Text
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:background_element="red"
            ohos:left_margin="40vp"/>

        <Text
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:background_element="red"
            ohos:left_margin="40vp"/>

        <Text
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:background_element="red"
            ohos:left_margin="40vp"/>

    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="40vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal">

        <Text
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:background_element="red"/>

        <Text
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:background_element="red"
            ohos:left_margin="120vp"/>

        <Text
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:background_element="red"
            ohos:left_margin="120vp"/>

    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="40vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal">

        <Text
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:background_element="red"
            ohos:left_margin="40vp"/>

        <Text
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:background_element="red"
            ohos:left_margin="200vp"/>

    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="40vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal">

        <Text
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:background_element="red"
            ohos:left_margin="80vp"/>

        <Text
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:background_element="red"
            ohos:left_margin="120vp"/>

    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="40vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal">

        <Text
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:background_element="red"
            ohos:left_margin="120vp"/>

        <Text
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:background_element="red"
            ohos:left_margin="40vp"/>

    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="40vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal">

        <Text
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:background_element="red"
            ohos:left_margin="160vp"/>

    </DirectionalLayout>

</DirectionalLayout>

更多原创内容请关注:中软国际 HarmonyOS 技术团队

入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-2-8 11:55:05修改
1
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐