2.3【HarmonyOS鸿蒙开发UI】依赖布局DependentLayout

41 篇文章 0 订阅

作者:韩茹

公司:程序咖(北京)科技有限公司

鸿蒙巴士专栏作家

DependentLayout是Java UI系统里的一种常见布局。与DirectionalLayout相比,拥有更多的排布方式,每个组件可以指定相对于其他同级元素的位置,或者指定相对于父组件的位置。

0000000000011111111.20210521145409.94860093388810449052258963138964

一、支持的XML属性

DependentLayout的共有XML属性继承自:Component

属性名称中文描述取值取值说明使用案例
id控件identity,用以识别不同控件对象,每个控件唯一integer类型仅可用于配置控件的id。ohos:id="$+id:component_id"
theme样式引用仅可引用pattern资源。ohos:theme="$pattern:button_pattern"
width宽度,必填项float类型,match_parent,match_contentohos:width=“20"
ohos:width=“10vp"
ohos:width=”$float:size_value”
height高度,必填项float类型,match_parent,match_contentohos: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,hideohos:visibility=“visible”
padding内间距float类型
margin外边距float类型

DependentLayout的自有XML属性见下表:详见官方文档

属性名称中文描述取值取值说明使用案例
alignment对齐方式left表示左对齐。可以设置取值项如表中所列,也可以使用“|”进行多项组合。
ohos:alignment="top|left"
ohos:alignment=“left”
top表示顶部对齐。
right表示右对齐。
bottom表示底部对齐。
horizontal_center表示水平居中对齐。
vertical_center表示垂直居中对齐。
center表示居中对齐。

DependentLayout所包含组件可支持的XML属性见下表:

表2 DependentLayout所包含组件可支持的XML属性表

属性名称中文描述取值取值说明使用案例
left_of将右边缘与另一个子组件的左边缘对齐引用仅可引用DependentLayout中包含的其他组件的id。ohos:left_of="$id:component_id"
right_of将左边缘与另一个子组件的右边缘对齐引用仅可引用DependentLayout中包含的其他组件的id。ohos:right_of="$id:component_id"
above将下边缘与另一个子组件的上边缘对齐引用仅可引用DependentLayout中包含的其他组件的idohos:above="$id:component_id"
below将上边缘与另一个子组件的下边缘对齐引用仅可引用DependentLayout中包含的其他组件的idohos:below="$id:component_id"
align_baseline将子组件的基线与另一个子组件的基线对齐引用仅可引用DependentLayout中包含的其他组件的idohos:align_baseline="$id:component_id"
align_left将左边缘与另一个子组件的左边缘对齐引用仅可引用DependentLayout中包含的其他组件的id。ohos:align_left="$id:component_id"
align_top将上边缘与另一个子组件的上边缘对齐引用仅可引用DependentLayout中包含的其他组件的idohos:align_top="$id:component_id"
align_right将右边缘与另一个子组件的右边缘对齐引用仅可引用DependentLayout中包含的其他组件的id。ohos:align_right="$id:component_id"
align_bottom将底边与另一个子组件的底边对齐引用仅可引用DependentLayout中包含的其他组件的idohos:align_bottom="$id:component_id"
align_start将起始边与另一个子组件的起始边对齐引用仅可引用DependentLayout中包含的其他组件的id。ohos:align_start="$id:component_id"
align_end将结束边与另一个子组件的结束边对齐引用仅可引用DependentLayout中包含的其他组件的id。ohos:align_end="$id:component_id"
align_parent_left将左边缘与父组件的左边缘对齐boolean类型可以直接设置true/false,也可以引用boolean资源。ohos:align_parent_left=“true"
ohos:align_parent_left=”$boolean:true"
align_parent_top将上边缘与父组件的上边缘对齐boolean类型可以直接设置true/false,也可以引用boolean资源。ohos:align_parent_top=“true"
ohos:align_parent_top=”$boolean:true"
align_parent_right将右边缘与父组件的右边缘对齐boolean类型可以直接设置true/false,也可以引用boolean资源。ohos:align_parent_right=“true"
ohos:align_parent_right=”$boolean:true"
align_parent_bottom将底边与父组件的底边对齐boolean类型可以直接设置true/false,也可以引用boolean资源。ohos:align_parent_bottom=“true"
ohos:align_parent_bottom=”$boolean:true"
center_in_parent将子组件保持在父组件的中心boolean类型可以直接设置true/false,也可以引用boolean资源。ohos:center_in_parent=“true"
ohos:center_in_parent=”$boolean:true"
horizontal_center将子组件保持在父组件水平方向的中心boolean类型可以直接设置true/false,也可以引用boolean资源。ohos:horizontal_center=“true"
ohos:horizontal_center=”$boolean:true"
vertical_center将子组件保持在父组件垂直方向的中心boolean类型可以直接设置true/false,也可以引用boolean资源。ohos:vertical_center=“true"
ohos:vertical_center=”$boolean:true"

二、排列方式

DependentLayout的排列方式是相对于其他同级组件或者父组件的位置进行布局。

2.1 相对于同级组件

end_of:

WX20210602-113523@2x

示例代码:

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:background_element="#EDEDED"
    >
    <Text
        ohos:id="$+id:text1"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:left_margin="15vp"
        ohos:top_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:text="text1"
        ohos:text_size="20fp"
        ohos:background_element="#1E90FF"/>
    <Text
        ohos:id="$+id:text2"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:left_margin="15vp"
        ohos:top_margin="15vp"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:text="end_of text1"
        ohos:text_size="20fp"
        ohos:background_element="#FFC0CB"
        ohos:end_of="$id:text1"/>
</DependentLayout>

below:

效果图:

WX20210602-113728@2x

示例代码:

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:background_element="#EDEDED"
    >
    <Text
        ohos:id="$+id:text1"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:left_margin="15vp"
        ohos:top_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:text="text1"
        ohos:text_size="20fp"
        ohos:background_element="#1E90FF"/>
    <Text
        ohos:id="$+id:text2"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:left_margin="15vp"
        ohos:top_margin="15vp"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:text="end_of text1"
        ohos:text_size="20fp"
        ohos:background_element="#FFC0CB"
        ohos:end_of="$id:text1"/>

    <Text
        ohos:id="$+id:text3"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:left_margin="15vp"
        ohos:top_margin="15vp"
        ohos:right_margin="40vp"
        ohos:bottom_margin="15vp"
        ohos:text="below text1"
        ohos:text_size="20fp"
        ohos:background_element="#FF00FF"
        ohos:below="$id:text1"/>
</DependentLayout>

其他的above、start_of、left_of、right_of等参数可分别实现类似的布局。

举个例子,效果图:

WX20210602-134336@2x

示例代码:

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    >
    <Button
        ohos:id="$+id:button1"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="中心"
        ohos:text_size="20fp"
        ohos:padding="10vp"
        ohos:margin="10vp"
        ohos:background_element="#EEEEEE"
        ohos:center_in_parent="true"/>
    <Button
        ohos:id="$+id:button2"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="上面"
        ohos:text_size="20fp"
        ohos:padding="10vp"
        ohos:above="$id:button1"
        ohos:background_element="#EEEEEE"
        ohos:align_left="$id:button1"
        />
    <Button
        ohos:id="$+id:button3"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="下面"
        ohos:text_size="20fp"
        ohos:padding="10vp"
        ohos:below="$id:button1"
        ohos:background_element="#EEEEEE"
        ohos:align_left="$id:button1"
        />
    <Button
        ohos:id="$+id:button4"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="左面"
        ohos:text_size="20fp"
        ohos:padding="10vp"
        ohos:left_of="$id:button1"
        ohos:align_top="$id:button1"
        ohos:background_element="#EEEEEE"
        />
    <Button
        ohos:id="$+id:button5"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="右面"
        ohos:text_size="20fp"
        ohos:padding="10vp"
        ohos:right_of="$id:button1"
        ohos:align_top="$id:button1"
        ohos:background_element="#EEEEEE"
        />
</DependentLayout>

2.2 相对于父组件

以上位置布局可以组合,形成处于左上角、左下角、右上角、右下角的布局。

WX20210602-132611@2x

示例代码:

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="300vp"
    ohos:height="200vp"
    ohos:background_element="#ffbbbbbb">
    <Text
        ohos:id="$+id:text1"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="父容器右侧并居中"
        ohos:text_size="12fp"
        ohos:background_element="#48D1CC"
        ohos:align_parent_right="true"
        ohos:center_in_parent="true"/>
    <Text
        ohos:id="$+id:text2"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="父容器底部"
        ohos:text_size="12fp"
        ohos:background_element="#FFA500"
        ohos:align_parent_bottom="true"
        ohos:center_in_parent="true"/>
    <Text
        ohos:id="$+id:text3"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="父容器中心"
        ohos:text_size="12fp"
        ohos:background_element="#BA55D3"
        ohos:center_in_parent="true"/>
    <Text
        ohos:id="$+id:text4"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="父容器左上"
        ohos:text_size="12fp"
        ohos:background_element="#FF1493"
        ohos:align_parent_left="true"
        ohos:align_parent_top="true"/>
    <Text
        ohos:id="$+id:text5"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="父容器左下"
        ohos:text_size="12fp"
        ohos:background_element="#1E90FF"
        ohos:align_parent_left="true"
        ohos:align_parent_bottom="true"/>
</DependentLayout>

举个例子,完成九饼:

WX20210602-133348@2x

示例代码:

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    >
    <Text

        ohos:id="$+id:text1"
        ohos:width="80vp"
        ohos:height="80vp"
        ohos:background_element="$media:binggan"
        ohos:align_parent_left="true"
        ohos:align_parent_top="true"/>
    <Text
        ohos:id="$+id:text2"
        ohos:width="80vp"
        ohos:height="80vp"
        ohos:background_element="$media:binggan"
        ohos:align_parent_top="true"
        ohos:center_in_parent="true"/>
    <Text
        ohos:id="$+id:text3"
        ohos:width="80vp"
        ohos:height="80vp"
        ohos:background_element="$media:binggan"
        ohos:align_parent_right="true"
        ohos:align_parent_top="true"
        />
    <Text
        ohos:id="$+id:text4"
        ohos:width="80vp"
        ohos:height="80vp"
        ohos:background_element="$media:binggan"
        ohos:align_parent_left="true"
        ohos:vertical_center="true"/>
    <Text
        ohos:id="$+id:text5"
        ohos:width="80vp"
        ohos:height="80vp"
        ohos:background_element="$media:binggan"
        ohos:center_in_parent="true"/>
    <Text
        ohos:id="$+id:text6"
        ohos:width="80vp"
        ohos:height="80vp"
        ohos:background_element="$media:binggan"
        ohos:vertical_center="true"
        ohos:align_parent_right="true"/>
    <Text
        ohos:id="$+id:text7"
        ohos:width="80vp"
        ohos:height="80vp"
        ohos:background_element="$media:binggan"
        ohos:align_parent_left="true"
        ohos:align_parent_bottom="true"/>
    <Text
        ohos:id="$+id:text8"
        ohos:width="80vp"
        ohos:height="80vp"
        ohos:background_element="$media:binggan"
        ohos:horizontal_center="true"
        ohos:align_parent_bottom="true"/>
    <Text
        ohos:id="$+id:text9"
        ohos:width="80vp"
        ohos:height="80vp"
        ohos:background_element="$media:binggan"
        ohos:align_parent_bottom="true"
        ohos:align_parent_right="true"/>
</DependentLayout>

最后,再来个例子:

WX20210602-140056@2x

示例代码:

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:background_element="#959595">
    <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="5vp"
        ohos:bottom_padding="5vp"
        ohos:background_element="#6C6C6C"
        ohos:text="Title"
        ohos:text_weight="1000"
        ohos:text_alignment="horizontal_center"
        />
    <Text
        ohos:id="$+id:text2"
        ohos:width="match_content"
        ohos:height="150vp"
        ohos:text_size="10fp"
        ohos:background_element="#6C6C6C"
        ohos:text="Catalog"
        ohos:top_margin="15vp"
        ohos:left_margin="15vp"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:left_padding="5vp"
        ohos:right_padding="5vp"
        ohos:align_parent_left="true"
        ohos:text_alignment="center"
        ohos:multiple_lines="true"
        ohos:below="$id:text1"
        ohos:text_font="serif"/>
    <Text
        ohos:id="$+id:text3"
        ohos:width="match_parent"
        ohos:height="150vp"
        ohos:text_size="25fp"
        ohos:background_element="#6C6C6C"
        ohos:text="Content"
        ohos:top_margin="15vp"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:text_alignment="center"
        ohos:below="$id:text1"
        ohos:end_of="$id:text2"
        ohos:text_font="serif"/>
    <Button
        ohos:id="$+id:button1"
        ohos:width="70vp"
        ohos:height="match_content"
        ohos:text_size="15fp"
        ohos:background_element="#6C6C6C"
        ohos:text="Previous"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:padding="5vp"
        ohos:below="$id:text3"
        ohos:left_of="$id:button2"
        ohos:italic="false"
        ohos:text_weight="5"
        ohos:text_font="serif"/>
    <Button
        ohos:id="$+id:button2"
        ohos:width="70vp"
        ohos:height="match_content"
        ohos:text_size="15fp"
        ohos:background_element="#6C6C6C"
        ohos:text="Next"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:padding="5vp"
        ohos:align_parent_end="true"
        ohos:below="$id:text3"
        ohos:italic="false"
        ohos:text_weight="5"
        ohos:text_font="serif"/>
</DependentLayout>

更多内容:

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

2、公众号:HarmonyBus

3、技术交流QQ群:714518656

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

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值