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

发布于 2020-11-25 22:33
浏览
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>

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>

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>

HarmonyOS Java UI之DependentLayout布局示例-开源基础软件社区

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

 

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2020-12-12 08:37:21修改
3
收藏 2
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐