HarmonyOS学习路之开发篇—Java UI框架(DependentLayout)

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

DependentLayout

DependentLayout是Java UI框架里的一种常见布局。与DirectionalLayout相比,拥有更多的排布方式,每个组件可以指定相对于其他同级元素的位置,或者指定相对于父组件的位置。


c3bd655ff0d44a8f5f996c92fbe3243b.png


支持的XML属性DependentLayout的共有XML属性继承自:Component

DependentLayout的共有XML属性继承自:Component


DependentLayout所包含组件可支持的XML属性见下表:

image.png

image.png

image.png

image.png

image.png

image.png

image.png

排列方式

DependentLayout的排列方式是相对于其他同级组件或者父组件的位置进行布局。


相对于同级组件的对齐

根据位置对齐

left_of、right_of、start_of、end_of、above和below均相对于同级组件的不同位置进行对齐。例如left_of对齐方式,即将右边缘与同级组件的左边缘对齐,对齐后位于同级组件的左侧。其他几种对齐方式遵循的逻辑与此相同,需要注意的是start_of和end_of会跟随当前布局起始方向变化。

以上几种不同对齐方式的效果如下图所示:


558852ee27e9c79f9ee75f49eb29ee97.png



<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="500vp"
    ohos:width="500vp"
    ohos:background_element="#EDEDED">
    <Text
        ohos:id="$+id:text_center"
        ohos:height="210vp"
        ohos:width="210vp"
        ohos:background_element="#878787"
        ohos:center_in_parent="true"
        ohos:text="center"
        ohos:text_alignment="center"
        ohos:text_size="20fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_left"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:left_of="$id:text_center"
        ohos:background_element="#FF9912"
        ohos:padding="8vp"
        ohos:text="left_of"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_right"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:right_of="$id:text_center"
        ohos:background_element="#FF9912"
        ohos:padding="8vp"
        ohos:text="right_of"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_above"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:above="$id:text_center"
        ohos:background_element="#FF9912"
        ohos:padding="8vp"
        ohos:text="above"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_below"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:below="$id:text_center"
        ohos:background_element="#FF9912"
        ohos:padding="8vp"
        ohos:text="below"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
</DependentLayout>


根据边对齐

align_left、 align_right、 align_top、 align_bottom、 align_start和align_end都是与同级组件的相同边对齐。例如align_left对齐方式,即将当前组件与同级组件的左边缘对齐。其他几种对齐方式遵循的逻辑与此相同,需要注意的是align_start和align_end会跟随当前布局起始方向变化。


以上几种不同对齐方式的效果如下图所示:




acc29999c2dca49d4ec03ee1159534d1.png
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="500vp"
    ohos:width="500vp"
    ohos:background_element="#EDEDED">
    <Text
        ohos:id="$+id:text_center"
        ohos:height="210vp"
        ohos:width="210vp"
        ohos:background_element="#878787"
        ohos:center_in_parent="true"
        ohos:text="center"
        ohos:text_alignment="center"
        ohos:text_size="20fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_top"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:align_top="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:text="align_top"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_bottom"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:align_bottom="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:text="align_bottom"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_left"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:align_left="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:text="align_left"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_right"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:align_right="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:text="align_right"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
</DependentLayout>


组合属性对齐方式

在逻辑不冲突的情况下,开发者可以组合使用多种对齐方式来进行布局。以下为一些常用的对齐方式效果图

f4c13a6c9c599870a9c080ef70b973eb.png



<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="500vp"
    ohos:width="500vp"
    ohos:background_element="#EDEDED">
    <Text
        ohos:id="$+id:text_center"
        ohos:height="210vp"
        ohos:width="210vp"
        ohos:background_element="#878787"
        ohos:center_in_parent="true"
        ohos:text="center"
        ohos:text_alignment="center"
        ohos:text_size="20fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_left_and_above"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:left_of="$id:text_center"
        ohos:above="$id:text_center"
        ohos:background_element="#FF9912"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="left_of and above"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_left_and_below"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:left_of="$id:text_center"
        ohos:below="$id:text_center"
        ohos:background_element="#FF9912"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="left_of and below"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_right_and_above"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:right_of="$id:text_center"
        ohos:above="$id:text_center"
        ohos:background_element="#FF9912"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="right_of and above"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_right_and_below"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:right_of="$id:text_center"
        ohos:below="$id:text_center"
        ohos:background_element="#FF9912"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="right_of and below"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_top_and_left"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:align_top="$id:text_center"
        ohos:left_of="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_top and left"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_top_and_right"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:align_top="$id:text_center"
        ohos:right_of="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_top and right"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_bottom_and_left"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:align_bottom="$id:text_center"
        ohos:left_of="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_bottom and left"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_bottom_and_right"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:align_bottom="$id:text_center"
        ohos:right_of="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_bottom and right"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_left_and_above"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:align_left="$id:text_center"
        ohos:above="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_left and above"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_left_and_below"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:align_left="$id:text_center"
        ohos:below="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_left and below"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_right_and_above"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:align_right="$id:text_center"
        ohos:above="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_right and above"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_right_and_below"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:align_right="$id:text_center"
        ohos:below="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_right and below"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
</DependentLayout>


相对于父级组件的对齐

单个属性对齐方式



7d93ad79ffb8ed32690feca165bb3683.png

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="500vp"
    ohos:width="500vp"
    ohos:background_element="#878787">
    <Text
        ohos:height="100vp"
        ohos:width="match_content"
        ohos:align_parent_left="true"
        ohos:background_element="#FF9912"
        ohos:padding="12vp"
        ohos:multiple_lines="true"
        ohos:text="align_parent_left"
        ohos:text_alignment="vertical_center"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:align_parent_right="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_parent_right"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:align_parent_top="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_parent_top"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:align_parent_bottom="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_parent_bottom"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:center_in_parent="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="center_in_parent"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:horizontal_center="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="horizontal_center"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:vertical_center="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="vertical_center"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
</DependentLayout>


组合属性对齐方式


350cc839e04e3da6e6bc9136a45cc8b1.png


<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="500vp"
    ohos:width="640vp"
    ohos:background_element="#878787">
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:center_in_parent="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="center_in_parent"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="190vp"
        ohos:align_parent_left="true"
        ohos:align_parent_top="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_parent_left and align_parent_top"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="190vp"
        ohos:align_parent_left="true"
        ohos:align_parent_bottom="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_parent_left and align_parent_bottom"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="190vp"
        ohos:align_parent_right="true"
        ohos:align_parent_top="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_parent_right and align_parent_top"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="190vp"
        ohos:align_parent_right="true"
        ohos:align_parent_bottom="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_parent_right and align_parent_bottom"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="190vp"
        ohos:horizontal_center="true"
        ohos:align_parent_top="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="horizontal_center and align_parent_top"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="190vp"
        ohos:horizontal_center="true"
        ohos:align_parent_bottom="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="horizontal_center and align_parent_bottom"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="190vp"
        ohos:vertical_center="true"
        ohos:align_parent_left="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="vertical_center and align_parent_left"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="190vp"
        ohos:vertical_center="true"
        ohos:align_parent_right="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="vertical_center and align_parent_right"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
</DependentLayout>


场景示例

使用DependentLayout可以轻松实现内容丰富的布局。



9e09a0bc7b77da954d861a1a47524f09.png

源码示例:


<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:background_element="$graphic:color_background_gray_element">
    <Text
        ohos: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"
    />
    <Text
        ohos: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"/>
    <Text
        ohos: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"/>
    <Button
        ohos: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"/>
    <Button
        ohos: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">
    <solid
        ohos: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">
    <solid
        ohos:color="#878787"/>
</shape>
相关文章
|
1天前
|
开发框架 前端开发 JavaScript
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
|
6天前
|
Java Nacos 开发者
Java从入门到精通:4.2.1学习新技术与框架——以Spring Boot和Spring Cloud Alibaba为例
Java从入门到精通:4.2.1学习新技术与框架——以Spring Boot和Spring Cloud Alibaba为例
|
6天前
|
监控 前端开发 Java
Java从入门到精通:4.1.2参与实际项目——学习与团队成员协作,了解项目开发的流程和规范
Java从入门到精通:4.1.2参与实际项目——学习与团队成员协作,了解项目开发的流程和规范
|
6天前
|
Dubbo Java 应用服务中间件
Java从入门到精通:3.2.2分布式与并发编程——了解分布式系统的基本概念,学习使用Dubbo、Spring Cloud等分布式框架
Java从入门到精通:3.2.2分布式与并发编程——了解分布式系统的基本概念,学习使用Dubbo、Spring Cloud等分布式框架
|
6天前
|
SQL Java 数据库连接
Java从入门到精通:3.1.2深入学习Java EE技术——Hibernate与MyBatis等ORM框架的掌握
Java从入门到精通:3.1.2深入学习Java EE技术——Hibernate与MyBatis等ORM框架的掌握
|
6天前
|
SQL Java 数据库连接
Java从入门到精通:2.3.1数据库编程——学习JDBC技术,掌握Java与数据库的交互
ava从入门到精通:2.3.1数据库编程——学习JDBC技术,掌握Java与数据库的交互
|
6天前
|
开发框架 前端开发 安全
Java从入门到精通:2.2.2学习使用Spring框架进行Web应用开发
Java从入门到精通:2.2.2学习使用Spring框架进行Web应用开发
|
6天前
|
设计模式 存储 前端开发
Java从入门到精通:2.2.1学习Java Web开发,了解Servlet和JSP技术,掌握MVC设计模式
Java从入门到精通:2.2.1学习Java Web开发,了解Servlet和JSP技术,掌握MVC设计模式
|
6天前
|
Java API
Java从入门到精通:2.1.5深入学习Java核心技术之文件操作
Java从入门到精通:2.1.5深入学习Java核心技术之文件操作
|
6天前
|
并行计算 算法 安全
Java从入门到精通:2.1.3深入学习Java核心技术——掌握Java多线程编程
Java从入门到精通:2.1.3深入学习Java核心技术——掌握Java多线程编程