HarmonyOS Java UI之DependentLayout布局示例 原创 精华
Tuer白晓明
发布于 2020-11-25 22:33
浏览
2收藏
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>
将ohos:above="$id:text_01" 改为ohos:below="$id:text_01"，效果如下。
将ohos:above="$id:text_01" 改为ohos:left_of="$id:text_01"，效果如下，其他自行验证。
子组件相对于父组件的位置属性
| 位置布局 | 描述 |
| 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>
示例
<?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>
至此，我们已经了解并会使用HarmonyOS Java UI的六大布局，下一节我们将对六大布局进行总结，并将前面没有提到的各类属性做详细的归纳。
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
分类
已于2020-12-12 08:37:21修改
赞
3
收藏 2
回复
相关推荐
请问下TV模拟器在哪下载
Tools-->HVD Manager --> 授权后第一个就是TV模拟器
谢谢,找到了。您知道怎么扫描系统里所有的图片吗，目前开放的api只找到访问单个文件夹的，而且回调也是单个的。
AVLoggerConnection.performLoggerFile(this, filePaths, null, new AVLogCompletedListener(){
@Override
public void onLogCompleted(String path, String uri) {
}
});
暂时还没有研究过，不知道有没有和Android中ContentProvider 一样的方法。
我的为什么会这样呢？第一个文本不在正中间，第二个没有显示出来。