【鸿蒙 HarmonyOS】UI 布局 ( 相对布局 DependentLayout )

简介: 【鸿蒙 HarmonyOS】UI 布局 ( 相对布局 DependentLayout )
+关注继续查看

文章目录

一、相对布局 DependentLayout 常用属性

二、相对布局 DependentLayout 示例





一、相对布局 DependentLayout 常用属性


相对布局 DependentLayout 常用属性 :


在某组件下方 : ohos:below=""


在某组件上方 : ohos:above=""


在某组件左侧 : ohos:left_of=""


在某组件右侧 : ohos:right_of=""


在父容器左侧 : ohos:align_parent_left=""


在父容器顶部 : ohos:align_parent_top=""


在父容器右侧 : ohos:align_parent_right=""


在父容器底部 : ohos:align_parent_bottom=""


与某组件左侧对齐 : ohos:align_left=""


与某组件顶部对齐 : ohos:align_top=""


与某组件右侧对齐 : ohos:align_right=""


与某组件底部对齐 : ohos:align_bottom=""






二、相对布局 DependentLayout 示例


下面的相对布局中 text1 组件没有设置任何位置属性 , 默认放在屏幕左上角 ;


text2 组件在 text1 组件下面 , 为 text2 组件设置 ohos:below="$+id:text1" 属性 , 即可将本组件放置在 text1 组件下方 ;


text3 组件在父容器的底部 , 为 text3 组件设置 ohos:align_parent_bottom=“true” 属性 , 即可将本组件放置在父容器底部 ;


<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent">
    <!-- 默认位置 -->
    <Text
        ohos:id="$+id:text1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#FF0000"
        ohos:layout_alignment="horizontal_center"
        ohos:text=" Hello World 1 "
        ohos:text_size="50"/>
    <!-- 放在 text1 组件底部 -->
    <Text
        ohos:id="$+id:text2"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#00FF00"
        ohos:layout_alignment="horizontal_center"
        ohos:below="$+id:text1"
        ohos:text=" Hello World 2 "
        ohos:text_size="50"/>
    <!-- 放在父组件底部 -->
    <Text
        ohos:id="$+id:text3"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#0000FF"
        ohos:layout_alignment="horizontal_center"
        ohos:align_parent_bottom="true"
        ohos:text=" Hello World 3 "
        ohos:text_size="50"/>
</DependentLayout>


布局运行效果 :


image.png

目录
相关文章
|
1月前
|
前端开发
前端项目实战叁拾壹-​react-admin+material ui-两栏布局
前端项目实战叁拾壹-​react-admin+material ui-两栏布局
26 0
|
1月前
|
XML Java 数据格式
HarmonyOS学习路之开发篇—Java UI框架(自定义组件与布局 二)
自定义布局 当Java UI框架提供的布局无法满足需求时,可以创建自定义布局,根据需求自定义布局规则
|
1月前
|
XML 前端开发 Java
HarmonyOS学习路之开发篇—Java UI框架(自定义组件与布局 一)
HarmonyOS提供了一套复杂且强大的Java UI框架,其中Component提供内容显示,是界面中所有组件的基类。ComponentContainer作为容器容纳Component或ComponentContainer对象,并对它们进行布局。
|
1月前
|
XML Java Android开发
HarmonyOS学习路之开发篇—Java UI框架(六大布局开发)
Android的布局开发中存在五大布局,在鸿蒙布局开发中也存在与之相似的五种布局类型,唯一多余的一个类型叫做自适应盒子布局,布局可以在不同设备上有不同的展示方式。 熟悉Android开发的小伙伴可以参照Android的布局开发来学习。
HarmonyOS学习路之开发篇—Java UI框架(六大布局开发)
|
1月前
|
XML Java 数据格式
HarmonyOS学习路之开发篇—— Java UI框架(组件与布局说明)
UI即使用在屏幕上显示的用户界面,该界面用来显示所有可能被用户查看和操作的内容。
|
3月前
|
Java Android开发 容器
Android实战开发--小慕笔记UI设计(Fragment布局的使用)
Android实战开发--小慕笔记UI设计(Fragment布局的使用)
Android实战开发--小慕笔记UI设计(Fragment布局的使用)
|
8月前
|
JavaScript
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
419 0
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
|
8月前
|
IDE Shell 开发工具
Android查看UI布局相关工具
Android查看UI布局相关工具
SAP 电商云 Spartacus UI Cart 页面的 CMS 布局
SAP 电商云 Spartacus UI Cart 页面的 CMS 布局
50 0
SAP 电商云 Spartacus UI Cart 页面的 CMS 布局
|
XML 数据格式
【鸿蒙 HarmonyOS】Ability 中使用 XML 布局文件 绘制布局及 UI 组件(二)
【鸿蒙 HarmonyOS】Ability 中使用 XML 布局文件 绘制布局及 UI 组件(二)
167 0
【鸿蒙 HarmonyOS】Ability 中使用 XML 布局文件 绘制布局及 UI 组件(二)
推荐文章
更多