鸿蒙系统中的DependentLayout布局

概念

DependentLayout中每个组件可以指定相对于其他同级元素的位置，或者指定相对于父组件的位置。

使用

我们使用代码来解释DependentLayout布局的使用

新建AbilitySlice

首先，我们再项目中新建一个DependentLayoutDemo如下：

public class DependentLayoutDemo extends AbilitySlice {
    private Text txtLog;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_dependent_layout);
    }
    @Override
    public void onActive() {
        super.onActive();
    }
    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

MainAbility设置

public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(DependentLayoutDemo.class.getName());
    }
}

相对于同级组件

相对于同级组件的位置布局见表1。

新建布局文件dependent_layout.xml如下：

<?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:background_element="#00FFFF">
       <Button ohos:id="$+id:button1"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text_alignment="center"
            ohos:text="按钮1"
            ohos:background_element="#0000FF"
            ohos:text_size="100"></Button>
        <Button ohos:id="$+id:button2"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text_alignment="center"
            ohos:text="按钮2"
            ohos:background_element="#00FF00"
            ohos:text_size="100"
            ohos:below="$id:button1"></Button>
    	<Button ohos:id="$+id:button3"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text_alignment="center"
            ohos:text="按钮3"
            ohos:background_element="#00FF00"
            ohos:text_size="100"
            ohos:below="$id:button1"
            ohos:right_of="$id:button2"></Button>
	</DependentLayout>

该布局中按钮2设置ohos:below="$id:button1"，其位置在按钮1的下边；该布局中按钮2设置ohos:below="$id:button1" 和ohos:right_of="$id:button2"，其位置在按钮1的下边和按钮2的右边；其他几种布局方式以此类推，效果如下：

注意，目标组件只改变配置部分的位置，其他方面位置不变；例如，当按钮2配置为ohos:below="$id:button1"，则其上边界在按钮2下边界的下面；如果我们的布局文件如下：

<?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:background_element="#00FFFF">
 <Button ohos:id="$+id:button1"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text_alignment="center"
            ohos:left_margin="100"
            ohos:top_margin="100"
            ohos:bottom_margin="100"
            ohos:text="按钮1"
            ohos:background_element="#0000FF"
            ohos:text_size="100"></Button>
    <Button ohos:id="$+id:button2"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text_alignment="center"
            ohos:text="按钮2"
            ohos:background_element="#00FF00"
            ohos:text_size="100"
            ohos:below="$id:button1"></Button>

得到的结果如下：

可以看到按钮2并不是在按钮1的正下面，只是其上边界在按钮1的下边界下面，其他状态不变

相对于父组件

相对于父组件的位置布局见表2。

布局文件dependent_layout.xml如下：

<?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:background_element="#00FFFF">
		<Button ohos:id="$+id:button1"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:align_parent_left="true"
                ohos:text="按钮1"
                ohos:background_element="#0000FF"
                ohos:text_size="100"></Button>
        <Button ohos:id="$+id:button2"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:center_in_parent="true"
                ohos:text_alignment="center"
                ohos:text="按钮2"
                ohos:background_element="#00FF00"
                ohos:text_size="100"></Button>
        <Button ohos:id="$+id:button3"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:center_in_parent="true"
                ohos:align_parent_right="true"
                ohos:text_alignment="center"
                ohos:text="按钮3"
                ohos:background_element="#00FF00"
                ohos:text_size="100"></Button>
        <Button ohos:id="$+id:button4"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:align_parent_bottom="true"
                ohos:text_alignment="center"
                ohos:text="按钮4"
                ohos:background_element="#00FF00"
                ohos:text_size="100"></Button>
    </DependentLayout>

这里按钮1配置为ohos:align_parent_left=“true” 在父组件的右边；
按钮2配置为ohos:center_in_parent=“true” 在父组件的水平垂直中间；
按钮3配置为ohos:center_in_parent=“true” 和 ohos:align_parent_right=“true” 在父组件的垂直中间，水平右边；
这里按钮1配置为ohos:align_parent_bottom=“true” 在父组件的下边边；
如图：