HarmonyOS Java UI之DependentLayout布局示例原创精华

Tuer白晓明

发布于 2020-11-25 22:33

1.9w浏览

2收藏

HarmonyOS Java UI之DependentLayout布局示例-鸿蒙开发者社区

DependentLayout简介

DependentLayout意为相对位置布局，与DirectionalLayout相比较有更多的排布方式，每个组件可以指定相对于其他同级组件的位置，也可以指定相对于父组件的位置。可以使用DependentLayout布局来实现更加复杂的UI界面，同时也可以和其他布局相结合组合出需要的UI界面。

常用属性

相对于指定组件的位置属性

位置布局	描述
above	排列在指定组件的上侧
below	排列在指定组件的下侧
start_of	排列在指定组件的起始侧
end_of	排列在指定组件的结束侧
left_of	排列在指定组件的左侧
right_of	排列在指定组件的右侧

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center">

    <Text
        ohos:id="$+id:text_01"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_dependent_layout"
        ohos:text="我是第一个Text."
        ohos:text_size="50"
        />
    <Text
        ohos:id="$+id:text_02"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_dependent_layout"
        ohos:text="我是第二个Text."
        ohos:text_size="50"
        ohos:above="$id:text_01"
        />

</DependentLayout>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

HarmonyOS Java UI之DependentLayout布局示例-鸿蒙开发者社区将ohos:above="$id:text_01" 改为ohos:below="$id:text_01"，效果如下。

HarmonyOS Java UI之DependentLayout布局示例-鸿蒙开发者社区将ohos:above="$id:text_01" 改为ohos:left_of="$id:text_01"，效果如下，其他自行验证。

HarmonyOS Java UI之DependentLayout布局示例-鸿蒙开发者社区

子组件相对于父组件的位置属性

位置布局	描述
align_parent_left	组件处于父组件的左侧
align_parent_right	组件处于父组件的右侧
align_parent_start	组件处于父组件的起始侧
align_parent_end	组件处于父组件的结束侧
align_parent_top	组件处于父组件的上侧
align_parent_bottom	组件处于父组件的下侧
center_in_parent	组件处于父组件的中间

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center">

    <Text
        ohos:id="$+id:text_01"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_dependent_layout"
        ohos:text="我是第一个Text."
        ohos:text_size="50"
        ohos:align_parent_bottom="true"
        />
    <Text
        ohos:id="$+id:text_02"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_dependent_layout"
        ohos:text="我是第二个Text."
        ohos:text_size="50"
        ohos:align_parent_top="true"
        />
    <Text
        ohos:id="$+id:text_03"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_dependent_layout"
        ohos:text="我是第三个Text."
        ohos:text_size="50"
        ohos:align_parent_right="true"
        />
    <Text
        ohos:id="$+id:text_04"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_dependent_layout"
        ohos:text="我是第四个Text."
        ohos:text_size="50"
        ohos:center_in_parent="true"
        />
</DependentLayout>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.

HarmonyOS Java UI之DependentLayout布局示例-鸿蒙开发者社区示例

<?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:text_01"
        ohos:height="70vp"
        ohos:width="match_parent"
        ohos:background_element="#CCCCCC"
        ohos:text="Header"
        ohos:text_alignment="center"
        ohos:text_size="50"
        ohos:align_parent_top="true"
        />
    <Text
        ohos:id="$+id:text_02"
        ohos:height="match_parent"
        ohos:width="100vp"
        ohos:background_element="#5C6E71"
        ohos:text="LEFT"
        ohos:text_alignment="center"
        ohos:text_size="50"
        ohos:align_parent_left="true"
        ohos:below="$id:text_01"
        />
    <Text
        ohos:id="$+id:text_03"
        ohos:height="match_parent"
        ohos:width="100vp"
        ohos:background_element="#5C6E71"
        ohos:text="Right"
        ohos:text_alignment="center"
        ohos:text_size="50"
        ohos:align_parent_right="true"
        ohos:below="$id:text_01"
        />
    <Text
        ohos:id="$+id:text_05"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:background_element="#16CCB7"
        ohos:text_alignment="center"
        ohos:text="Center"
        ohos:text_size="50"
        ohos:right_margin="100vp"
        ohos:below="$id:text_01"
        ohos:right_of="$id:text_02"
        />
    <Text
        ohos:id="$+id:text_04"
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:background_element="#CCCCCC"
        ohos:text="Footer"
        ohos:text_size="50"
        ohos:align_parent_bottom="true"
        />

</DependentLayout>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.

HarmonyOS Java UI之DependentLayout布局示例-鸿蒙开发者社区

至此，我们已经了解并会使用HarmonyOS Java UI的六大布局，下一节我们将对六大布局进行总结，并将前面没有提到的各类属性做详细的归纳。

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

HarmonyOS

标签

鸿蒙应用开发

DependentLayout

已于2020-12-12 08:37:21修改

5条回复

按时间正序

按时间倒序

兰蔻lank

请问下TV模拟器在哪下载

2020-11-26 09:56:27

Tuer白晓明回复了兰蔻lank

请问下TV模拟器在哪下载

Tools-->HVD Manager --> 授权后第一个就是TV模拟器

2020-11-26 10:24:07

兰蔻lank 回复了 Tuer白晓明

Tools-->HVD Manager --> 授权后第一个就是TV模拟器

谢谢,找到了。您知道怎么扫描系统里所有的图片吗，目前开放的api只找到访问单个文件夹的，而且回调也是单个的。

AVLoggerConnection.performLoggerFile(this, filePaths, null, new AVLogCompletedListener(){
@Override
public void onLogCompleted(String path, String uri) {

}
});

2020-11-26 11:04:42

Tuer白晓明回复了兰蔻lank

谢谢,找到了。您知道怎么扫描系统里所有的图片吗，目前开放的api只找到访问单个文件夹的，而且回调也是单个的。 AVLoggerConnection.performLoggerFile(this, filePaths, null, new AVLogCompletedListener(){ @Override public void onLogCompleted(String path, String uri) { }});

暂时还没有研究过，不知道有没有和Android中ContentProvider 一样的方法。

2020-11-26 14:56:41

mb609189c1c6da9

我的为什么会这样呢？第一个文本不在正中间，第二个没有显示出来。

2021-5-5 02:08:17

51CTO

51CTO博客

51CTO学堂

HarmonyOS Java UI之DependentLayout布局示例原创精华

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

HarmonyOS Java UI之DependentLayout布局示例 原创 精华

订阅鸿蒙技术特刊，精选内容抢先看

HarmonyOS Java UI之DependentLayout布局示例原创精华