概述

Dependent可以翻译为依靠的，从属的。DependentLayout布局表示的是一种相对的关系，相对于父布局或相对于其它的组件。在DependentLayout布局中每个组件可以指定相对于其他同级元素的位置，或者指定相对于父组件的位置。

DependentLayout布局的使用

1、相关常用XML属性介绍

1.1、DependentLayout常用XML属性

在DependentLayout布局中，我们需要掌握的属性为alignment（对齐方式），它决定了布局中组件的对齐方式，取值如下：

属性名称	中文描述	取值
alignment	对齐方式	left、top、right、bottom、horizontal_center、vertical、center

1.2、包含组件可支持的XML属性（*）

属性名称	中文描述	取值
left_of	将右边缘与另一个子组件的左边缘对齐	其他组件的id
right_of	将左边缘与另一个子组件的右边缘对齐	其他组件的id
start_of	将结束边与另一个子组件的起始边对齐	其他组件的id
end_of	将起始边与另一个子组件的结束边对齐	其他组件的id
above	将下边缘与另一个子组件的上边缘对齐	其他组件的id
below	将上边缘与另一个子组件的下边缘对齐	其他组件的id
align_baseline	将子组件的基线与另一个子组件的基线对齐	其他组件的id
align_left	将左边缘与另一个子组件的左边缘对齐	其他组件的id
align_top	将上边缘与另一个子组件的上边缘对齐	其他组件的id
align_right	将右边缘与另一个子组件的右边缘对齐	其他组件的id
align_bottom	将底边与另一个子组件的底边对齐	其他组件的id
align_start	将起始边与另一个子组件的起始边对齐	其他组件的id
align_end	将结束边与另一个子组件的结束边对齐	其他组件的id
align_parent_left	将左边缘与父组件的左边缘对齐	boolean类型
align_parent_top	将上边缘与父组件的上边缘对齐	boolean类型
align_parent_right	将右边缘与父组件的右边缘对齐	boolean类型
align_parent_bottom	将底边与父组件的底边对齐	boolean类型
align_parent_start	将起始边与父组件的起始边对齐	boolean类型
align_parent_end	将结束边与父组件的结束边对齐	boolean类型
center_in_parent	将子组件保持在父组件的中心	boolean类型
horizontal_center	将子组件保持在父组件水平方向的中心	boolean类型
vertical_center	将子组件保持在父组件垂直方向的中心	boolean类型

这些常用的属性，是我们必须掌握的。在这里我要着重讲解一下algin_baseline属性，baseline翻译为基线。基线的解释为：书写英语单词时为了规范书写会设有四条线，从上至下第三条就是基线。基线对齐主要是为了两个控件中显示的英文单词的基线对齐。在下面的例子中，我使用中文字体来做演示，英文的话大家可以自行手动尝试。预期效果如下：

可以看出，后两个文本都是基于第一个文本的基线来对齐的。实现代码：

<?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:text1"
        ohos:height="50vp"
        ohos:width="100vp"
        ohos:text="文本1"
        ohos:text_alignment="center"
        ohos:vertical_center="true"
        ohos:background_element="$graphic:shape_bottom_bg"
        ohos:text_size="40fp"
        />
    <Text
        ohos:id="$+id:text2"
        ohos:height="50vp"
        ohos:width="100vp"
        ohos:text_alignment="center"
        ohos:text="文本2"
        ohos:text_size="30fp"
        ohos:right_of="$id:text1"
        ohos:align_baseline="$id:text1"
        ohos:background_element="$graphic:shape_bottom_bg"/>
    <Text
        ohos:id="$+id:text3"
        ohos:height="50vp"
        ohos:width="100vp"
        ohos:text_alignment="center"
        ohos:text="文本3"
        ohos:text_size="20fp"
        ohos:right_of="$id:text2"
        ohos:align_baseline="$id:text2"
        ohos:background_element="$graphic:shape_bottom_bg"/>
</DependentLayout>

2、排列方式

DependentLayout的排列方式是相对于其他同级组件或者父组件的位置进行布局。

2.1、相对于同级组件

相对于同级组件的属性有：xxx_of、algin_xxx。下面就以above_of、below_of、algin_start作为案例，效果如下：

代码实现：

<?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:text1"
        ohos:height="50vp"
        ohos:width="100vp"
        ohos:above="$id:text2"
        ohos:align_start="$id:text2"
        ohos:background_element="$graphic:shape_bottom_bg"
        ohos:bottom_margin="10vp"
        ohos:text="文本1"
        ohos:text_alignment="center"
        ohos:text_size="30fp"
        ohos:vertical_center="true"
        />

    <Text
        ohos:id="$+id:text2"
        ohos:height="50vp"
        ohos:width="100vp"
        ohos:background_element="$graphic:shape_bottom_bg"
        ohos:center_in_parent="true"
        ohos:text="文本2"
        ohos:text_alignment="center"
        ohos:text_size="30fp"/>

    <Text
        ohos:id="$+id:text3"
        ohos:height="50vp"
        ohos:width="100vp"
        ohos:align_start="$id:text2"
        ohos:background_element="$graphic:shape_bottom_bg"
        ohos:below="$id:text2"
        ohos:text="文本3"
        ohos:text_alignment="center"
        ohos:text_size="30fp"
        ohos:top_margin="10vp"/>
</DependentLayout>

2.2、相对于父组件

相对于父组件的属性有xxx_parent_xxx。下面就以align_parent_start、align_parent_top、horizontal_center、align_parent_end作为案例，效果如下：

代码实现：

<?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:text1"
        ohos:height="50vp"
        ohos:width="100vp"
        ohos:align_parent_start="true"
        ohos:align_parent_top="true"
        ohos:background_element="$graphic:shape_bottom_bg"
        ohos:text="文本1"
        ohos:text_alignment="center"
        ohos:text_size="30fp"
        ohos:vertical_center="true"
        />

    <Text
        ohos:id="$+id:text2"
        ohos:height="50vp"
        ohos:width="100vp"
        ohos:background_element="$graphic:shape_bottom_bg"
        ohos:horizontal_center="true"
        ohos:text="文本2"
        ohos:text_alignment="center"
        ohos:text_size="30fp"/>

    <Text
        ohos:id="$+id:text3"
        ohos:height="50vp"
        ohos:width="100vp"
        ohos:align_parent_end="true"
        ohos:align_parent_top="true"
        ohos:background_element="$graphic:shape_bottom_bg"
        ohos:text="文本3"
        ohos:text_alignment="center"
        ohos:text_size="30fp"/>
</DependentLayout>

3、代码实战

案例：使用代码创建DependentLayout，并为其添加两个文本跟一个按钮，点击按钮后，交换两个文本的位置。效果如下：

代码实现：

    private void testDependentLayout(){
        DependentLayout dLayout = new DependentLayout(this);
        LayoutConfig layoutConfig =
                new LayoutConfig(LayoutConfig.MATCH_PARENT, LayoutConfig.MATCH_PARENT);
        dLayout.setLayoutConfig(layoutConfig);
        //创建两个Text并添加到DependentLayout布局中
        Text text1 = new Text(getContext());
        text1.setId(1);
        text1.setText("文本1");
        text1.setTextSize(AttrHelper.fp2px(25,getContext()));
        text1.setTextColor(Color.BLUE);
        LayoutConfig configText1 = new LayoutConfig(LayoutConfig.MATCH_CONTENT,LayoutConfig.MATCH_CONTENT);
        configText1.addRule(LayoutConfig.HORIZONTAL_CENTER);
        text1.setLayoutConfig(configText1);
        dLayout.addComponent(text1);

        Text text2 = new Text(getContext());
        text2.setId(2);
        text2.setText("文本2");
        text2.setTextSize(AttrHelper.fp2px(25,getContext()));
        text2.setTextColor(Color.YELLOW);
        LayoutConfig configText2 = new LayoutConfig(LayoutConfig.MATCH_CONTENT,LayoutConfig.MATCH_CONTENT);
        configText2.addRule(LayoutConfig.BELOW,1);
        configText2.addRule(LayoutConfig.ALIGN_START,1);
        text2.setLayoutConfig(configText2);
        dLayout.addComponent(text2);

        Button button = new Button(this);
        button.setText("点击转换位置");
        button.setTextSize(AttrHelper.fp2px(25,this));
        button.setBackground(new ShapeElement(this,ResourceTable.Graphic_shape_bottom_bg));
        LayoutConfig configText3 = new LayoutConfig(LayoutConfig.MATCH_CONTENT,LayoutConfig.MATCH_CONTENT);
        configText3.addRule(LayoutConfig.BELOW,2);
        configText3.addRule(LayoutConfig.HORIZONTAL_CENTER);
        button.setLayoutConfig(configText3);
        button.setClickedListener(view->{
            LayoutConfig config1 = (LayoutConfig) text1.getLayoutConfig();
            config1.addRule(LayoutConfig.BELOW,2);
            text1.setLayoutConfig(config1);
            LayoutConfig config2 = (LayoutConfig)text2.getLayoutConfig();
            config2.removeRule(LayoutConfig.BELOW);
            config2.addRule(LayoutConfig.ALIGN_PARENT_TOP);
            text2.setLayoutConfig(config2);
            LayoutConfig config3 = (LayoutConfig)button.getLayoutConfig();
            configText3.addRule(LayoutConfig.BELOW,1);
            button.setLayoutConfig(config3);
        });
        dLayout.addComponent(button);

        setUIContent(dLayout);
    }

上面的代码重点在于对LayoutConfig的使用，在使用时，务必导入正确的LayoutConfig，例如上面的例子，我们需要导入DependentLayout.LayoutConfig，如果导入成其它布局的，例如DirectionalLayout.LayoutConfig，那么编译就会失败。我们利用LayoutConfig来进行任务的添加addRule()以及任务的移除removeRule()。并且我们可以用getLayoutConfig()来获取当前组件设置的LayoutConfig。

小结

好了，到这里我们就把DependentLayout布局的内容讲完了。主要包括alginment属性的介绍以及DependentLayout布局中组件常用属性的介绍，有三大类：xxx_of、algin_xxx、xxx_parent_xxx。在这里我建议大家只记住这三个单词就好，其它的就由编辑器帮我们提示就好。接着我们讲了DependentLayout的排列方式，有两种，分别是相对于同级别组件和相对于父组件的排列。最后，我们通过了实战案例将两个文本进行位置替换，其主要用到了DependentLayout.Config来为组件添加和移除规则rule来实现案例效果。

思考总结

1、DependentLayout常用的XML属性有哪些（包括包含组件）？ 2、DependentLayout的排列方式有哪些？ 3、如何为DependentLayout布局中的组件添加和移除规则？

鸿蒙DependentLayout布局开发

概述

DependentLayout布局的使用

1、相关常用XML属性介绍

1.1、DependentLayout常用XML属性

1.2、包含组件可支持的XML属性（*）

2、排列方式

2.1、相对于同级组件

2.2、相对于父组件

3、代码实战

小结

思考总结