HarmonyOS之常用布局DirectionalLayout的使用
2024-06-12 19:20:34
一、DirectionalLayout
- DirectionalLayout 是 Java UI 中的一种重要组件布局，用于将一组组件(Component)按照水平或者垂直方向排布，能够方便地对齐布局内的组件。该布局和其他布局的组合，可以实现更加丰富的布局方式。
- DirectionalLayout 示意如下：
二、支持的 XML 属性
- DirectionalLayout 的共有 XML 属性继承自 Component，详情请参考我之前的博客：HarmonyOS之组件通用的XML属性总览。
- DirectionalLayout 的自有 XML 属性见下表：
| 属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 |
|---|---|---|---|---|
| alignment | 对齐方式 | left | 表示左对齐 |
可以设置取值项如表中所列，也可以使用“|”进行多项组合。 ohos:alignment="top|left" ohos:alignment="left" |
| top | 表示顶部对齐 | |||
| right | 表示右对齐 | |||
| bottom | 表示底部对齐 | |||
| horizontal_center | 表示水平居中对齐 | |||
| vertical_center | 表示垂直居中对齐 | |||
| center | 表示居中对齐 | |||
| start | 表示靠起始端对齐 | |||
| end | 表示靠结束端对齐 | |||
| total_weight | 所有子视图的权重之和 | float类型 | 可以直接设置浮点数值，也可以引用float浮点数资源 |
ohos:total_weight="2.5" ohos:total_weight="$float:total_weight" |
| orientation | 子布局排列方向 | horizontal | 表示水平方向布局 | ohos:orientation="horizontal" |
| vertical | 表示垂直方向布局 | ohos:orientation="vertical" |
- DirectionalLayout 所包含组件可支持的 XML 属性见下表：
| 属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 |
|---|---|---|---|---|
| layout_alignment | 对齐方式 | left | 表示左对齐 |
可以设置取值项如表中所列，也可以使用“|”进行多项组合。 ohos:layout_alignment="top" ohos:layout_alignment="top|left" |
| top | 表示顶部对齐 | |||
| right | 表示右对齐 | |||
| bottom | 表示底部对齐 | |||
| horizontal_center | 表示水平居中对齐 | |||
| vertical_center | 表示垂直居中对齐 | |||
| center | 表示居中对齐 | |||
| weight | 比重 | float类型 | 可以直接设置浮点数值，也可以引用float浮点数资源 |
ohos:weight="1" ohos:weight="$float:weight" |
三、排列方式
- DirectionalLayout 的排列方向（orientation）分为水平（horizontal）或者垂直（vertical）方向。
- 使用 orientation 设置布局内组件的排列方式，默认为垂直排列。
① 垂直排列
- 垂直方向排列三个按钮，效果如下：
- 示例代码如下：
<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="match_content"ohos:orientation="vertical"><Buttonohos:width="33vp"ohos:height="20vp"ohos:bottom_margin="3vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:bottom_margin="3vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 2"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:bottom_margin="3vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout>
- 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>
② 水平排列
- 水平方向排列三个按钮，效果如下：
- 示例代码：
<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="match_content"ohos:orientation="horizontal"><Buttonohos:width="33vp"ohos:height="20vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 2"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout>
- 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>
- DirectionalLayout 不会自动换行，其子组件会按照设定的方向依次排列，若超过布局本身的大小，超出布局大小的部分将不会被显示，例如：
<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="20vp"ohos:orientation="horizontal"><Buttonohos:width="166vp"ohos:height="match_content"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="166vp"ohos:height="match_content"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 2"/><Buttonohos:width="166vp"ohos:height="match_content"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout>
- 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>
- 此布局包含了三个按钮，但由于 DirectionalLayout 不会自动换行，超出布局大小的组件部分无法显示。界面显示如下：
四、对齐方式
- DirectionalLayout 中的组件使用 layout_alignment 控制自身在布局中的对齐方式，当对齐方式与排列方式方向一致时，对齐方式不会生效，如设置了水平方向的排列方式，则左对齐、右对齐将不会生效。
- 三种对齐方式的示例代码：
<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="60vp"><Buttonohos:width="50vp"ohos:height="20vp"ohos:background_element="$graphic:color_cyan_element"ohos:layout_alignment="left"ohos:text="Button 1"/><Buttonohos:width="50vp"ohos:height="20vp"ohos:background_element="$graphic:color_cyan_element"ohos:layout_alignment="horizontal_center"ohos:text="Button 2"/><Buttonohos:width="50vp"ohos:height="20vp"ohos:background_element="$graphic:color_cyan_element"ohos:layout_alignment="right"ohos:text="Button 3"/></DirectionalLayout>
- 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>
- 三种对齐方式效果示例：
五、权重
- 权重（weight）就是按比例来分配组件占用父组件的大小，在水平布局下计算公式为：
父布局可分配宽度=父布局宽度-所有子组件 width 之和；
组件宽度=组件 weight /所有组件 weight 之和*父布局可分配宽度； - 实际使用过程中，建议使用 width=0 来按比例分配父布局的宽度，1:1:1效果如下：
- 示例代码：
<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="match_content"ohos:orientation="horizontal"><Buttonohos:width="0vp"ohos:height="20vp"ohos:weight="1"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="0vp"ohos:height="20vp"ohos:weight="1"ohos:background_element="$graphic:color_gray_element"ohos:text="Button 2"/><Buttonohos:width="0vp"ohos:height="20vp"ohos:weight="1"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout>
- 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>
- 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>
六、场景示例
- 源码示例：
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="match_parent"ohos:background_element="$graphic:color_light_gray_element"><DirectionalLayoutohos:width="match_parent"ohos:height="match_content"ohos:orientation="vertical"><Buttonohos:width="33vp"ohos:height="20vp"ohos:bottom_margin="3vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:bottom_margin="3vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 2"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:bottom_margin="3vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout><Component ohos:height="20vp"/><DirectionalLayoutohos:width="match_parent"ohos:height="match_content"ohos:orientation="horizontal"><Buttonohos:width="33vp"ohos:height="20vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 2"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout><Component ohos:height="20vp"/><DirectionalLayoutohos:width="match_parent"ohos:height="20vp"ohos:orientation="horizontal"><Buttonohos:width="166vp"ohos:height="match_content"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="166vp"ohos:height="match_content"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 2"/><Buttonohos:width="166vp"ohos:height="match_content"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout><Component ohos:height="20vp"/><DirectionalLayoutohos:width="match_parent"ohos:height="60vp"><Buttonohos:width="50vp"ohos:height="20vp"ohos:background_element="$graphic:color_cyan_element"ohos:layout_alignment="left"ohos:text="Button 1"/><Buttonohos:width="50vp"ohos:height="20vp"ohos:background_element="$graphic:color_cyan_element"ohos:layout_alignment="horizontal_center"ohos:text="Button 2"/><Buttonohos:width="50vp"ohos:height="20vp"ohos:background_element="$graphic:color_cyan_element"ohos:layout_alignment="right"ohos:text="Button 3"/></DirectionalLayout><Component ohos:height="20vp"/><DirectionalLayoutohos:width="match_parent"ohos:height="match_content"ohos:orientation="horizontal"><Buttonohos:width="0vp"ohos:height="20vp"ohos:weight="1"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="0vp"ohos:height="20vp"ohos:weight="1"ohos:background_element="$graphic:color_gray_element"ohos:text="Button 2"/><Buttonohos:width="0vp"ohos:height="20vp"ohos:weight="1"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout>
</DirectionalLayout>
HarmonyOS之常用布局DirectionalLayout的使用相关推荐
- HarmonyOS之常用布局DependentLayout的使用
一.DependentLayout 简介 DependentLayout 是 Java UI 系统里的一种常见布局.与DirectionalLayout 相比,拥有更多的排布方式,每个组件可以指定相对 ...
- HarmonyOS之常用布局StackLayout的使用
一.StackLayout 简介 StackLayout 直接在屏幕上开辟出一块空白的区域,添加到这个布局中的视图都是以层叠的方式显示,而它会把这些视图默认放到这块区域的左上角,第一个添加到布局中的视 ...
- HarmonyOS之常用布局AdaptiveBoxLayout的使用
一.AdaptiveBoxLayout 简介 AdaptiveBoxLayout 是自适应盒子布局,该布局提供了在不同屏幕尺寸设备上的自适应布局能力,主要用于相同级别的多个组件需要在不同屏幕尺寸设备上 ...
- HarmonyOS之常用布局TableLayout的使用
TableLayout 使用表格的方式划分子组件,如下所示: TableLayout 的共有 XML 属性继承自 Component,详情请参考我之前的博客:HarmonyOS之组件通用的XML属性总 ...
- HarmonyOS之常用布局PositionLayout的使用
一.PositionLayout 说明 在 PositionLayout 中,子组件通过指定准确的 x/y 坐标值在屏幕上显示,(0, 0)为左上角:当向下或向右移动时,坐标值变大:允许组件之间互相重 ...
- HarmonyOS之常用组件ScrollView的功能和使用
一.ScrollView 功能 ScrollView 是一种带滚动功能的组件,它采用滑动的方式在有限的区域内显示更多的内容. 二.支持的 XML 属性 ScrollView 的共有 XML 属性继承自 ...
- HarmonyOS之常用组件TabList与Tab的功能和使用
一.什么是 Tablist 与 Tab ? Tablist 可以实现多个页签栏的切换,Tab 为某个页签. 子页签通常放在内容区上方,展示不同的分类. 页签名称应该简洁明了,清晰描述分类的内容. 二. ...
- HarmonyOS之组件布局的创建和使用
一.组件与布局 HarmonyOS 提供了Ability 和 AbilitySlice 两个基础类,一个有界面的 Ability 可以由一个或多个 AbilitySlice 构成,AbilitySli ...
- Extjs4 常用布局总结
1.anchor 固定布局 子组件尺寸相对于容器的尺寸,即父容器容器的大小发生变化时,使用anchor布局的组件会根据规定的规则重新渲染位置和大小( width:500,height:300, ).一 ...
最新文章
- python使用pickle保存和加载机器学模型
- android使用okthtp
- .bin 文件用excel文件打开_用PYTHON读写excel文件
- Bootstrap4+MySQL前后端综合实训-Day09-AM【项目功能展示视频、小组汇报PPT、项目介绍】
- 056、macvlan网络结构分析（2019-03-25 周一）
- HDU1403(后缀数组--最长公共子串)
- java用户登录窗口怎么删除_从窗口中删除 Headers 栏 . 窗口过程由不同的用户启动...
- 《Ansible权威指南 》一第2章 Ansible基础元素介绍
- 对象可以创建数组吗_电脑零基础可以学习创建网站吗?
- Python脚本编译为可跨平台、跨架构执行的字节码文件pyc方法
- 【人脸识别】基于matlab GUI Gabor+SVM比较PCA+SVM人脸识别【含Matlab源码 685期】
- 把 14 亿人拉到一个微信群，如何实现？
- python 扫描枪_获取键盘输入或者USB扫描枪数据
- 坦克世界怎么显示服务器准心,坦克世界设置方法 坦克世界如何设置图像
- 开发一个APP到底要多少钱？
- USRP_X310_Device_Recovery手册
- iOS APP审核注意事项
- Gtest之TEST宏的用法
- Web安全之认证机制
- 聊一聊 C# 后台GC 到底是怎么回事？