HarmonyOS之常用布局DependentLayout的使用
2024-06-04 18:20:06
一、DependentLayout 简介
- DependentLayout 是 Java UI 系统里的一种常见布局。与DirectionalLayout 相比，拥有更多的排布方式，每个组件可以指定相对于其他同级元素的位置，或者指定相对于父组件的位置。
- DirectionalLayout 布局方式，请参考我的博客：HarmonyOS之常用布局DirectionalLayout的使用。
- DependentLayout 布局示意如下：
二、支持的 XML 属性
- DependentLayout 的共有 XML 属性继承自 Component，详情请参考我的博客：HarmonyOS之组件通用的XML属性总览。
- DependentLayout 的自有 XML 属性见下表：
| 属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 |
|---|---|---|---|---|
| alignment | 对齐方式 | left | 表示左对齐 |
可以设置取值项如表中所列，也可以使用“|”进行多项组合。 ohos:alignment="top|left" ohos:alignment="left" |
| top | 表示顶部对齐 | |||
| left | 表示左对齐 | |||
| bottom | 表示底部对齐 | |||
| horizontal_center | 表示水平居中对齐 | |||
| vertical_center | 表示垂直居中对齐 | |||
| center | 表示居中对齐 |
- DependentLayout 所包含组件可支持的 XML 属性见下表：
| 属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 |
|---|---|---|---|---|
| left_of | 将右边缘与另一个子组件的左边缘对齐 | 引用 | 仅可引用DependentLayout中包含的其他组件的id | 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 | 将左边缘与父组件的左边缘对齐 | boolean类型 | 可以直接设置true/false，也可以引用boolean资源 |
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 的排列方式是相对于其他同级组件或者父组件的位置进行布局。
① 相对于同级组件
- end_of
- 如下图所示：
- 示例代码：
<?xml version="1.0" encoding="utf-8"?><DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_content"ohos:height="match_content"ohos:background_element="$graphic:color_light_gray_element"><Textohos: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="$graphic:color_cyan_element"/><Textohos: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="$graphic:color_cyan_element"ohos:end_of="$id:text1"/></DependentLayout>
- color_light_gray_element.xml：
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#EDEDED"/></shape>
- color_cyan_element.xml：
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#00FFFD"/></shape>
- below
- 如下图所示：
- 示例代码：
<?xml version="1.0" encoding="utf-8"?><DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_content"ohos:height="match_content"ohos:background_element="$graphic:color_light_gray_element"><Textohos:id="$+id:text1"ohos:width="match_content"ohos:height="match_content"ohos:left_margin="15vp"ohos:top_margin="15vp"ohos:right_margin="40vp"ohos:text="text1"ohos:text_size="20fp"ohos:background_element="$graphic:color_cyan_element"/><Textohos:id="$+id:text2"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="$graphic:color_cyan_element"ohos:below="$id:text1"/></DependentLayout>
- color_light_gray_element.xml：
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#EDEDED"/></shape>
- color_cyan_element.xml：
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#00FFFD"/></shape>
- 其他的 above、start_of、left_of、right_of 等参数可分别实现类似的布局。
② 相对于父组件
- 以上位置布局可以组合，形成处于左上角、左下角、右上角、右下角的布局，如下：
- 示例代码：
<?xml version="1.0" encoding="utf-8"?><DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="300vp"ohos:height="100vp"ohos:background_element="$graphic:color_background_gray_element"><Textohos:id="$+id:text6"ohos:width="match_content"ohos:height="match_content"ohos:text="align_parent_right"ohos:text_size="12fp"ohos:background_element="$graphic:color_cyan_element"ohos:align_parent_right="true"ohos:center_in_parent="true"/><Textohos:id="$+id:text7"ohos:width="match_content"ohos:height="match_content"ohos:text="align_parent_bottom"ohos:text_size="12fp"ohos:background_element="$graphic:color_cyan_element"ohos:align_parent_bottom="true"ohos:center_in_parent="true"/><Textohos:id="$+id:text8"ohos:width="match_content"ohos:height="match_content"ohos:text="center_in_parent"ohos:text_size="12fp"ohos:background_element="$graphic:color_cyan_element"ohos:center_in_parent="true"/><Textohos:id="$+id:text9"ohos:width="match_content"ohos:height="match_content"ohos:text="align_parent_left_top"ohos:text_size="12fp"ohos:background_element="$graphic:color_cyan_element"ohos:align_parent_left="true"ohos:align_parent_top="true"/></DependentLayout>
- color_background_gray_element.xml：
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#ffbbbbbb"/></shape>
- color_cyan_element.xml：
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#00FFFD"/></shape>
四、场景示例
- 使用 DependentLayout 可以轻松实现内容丰富的布局，如下图所示：
- 源码示例：
<?xml version="1.0" encoding="utf-8"?><DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="match_content"ohos:background_element="$graphic:color_background_gray_element"><Textohos: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:background_element="$graphic:color_gray_element"ohos:text="Title"ohos:text_weight="1000"ohos:text_alignment="horizontal_center"/><Textohos:id="$+id:text2"ohos:width="match_content"ohos:height="120vp"ohos:text_size="10fp"ohos:background_element="$graphic:color_gray_element"ohos:text="Catalog"ohos:top_margin="15vp"ohos:left_margin="15vp"ohos:right_margin="15vp"ohos:bottom_margin="15vp"ohos:align_parent_left="true"ohos:text_alignment="center"ohos:multiple_lines="true"ohos:below="$id:text1"ohos:text_font="serif"/><Textohos:id="$+id:text3"ohos:width="match_parent"ohos:height="120vp"ohos:text_size="25fp"ohos:background_element="$graphic:color_gray_element"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"/><Buttonohos:id="$+id:button1"ohos:width="70vp"ohos:height="match_content"ohos:text_size="15fp"ohos:background_element="$graphic:color_gray_element"ohos:text="Previous"ohos:right_margin="15vp"ohos:bottom_margin="15vp"ohos:below="$id:text3"ohos:left_of="$id:button2"ohos:italic="false"ohos:text_weight="5"ohos:text_font="serif"/><Buttonohos:id="$+id:button2"ohos:width="70vp"ohos:height="match_content"ohos:text_size="15fp"ohos:background_element="$graphic:color_gray_element"ohos:text="Next"ohos:right_margin="15vp"ohos:bottom_margin="15vp"ohos:align_parent_end="true"ohos:below="$id:text3"ohos:italic="false"ohos:text_weight="5"ohos:text_font="serif"/></DependentLayout>
- color_background_gray_element.xml：
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#ffbbbbbb"/></shape>
- color_gray_element.xml：
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#878787"/></shape>
HarmonyOS之常用布局DependentLayout的使用相关推荐
- HarmonyOS之常用布局DirectionalLayout的使用
一.DirectionalLayout DirectionalLayout 是 Java UI 中的一种重要组件布局,用于将一组组件(Component)按照水平或者垂直方向排布,能够方便地对齐布局内 ...
- HarmonyOS之常用布局StackLayout的使用
一.StackLayout 简介 StackLayout 直接在屏幕上开辟出一块空白的区域,添加到这个布局中的视图都是以层叠的方式显示,而它会把这些视图默认放到这块区域的左上角,第一个添加到布局中的视 ...
- HarmonyOS之常用布局TableLayout的使用
TableLayout 使用表格的方式划分子组件,如下所示: TableLayout 的共有 XML 属性继承自 Component,详情请参考我之前的博客:HarmonyOS之组件通用的XML属性总 ...
- HarmonyOS之常用布局AdaptiveBoxLayout的使用
一.AdaptiveBoxLayout 简介 AdaptiveBoxLayout 是自适应盒子布局,该布局提供了在不同屏幕尺寸设备上的自适应布局能力,主要用于相同级别的多个组件需要在不同屏幕尺寸设备上 ...
- HarmonyOS之常用布局PositionLayout的使用
一.PositionLayout 说明 在 PositionLayout 中,子组件通过指定准确的 x/y 坐标值在屏幕上显示,(0, 0)为左上角:当向下或向右移动时,坐标值变大:允许组件之间互相重 ...
- HarmonyOS之常用组件ScrollView的功能和使用
一.ScrollView 功能 ScrollView 是一种带滚动功能的组件,它采用滑动的方式在有限的区域内显示更多的内容. 二.支持的 XML 属性 ScrollView 的共有 XML 属性继承自 ...
- 【鸿蒙 HarmonyOS】UI 布局 ( 相对布局 DependentLayout )
文章目录 一.相对布局 DependentLayout 常用属性 二.相对布局 DependentLayout 示例 一.相对布局 DependentLayout 常用属性 相对布局 Dependen ...
- HarmonyOS之常用组件TabList与Tab的功能和使用
一.什么是 Tablist 与 Tab ? Tablist 可以实现多个页签栏的切换,Tab 为某个页签. 子页签通常放在内容区上方,展示不同的分类. 页签名称应该简洁明了,清晰描述分类的内容. 二. ...
- Extjs4 常用布局总结
1.anchor 固定布局 子组件尺寸相对于容器的尺寸,即父容器容器的大小发生变化时,使用anchor布局的组件会根据规定的规则重新渲染位置和大小( width:500,height:300, ).一 ...
最新文章
- 如何在JavaScript中反转字符串？
- 提交PR后修改内容并合并commit
- 西文是指什么_儒家君子文化：何为君子？为什么要做君子，而不做小人？
- 基于JAVA+SpringMVC+Mybatis+MYSQL的个人记账管理系统
- C语言 如何判断一个主机是大端还是小端
- 8. vue 的生命周期
- linux编译ko文件
- json对象转map集合（json转map最快的方法）
- 怎样高效利用PPT模板网站找到适合自己的PPT模板
- KANO 模型——卡诺模型
- 【盘点】2017美国人工智能专业最好的20所大学（附地理位置）Ⅱ
- 前端必备的开发工具推荐——VScode代码编辑器
- java打印字符串显示_JAVA调用系统打印机打印字符串
- 系统动力学视角的智慧城市模型研究
- 淘宝现金红包系统 都是你们想要的！
- echarts实现刻度尺
- CAN整车网络学习-01
- vscode配置护眼色
- fiddler和wireshark
- 一键生成controller、service、mapper、model、po