鸿蒙系统中DirectionalLayout线性布局

Posted 2021-06-17 前进道路上的程序猿

鸿蒙系统中DirectionalLayout线性布局

• 前言
• 前期准备
• • 新建项目
  • 新建线性布局页面
• 排列方式
• • 垂直排列
  • 水平排列
• 对其方式
• 权重

前言

DirectionalLayout布局用于将一组组件(Component)按照水平或者垂直方向排布，能够方便地对齐布局内的组件。
DirectionalLayout的自有XML属性以及所包含组件可支持的XML属性如下

参考文档

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-layout-directionallayout-0000001050769565

实现效果如下：
下面我们就在用案例来说明

前期准备

新建项目

我们打开开发工具DevEco Studio，然后点击新建项目弹出页面

我们在这个页面上选择phone和EmptyFeatureAbility(Java)->next

填好相应的项目信息后，点击finish新建项目

新建线性布局页面

我们在右键点击新建线性布局页面的文件夹，然后new->Ability->Empty Page Ability(java)

弹出页面填写相应的页面名称等信息，点击finish

DirectionLayoutSlice中引入样式文件如下：
DirectionLayoutSlice.java：

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

MainAbility中使用这个slice
MainAbility.java：

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

排列方式

线性布局的排列方式一般有垂直和水平排列，这里就用到了DirectionalLayout的自有XML属性中的orientation这个属性了

垂直排列

我们在direction_layout.xml使用垂直排列如下：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:orientation="vertical">
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:left_margin="130px"
        ohos:background_element="red"
        ohos:text_size="50px"
        ohos:text="Button 1"/>
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:left_margin="130px"
        ohos:background_element="yellow"
        ohos:text_size="50px"
        ohos:text="Button 2"/>
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:left_margin="130px"
        ohos:background_element="blue"
        ohos:text_size="50px"
        ohos:text="Button 3"/>
</DirectionalLayout>

代码中，我们定义了三个按钮，这三个按钮都是宽度为330px，高度为 200px，底部边距30px，左边边距130px，字体大小50px，仅仅背景色以及文字不一致
然后在DirectionalLayout节点中定义ohos:orientation=“vertical”
打开模拟器运行效果如下：

水平排列

水平排列的话就需要定义ohos:orientation=“horizontal”，代码如下：

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:orientation="horizontal">
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:left_margin="130px"
        ohos:background_element="red"
        ohos:text_size="50px"
        ohos:text="Button 1"/>
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:left_margin="130px"
        ohos:background_element="yellow"
        ohos:text_size="50px"
        ohos:text="Button 2"/>
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:left_margin="130px"
        ohos:background_element="blue"
        ohos:text_size="50px"
        ohos:text="Button 3"/>
</DirectionalLayout>

页面效果如下：

我们看到，三个组件虽然水平排列了，但是Button3按钮部分未显示，这是因为DirectionalLayout不会自动换行，其子组件会按照设定的方向依次排列，若超过布局本身的大小，超出布局大小的部分将不会被显示

对其方式

DirectionalLayout中的组件使用layout_alignment控制自身在布局中的对齐方式
当对齐方式与排列方式方向一致时，对齐方式不会生效
布局文件代码如下

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:orientation="vertical">
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:background_element="red"
        ohos:text_size="50px"
        ohos:layout_alignment="left"
        ohos:text="Button 1"/>
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:background_element="yellow"
        ohos:text_size="50px"
        ohos:layout_alignment="horizontal_center"
        ohos:text="Button 2"/>
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:background_element="blue"
        ohos:text_size="50px"
        ohos:layout_alignment="right"
        ohos:text="Button 3"/>
</DirectionalLayout>

代码中我们使用垂直排列，然后第一个按钮设置为左对其，第二个按钮设置为中间对其，第三个按钮设置为右对齐，其效果如下

如果我们把布局设为水平排列，**ohos:orientation=“horizontal”**则效果如下：

对齐没有产生效果

权重

权重（weight）就是按比例来分配组件占用父组件的大小，在组件中需要用ohos:weight来配置

在水平布局下计算公式为：
父布局可分配宽度=父布局宽度-所有子组件width之和；
组件宽度=组件weight/所有组件weight之和*父布局可分配宽度；

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

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:orientation="horizontal">
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:background_element="red"
        ohos:text_size="50px"
        ohos:weight="1"
        ohos:text="Button 1"/>
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:background_element="yellow"
        ohos:text_size="50px"
        ohos:weight="2"
        ohos:text="Button 2"/>
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:background_element="blue"
        ohos:text_size="50px"
        ohos:weight="1"
        ohos:text="Button 3"/>
</DirectionalLayout>

代码中，Button1和Button3占父组件宽度的四分之一，而Button2占父组件四分之二，如下：

更多技术交流请加入QQ群
群名称：华为鸿蒙harmonyos开发
群 号：1164091073