HarmonyOS Java UI之DependentLayout布局示例

DependentLayout簡介

DependentLayout意為相對位置布局，與DirectionalLayout相比較有更多的排布方式，每個組件可以指定相對於其他同級組件的位置，也可以指定相對於父組件的位置。可以使用DependentLayout布局來實現更加復雜的UI界面，同時也可以和其他布局相結合組合出需要的UI界面。

常用屬性

<?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"，效果如下，其他自行驗證。

<?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的六大布局，下一節我們將對六大布局進行總結，並將前面沒有提到的各類屬性做詳細的歸納。

作者：IT明
想了解更多內容，請訪問：
51CTO和華為官方戰略合作共建的鴻蒙技術社區
https://harmonyos.51cto.com#bky