概述

Directional中文翻译为方向的。顾名思义，DirectionalLayout布局就是用于将一组组件(Component)按照水平或者垂直方向排布。在本文中，我们将学习DirectionalLayout常用的XML属性，子组件常用的XMl属性。进而再学习如果运行DirectionalLayout进行排列、对齐，以及为子组件设置权重等，最后我们再使用代码来创建DirectionalLayout以及为其添加相应子控件。好了，现在我们就来先介绍XML属性的内容。

DirectionalLayout的使用

1、相关常用XML属性介绍

1.1、DirectionalLayout常用XML属性

属性名称	描述	取值
alignment	对齐方式	start表示靠起始端对齐，end表示靠结束端对齐。
orientation	子布局排列方向	horizontal表示水平方向布局，vertical表示垂直方向布局。
total_weight	所有子视图的权重之和	float类型，可以直接设置浮点数值，也可以引用float浮点数资源。

在这里，需要注意alignment的取值，我这里只列举了start跟end。其它取值就以其表面意思理解就可以了。alignment的取值也可以使用“|”进行多项组合，例如ohos:alignment=”top|left”表示左上角对齐。如果我们没有为DirectionalLayout设置orientation属性，那么默认的对齐方式为vertical垂直方向布局。

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

属性名称	描述	取值
layout_alignment	对齐方式	left、top等等，可以使用“\|”进行多项组合。
weight	比重	float类型，可以直接设置浮点数值，也可以引用float浮点数资源。

2、使用orientation实现水平和垂直排列

DirectionalLayout的排列方向（orientation）分为水平（horizontal）或者垂直（vertical）方向。使用orientation设置布局内组件的排列方式，默认为垂直排列。

2.1、垂直排列

案例：垂直方向排列三个文本Text控件。

代码实现如下：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <Text
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="文本1"
        ohos:text_size="40fp"/>
    <Text
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:top_margin="10vp"
        ohos:text="文本2"
        ohos:text_size="40fp"/>
    <Text
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:top_margin="10vp"
        ohos:text="文本2"
        ohos:text_size="40fp"/>
</DirectionalLayout>
复制代码

2.2、水平排列

案例：水平方向排列三个文本Text控件。

代码实现如下：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="horizontal">

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="文本1"
        ohos:text_size="25fp"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:start_margin="10vp"
        ohos:text="文本2"
        ohos:text_size="25fp"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:start_margin="10vp"
        ohos:text="文本3"
        ohos:text_size="25fp"/>
</DirectionalLayout>
复制代码

注意（*）：DirectionalLayout不会自动换行，其子组件会按照设定的方向依次排列，若超过布局本身的大小，超出布局大小的部分将不会被显示。

3、对齐方式

DirectionalLayout中的组件使用layout_alignment控制自身在布局中的对齐方式，当对齐方式与排列方式方向一致时，对齐方式不会生效，如设置了水平方向的排列方式，则左对齐、右对齐将不会生效。

案例：在垂直排列布局下，实现左对齐、水平居中对齐以及右对齐。

代码实现如下：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <Text
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:layout_alignment="start"
        ohos:text="文本1"
        ohos:text_size="40fp"/>
    <Text
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:text="文本2"
        ohos:text_size="40fp"/>
    <Text
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:layout_alignment="end"
        ohos:text="文本3"
        ohos:text_size="40fp"/>
</DirectionalLayout>
复制代码

4、权重介绍

权重（weight）顾名思义就是按比例来分配组件占用父组件的大小。例如在水平布局下计算公式为：

父布局可分配宽度=父布局宽度-所有子组件width之和；
组件宽度=组件weight/所有组件weight之和*父布局可分配宽度；

实际使用过程中，建议使用width=0来按比例分配父布局的宽度，1:1:1效果如下：

实现代码如下：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="horizontal">

    <Text
        ohos:height="match_content"
        ohos:width="0vp"
        ohos:background_element="$graphic:shape_bottom_bg"
        ohos:text="文本1"
        ohos:text_alignment="center"
        ohos:text_size="25fp"
        ohos:weight="1"/>

    <Text
        ohos:height="match_content"
        ohos:width="0vp"
        ohos:background_element="$graphic:shape_bottom_bg"
        ohos:start_margin="5vp"
        ohos:text="文本2"
        ohos:text_alignment="center"
        ohos:text_size="25fp"
        ohos:weight="1"
        />

    <Text
        ohos:height="match_content"
        ohos:width="0vp"
        ohos:background_element="$graphic:shape_bottom_bg"
        ohos:start_margin="5vp"
        ohos:text="文本3"
        ohos:text_alignment="center"
        ohos:text_size="25fp"
        ohos:weight="1"/>
</DirectionalLayout>
复制代码

5、使用代码添加DirectionalLayout

案例：使用代码实现水平排列三个文本Text控件，效果如下：

代码实现：

DirectionalLayout dLayout = new DirectionalLayout(getContext());
dLayout.setOrientation(DirectionalLayout.HORIZONTAL);//设置横向布局
for (int i=0;i<3;i++){
    Text text = new Text(getContext());
    text.setText("文本"+(i+1))；
    text.setTextSize(AttrHelper.fp2px(25,getContext()));
    dLayout.addComponent(text);
}
setUIContent(dLayout);
复制代码

6、小结

在前面，我们学习了DirectionalLayout布局的常用XML属性，有alignment、orientation以及weight_total属性。alignment属性影响布局里面组件的对齐方式，orientation属性决定了布局的排列方式，分别有垂直排列和水平排列，默认为垂直排列。DirectionalLayout布局包含组件的常见XML属性有，layout_alginment以及weight。layout_alginment属性决定组件在布局中的对齐方式，weight属性表示权重，用来按比例来分配组件占用父组件的大小。最后我们还学习了如何使用代码创建DirectionalLayout布局并为其添加相应的子控件。

温馨提示：

在使用DirectionalLayout布局时，我们需要注意以下几点：

DirectionalLayout不会自动换行，其子组件会按照设定的方向依次排列，若超过布局本身的大小，超出布局大小的部分将不会被显示。
DirectionalLayout中的组件使用layout_alignment控制自身在布局中的对齐方式，当对齐方式与排列方式方向一致时，对齐方式不会生效，如设置了水平方向的排列方式，则左对齐、右对齐将不会生效。
实际使用过程中，建议使用width=0来按比例分配父布局的宽度。