4、依赖布局DependentLayout

作者：韩茹

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

鸿蒙巴士专栏作家

DependentLayout是Java UI零碎里的一种常见布局。与DirectionalLayout相比，领有更多的排布形式，每个组件能够指定绝对于其余同级元素的地位，或者指定绝对于父组件的地位。

一、反对的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：

示例代码：

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

效果图：

示例代码：

<?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等参数可别离实现相似的布局。

举个例子，效果图：

<img src="https://img.chengxuka.com/WX20210602-134336@2x.png/mark" alt="WX20210602-134336@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"    >    <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 绝对于父组件

以上地位布局能够组合，造成处于左上角、左下角、右上角、右下角的布局。

示例代码：

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

举个例子，实现九饼：

<img src="https://img.chengxuka.com/WX20210602-133348@2x.png/mark" alt="WX20210602-133348@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"    >    <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>

最初，再来个例子：

示例代码：

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