鸿蒙应用开发 | 6大布局之 相对布局(DependentLayout)!

大家好,我是你们的朋友 朋哥,今天开始朋哥开始研究鸿蒙了,会写一些文章分享给大家,希望多多提意见。

上一篇原创文章 解读了 鸿蒙开发布局的线性布局,也是使用最多的布局,一般情况下,该布局都能实现。

但是如果在一个布局多个组件的位置排布太乱,排列方式更多的时候,还是相对布局更实用。

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

总结一句:一个组件相对其它组件设置位置。


老规矩来个图看起来更直观:
 

鸿蒙应用开发 | 6大布局之 相对布局(DependentLayout)!_第1张图片

看上图一个界面中五个组件效果,相对布局就是一个相对另一个设置位置。

支持的XML属性

DependentLayout的自有XML属性(更详尽的文档 请查看 官网api)

属性名称

中文描述

取值说明

alignment

对齐方式

表示左对齐。

表示顶部对齐。

表示右对齐。

表示底部对齐。

表示水平居中对齐。

表示垂直居中对齐。

表示居中对齐。

DependentLayout所包含组件可支持的XML属性见下表:(更详尽的文档 请查看 官网api)

 

属性名称

中文描述

使用案例

left_of

将右边缘与另一个子组件的左边缘对齐

ohos:left_of="$id:component_id"

right_of

将左边缘与另一个子组件的右边缘对齐

ohos:right_of="$id:component_id"

start_of

将结束边与另一个子组件的起始边对齐

ohos:start_of="$id:component_id"

end_of

将起始边与另一个子组件的结束边对齐

ohos:end_of="$id:component_id"

above

将下边缘与另一个子组件的上边缘对齐

ohos:above="$id:component_id"

below

将上边缘与另一个子组件的下边缘对齐

ohos:below="$id:component_id"

align_baseline

将子组件的基线与另一个子组件的基线对齐

ohos:align_baseline="$id:component_id"

align_left

将左边缘与另一个子组件的左边缘对齐

ohos:align_left="$id:component_id"

align_top

将上边缘与另一个子组件的上边缘对齐

ohos:align_top="$id:component_id"

align_right

将右边缘与另一个子组件的右边缘对齐

ohos:align_right="$id:component_id"

align_bottom

将底边与另一个子组件的底边对齐

ohos:align_bottom="$id:component_id"

align_start

将起始边与另一个子组件的起始边对齐

ohos:align_start="$id:component_id"

align_end

将结束边与另一个子组件的结束边对齐

ohos:align_end="$id:component_id"

align_parent_left

将左边缘与父组件的左边缘对齐

ohos:align_parent_left="true"

ohos:align_parent_left="$boolean:true"

align_parent_top

将上边缘与父组件的上边缘对齐

ohos:align_parent_top="true"

ohos:align_parent_top="$boolean:true"

align_parent_right

将右边缘与父组件的右边缘对齐

ohos:align_parent_right="true"

ohos:align_parent_right="$boolean:true"

align_parent_bottom

将底边与父组件的底边对齐

ohos:align_parent_bottom="true"

ohos:align_parent_bottom="$boolean:true"

align_parent_start

将起始边与父组件的起始边对齐

ohos:align_parent_start="true"

ohos:align_parent_start="$boolean:true"

align_parent_end

将结束边与父组件的结束边对齐

ohos:align_parent_end="true"

ohos:align_parent_end="$boolean:true"

center_in_parent

将子组件保持在父组件的中心

ohos:center_in_parent="true"

ohos:center_in_parent="$boolean:true"

horizontal_center

将子组件保持在父组件水平方向的中心

ohos:horizontal_center="true"

ohos:horizontal_center="$boolean:true"

vertical_center

将子组件保持在父组件垂直方向的中心

ohos:vertical_center="true"

ohos:vertical_center="$boolean:true"


排列方式

DependentLayout的排列方式分为两种:1,相对于其他同级组件,2,相对于其他父组件的位置进行布局。

相对于同级组件

1,相对 同级 右对齐



    
    

 

效果图:

鸿蒙应用开发 | 6大布局之 相对布局(DependentLayout)!_第2张图片

2,相对 同级 底部对齐



    
    

效果图:
 

鸿蒙应用开发 | 6大布局之 相对布局(DependentLayout)!_第3张图片


同样的 规律,其它的(above、start_of、left_of、right_of)分别设置不同的相对位置。

相对于父组件

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



     
    
    
        // 组合起来 该组件显示在屏幕的顶部最左边

​​​​​​​效果图:
 

鸿蒙应用开发 | 6大布局之 相对布局(DependentLayout)!_第4张图片

相对布局其实使用习惯了是最好实现界面的一种方式,建议大家多了解一下该布局的开发。

关注公众号【程序员漫话编程】,后台回复【鸿蒙】,即可获取上千鸿蒙开源组件~

原创不易,有用就关注一下。要是帮到了你 就给个三连吧,多谢支持。
 

觉得不错的小伙伴,记得帮我 点个赞和关注哟,笔芯笔芯~**

作者:码工
 

有问题请留言或者私信,可以 微信搜索:程序员漫话编程,关注公众号获得更多免费学习资料。

你可能感兴趣的:(鸿蒙应用开发入门到进阶,鸿蒙,鸿蒙开发,鸿蒙系统,鸿蒙app,鸿蒙应用)