HarmonyOS UI开发 DependentLayout(依赖布局) 的使用
DependentLayout是什么
DependentLayout是依赖布局，每个组件可以指定相对于其他同级元素的位置，或者指定相对于父组件的位置。(类似Android的相对布局)
DependentLayout 学习应该从3点着手 1 自身属性2相对与其它同级控件进行布局 3 相对父组件进行布局
DependentLayout的自有XML属性
|
属性名称 |
中文描述 |
取值 |
取值说明 |
使用案例 |
|---|---|---|---|---|
|
alignment |
对齐方式 |
left |
表示左对齐。 |
可以设置取值项如表中所列，也可以使用“|”进行多项组合。 ohos:alignment="top|left" ohos:alignment="left" |
|
top |
表示顶部对齐。 |
|||
|
right |
表示右对齐。 |
|||
|
bottom |
表示底部对齐。 |
|||
|
horizontal_center |
表示水平居中对齐。 |
|||
|
vertical_center |
表示垂直居中对齐。 |
|||
|
center |
表示居中对齐。 |
DependentLayout的自有XML属性 alignment
1 右边对齐
<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="right"><Buttonohos:id="$+id:button1"ohos:height="60fp"ohos:width="120fp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/></DependentLayout>
效果图
2 底部对齐
<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="bottom"><Buttonohos:id="$+id:button1"ohos:height="60fp"ohos:width="120fp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/></DependentLayout>效果图
3 居中
<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"><Buttonohos:id="$+id:button1"ohos:height="60fp"ohos:width="120fp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/></DependentLayout>效果图
4 右下角
<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="right|bottom"><Buttonohos:id="$+id:button1"ohos:height="60fp"ohos:width="120fp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/></DependentLayout>
效果图
DependentLayout所包含组件可支持的XML属
2 相对其他同级控件 的属性有
left_of ： 将右边缘与另一个子组件的左边缘对齐
right_of ： 将左边缘与另一个子组件的右边缘对齐
start_of ： 将结束边与另一个子组件的起始边对齐
end_of ： 将起始边与另一个子组件的结束边对齐
above ： 将下边缘与另一个子组件的上边缘对齐
below ：将上边缘与另一个子组件的下边缘对齐
align_baseline ： 将子组件的基线与另一个子组件的基线对齐
align_left ： 将左边缘与另一个子组件的左边缘对齐
align_top ： 将上边缘与另一个子组件的上边缘对齐
align_right ： 将右边缘与另一个子组件的右边缘对齐
align_bottom ： 将底边与另一个子组件的底边对齐
align_start ： 将起始边与另一个子组件的起始边对齐
将右边缘与另一个子组件的左边缘对齐2.1 left_of
<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:horizontal_center="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/><Buttonohos:id="$+id:button3"ohos:height="60fp"ohos:width="120fp"ohos:left_of="$id:button2"ohos:background_element="#00d8a0"ohos:text="HarmonyOS"ohos:text_size="20fp"ohos:weight="2"/></DependentLayout>效果图
2.2 right_of
将左边缘与另一个子组件的右边缘对齐
<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:horizontal_center="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/><Buttonohos:id="$+id:button3"ohos:height="60fp"ohos:width="120fp"ohos:right_of="$id:button2"ohos:background_element="#00d8a0"ohos:text="HarmonyOS"ohos:text_size="20fp"ohos:weight="2"/></DependentLayout>效果图：
2.3 below
将上边缘与另一个子组件的下边缘对齐
<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button1"ohos:height="60fp"ohos:width="120fp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:below="$id:button1"ohos:top_margin="20fp"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/></DependentLayout>
例如下图Android 在java 的下面
2.4 align_right
将右边缘与另一个子组件的右边缘对齐
<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="300fp"ohos:background_element="#ddd333"ohos:text="Android"ohos:text_size="20fp"/><Buttonohos:id="$+id:button3"ohos:height="60fp"ohos:width="120fp"ohos:align_right="$id:button2"ohos:background_element="#00d8a0"ohos:text="HarmonyOS"ohos:text_size="20fp"ohos:weight="2"/></DependentLayout>效果图
其他的几种情况类似
3 相对父类组件进行布局的属性有
align_parent_left 将左边缘与父组件的左边缘对齐
align_parent_top 将上边缘与父组件的上边缘对齐
align_parent_right 将右边缘与父组件的右边缘对齐
align_parent_bottom 将底边与父组件的底边对齐
align_parent_start 将起始边与父组件的起始边对齐
align_parent_end 将结束边与父组件的结束边对齐
3.1 align_parent_right 将右边缘与父组件的右边缘对齐
它的作用和align_parent_end 作用相同
<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:align_parent_right="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/></DependentLayout>效果图
3.2 align_parent_left 将左边缘与父组件的左边缘对齐
它的作用和align_parent_start 作用相同
<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:align_parent_left="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/></DependentLayout>效果图
3.3 align_parent_top 将上边缘与父组件的上边缘对齐
<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:align_parent_top="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/></DependentLayout>效果图
3.4 align_parent_bottom
将底边与父组件的底边对齐
<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:align_parent_bottom="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/></DependentLayout>效果图
3.5 center_in_parent
将子组件保持在父组件的中心
<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:center_in_parent="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/></DependentLayout>效果图
把所有的属性都试了一遍，会Android开发的话，这个就简单多了，属性上基本都一样。
HarmonyOS UI开发 TableLayout(表格布局) 的使用
HarmonyOS UI开发 AdaptiveBoxLayout(自适应盒子布局) 的使用
HarmonyOS UI开发 PositionLayout(位置布局) 的使用
HarmonyOS UI开发 TableLayout(表格布局) 的使用
HarmonyOS UI开发 DirectionalLayout(定向布局) 的使用
HarmonyOS UI开发 DependentLayout(依赖布局) 的使用相关推荐
- HarmonyOS UI开发 TableLayout(表格布局) 的使用
TableLayout 是什么 TableLayout 是表格布局,就是使用表格的方式划分子组件, 个人感觉应该也不是常用的布局,常用的还是选择DirectionalLayout和Dependent ...
- HarmonyOS UI开发 PositionLayout(位置布局) 的使用
PositionLayout 是什么 PositionLayout 是位置布局,在PositionLayout中,子组件通过指定准确的x/y坐标值在屏幕上显示.(0, 0)为左上角:当向下或向右移动时 ...
- HarmonyOS UI开发 DirectionalLayout(定向布局) 的使用
DirectionalLayout 是什么 DirectionalLayout 是定向布局,控件水平或垂直排列(类似Android 的线性布局不过还是有区别的) DirectionalLayout的自 ...
- HarmonyOS UI开发 AdaptiveBoxLayout(自适应盒子布局) 的使用
AdaptiveBoxLayout 是什么 AdaptiveBoxLayout 是自适应盒子布局,该布局提供了在不同屏幕尺寸设备上的自适应布局能力,主要用于相同级别的多个组件需要在不同屏幕尺寸设备上自 ...
- HarmonyOS UI开发 StackLayout(堆栈布局) 的使用
StackLayout是什么 StackLayout 是堆栈布局,直接在屏幕上开辟出一块空白的区域,添加到这个布局中的视图都是以层叠的方式显示,而它会把这些视图默认放到这块区域的左上角,第一个添加到布 ...
- HarmonyOS UI 开发 vp ,fp , px 以及写具体数字的 理解
HarmonyOS 开发UI 距离和字体使用什么单位 距离使用 vp (virtual pixel) 字体大小使用 fp (font pixel) 详细了解 vp ,fp , px 虚拟像素单位:vp ...
- HarmonyOS UI开发 match_parent与match_content
match_parent: 表示组件大小将扩展为父组件允许的最大值,它将占据父组件方向上的剩余大小 match_content: 表示组件大小与它的内容占据的大小范围相适应. 两者详细说明: 下面看下 ...
- Android 开发 -- 开发第一个安卓程序、Android UI开发（布局的创建：相对布局和线性布局、控件单位：px pt dp sp、常用控件 、常见对话框、ListView）
文章目录 1. 开发第一个Hello World程序 1.1 开发程序 1.2 认识程序中的文件 1.3 Android程序结构 1.4 安卓程序打包 2. Android UI开发 2.1 布局的创 ...
- 【Android -- UI开发】一份 UI 开发学习指南
思维导图 推荐资料:官方文档 六大布局 网上有人比喻的很好:布局好比是建筑里的框架,组件按照布局的要求依次排列,就组成了用于看见的漂亮界面了. 请看文章:[Android – UI 开发]六大布局 U ...
最新文章
- 用python下载美剧《天蝎》
- JS编程建议——37：推荐使用replace（1）
- Spring Ioc注解式开发中注解的作用
- 无记忆多项式数字预失真技术
- tomcat源码之架构解析
- linux用不用装固态硬盘驱动,固态硬盘要不要安装驱动？总算弄明白了
- C++explicit关键字
- 私人博客定制---服务器接口封装
- cnn图像二分类 python_人工智能Keras图像分类器（CNN卷积神经网络的图片识别篇）...
- easyexcel 填充模板 格式变了_Qamp;A | 如何制作规范的电子合同模板?
- python rsa 公钥解密_python使用rsa库做公钥解密(网上别处找不到)
- python pyqt5 线程 暂停 重启_PyQt5 线程阻塞？
- php 合并重复数据合并单元格,通过js合并表格重复出现的数据
- [POJ 2891] Strange Way to Express Integers
- 压缩JS方法：uglifyjs
- SparkContext详述
- Apache认证（目录）
- sql sever 插入数据
- word文档怎么批量解除锁定_解除锁定的word文档的方法
- 阿里云国际版虚拟主机上设置网站和域名教程