概念
- DirectionalLayout用于将一组组件(Component)按照水平或者垂直方向排布,能够方便地对齐布局内的组件。
- DirectionalLayout的排列方向(orientation)分为水平(horizontal)或者垂直(vertical)方向。
- 使用orientation设置布局内组件的排列方式,默认为垂直排列
使用
我们使用代码来解释DirectionalLayout布局的使用
新建AbilitySlice
首先,我们再项目中新建一个DirectionalLayoutDemo如下:
public class DirectionalLayoutDemo extends AbilitySlice {
private Text txtLog;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_directional_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(DirectionalLayoutDemo.class.getName());
}
}
排列方式
垂直排列
新建布局文件directional_layout.xml如下:
<?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:background_element="#00FFFF"
ohos:orientation="vertical"
ohos:padding="32">
<Button ohos:id="$+id:button1"
ohos:height="match_content"
ohos:width="match_content"
ohos:left_margin="15"
ohos:top_margin="15"
ohos:bottom_margin="15"
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:left_margin="15"
ohos:top_margin="15"
ohos:bottom_margin="15"
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:left_margin="15"
ohos:top_margin="15"
ohos:bottom_margin="15"
ohos:text="按钮3"
ohos:background_element="#FF0000"
ohos:text_size="100"></Button>
</DirectionalLayout>
这个布局文件中,我们使用DirectionalLayout进行布局并设置ohos:orientation=“vertical” 使组件按照垂直方向进行排列,所以里面三个按钮垂直排列,结果如下
水平排列
水平排序只需设置ohos:orientation=“horizontal” 姐可以了,组件按照水平方向进行排列,所以里面三个按钮水平排列,结果如下:
对齐方式
- DirectionalLayout中的组件使用layout_alignment控制自身在布局中的对齐方式。常用的对齐参数见表1。
- 当对齐方式与排列方式方向一致时,对齐方式不会生效,如设置了水平方向的排列方式,则左对齐、右对齐将不会生效。
表1 常用的对齐参数
我们拿垂直排序中的左对齐、右对齐、水平方向剧中举例,布局文件directional_layout.xml如下:
<?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:background_element="#00FFFF"
ohos:orientation="vertical"
ohos:padding="32">
<Button ohos:id="$+id:button1"
ohos:height="match_content"
ohos:width="match_content"
ohos:layout_alignment="left"
ohos:left_margin="15"
ohos:top_margin="15"
ohos:bottom_margin="15"
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:left_margin="15"
ohos:top_margin="15"
ohos:bottom_margin="15"
ohos:layout_alignment="horizontal_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:left_margin="15"
ohos:top_margin="15"
ohos:bottom_margin="15"
ohos:layout_alignment="right"
ohos:text="按钮3"
ohos:background_element="#FF0000"
ohos:text_size="100"></Button>
</DirectionalLayout>
布局文件中排序为垂直排序,按钮1设置ohos:layout_alignment=“left” 使得其靠左对齐;按钮2设置ohos:layout_alignment=“horizontal_center” 使得其居中对齐;
按钮2设置ohos:layout_alignment=“right” 使得靠右对齐;效果如下:
权重
- 权重(weight)就是按比例来分配组件占用父组件的大小
- 在水平布局下计算公式为:
父布局可分配宽度=父布局宽度-所有子组件width之和;
组件宽度=组件weight/所有组件weight之和*父布局可分配宽度; - 实际使用过程中,建议使用width=0来按比例分配父布局的宽度
使用
布局文件directional_layout.xml如下:
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="#00FF00"
ohos:orientation="horizontal"
ohos:padding="32">
<Button ohos:id="$+id:button4"
ohos:height="match_content"
ohos:width="0"
ohos:weight="1"
ohos:text="按钮4"
ohos:background_element="#0000FF"
ohos:text_size="100"></Button>
<Button ohos:id="$+id:button5"
ohos:height="match_content"
ohos:width="0"
ohos:weight="1"
ohos:text="按钮5"
ohos:background_element="#00FFAA"
ohos:text_size="100"></Button>
<Button ohos:id="$+id:button6"
ohos:height="match_content"
ohos:width="0"
ohos:weight="2"
ohos:text="按钮6"
ohos:background_element="#FF0000"
ohos:text_size="100"></Button>
</DirectionalLayout>
该布局以水平方向布局,三个按钮设置ohos:width=“0”,然后按钮1和按钮2设置权重ohos:weight=“1”,按钮3设置权重ohos:weight=“2”;所以按钮1和按钮2宽度占总体的1/4,而按钮3宽度占总体的1/2,效果如下: