HarmonyOS布局简介以及使用Java UI编写布局

简介

因为笔者是从事Android开发的，所以这里大多都带入Android的布局概念，对Android不熟悉的还望谅解一下。

目前鸿蒙的布局也主要分为线性布局和相对布局两种布局，今天就主要介绍一下这两种布局的属性以及在ability文件中用java ui框架编写布局。

线性布局

DirectionalLayout译为定向布局，和Android里面的LinearLayout一样，往一个方向添加元素；同样可以通过orientation设置布局的方向，可以设置为水平和垂直。

//垂直方向
ohos:orientation="vertical"
//水平方向
ohos:orientation="horizontal"

布局元素称之为组件(Component)，一个元素代表一个组件。

线性布局还是很简单的，通过几个元素就可以看出来效果：

<?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:alignment="center"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:text_helloworld"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_ability_main"
        ohos:layout_alignment="horizontal_center"
        ohos:text="$string:mainability_HelloWorld"
        ohos:text_size="20fp"
        />

    <Button
        ohos:id="$+id:btnIntent"
        ohos:height="50vp"
        ohos:text="按钮"
        ohos:text_size="20fp"
        ohos:top_margin="20vp"
        ohos:background_element="$graphic:btn_intent"
        ohos:width="match_parent"/>

    <Button
        ohos:id="$+id:btnJavaUI"
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:text="声明式Ability"
        ohos:background_element="$graphic:btn_intent"
        ohos:top_margin="20vp"
        ohos:text_size="20fp"/>

</DirectionalLayout>

三个元素垂直排列就可以得到以下效果：

元素的属性就不多做介绍了，做过Android的基本都知道，什么内边距啊，外边距啊，鸿蒙也是一样的有。

相对布局

DependentLayout 译为依赖布局，同样可以理解为Android里面的RelativeLayout相对布局，这样一带入就很好理解了；主要还是来看一下布局内组件支持的属性：

组件之间的属性：

组件与父控件之间的属性：

要相较于父控件某个位置对齐就可以使用组件与父控件之间的属性进行依赖；组件与组件之间就可以使用组件之间的属性。

还是一段简单的代码，同样可以得到两个按钮垂直排列的效果：

<DependentLayout
    ohos:height="200vp"
    ohos:width="match_parent"
    ohos:below="$id:layout1">

    <Text
        ohos:id="$+id:tv1"
        ohos:height="40vp"
        ohos:width="match_parent"
        ohos:text_size="20fp"
        ohos:background_element="$graphic:shape_round"
        ohos:text="第二个页面"/>

    <Text
        ohos:height="40vp"
        ohos:width="match_parent"
        ohos:below="$id:tv1"
        ohos:text_size="20fp"
        ohos:background_element="$graphic:shape_round"
        ohos:top_margin="20vp"
        ohos:text="我在第一个tv下面"/>

</DependentLayout>

Java ui声明式布局

之前在介绍布局的时候都是在xml里面进行编写的，这里harmonyOS多了一个方式是在ability中用java代码的方式进行编写UI，这也是Android在推出compose之前没有的操作；下面就来介绍一下这种编写UI的方式。

在编写之前先来看一下Ability引用xml布局的方式

可以看到要引入布局是直接在setUIContent里面通过ResourceTable的方式来进行引入，在AbilitySlice.class文件里面也可以看到这样一个方法，传入的是一个int类型的值：

public final void setUIContent(int layoutRes) {
   
    throw new RuntimeException("Stub!");
}

但是在这个方法下面还有一个方法，传入的是ComponentContainer类型的值，通过这个值我们就可以使用java代码来编写UI：

public final void setUIContent(int layoutRes) {
   
    throw new RuntimeException("Stub!");
}

public void setUIContent(ComponentContainer componentContainer) {
   
    throw new RuntimeException("Stub!");
}

下面通过代码来实现一个很简单的布局，最外层线性布局，里面包含一个线性布局和一个相对布局，草图如下：

1.编写最外层布局(红色框框部分)
最外层可以对照成xml布局文件里面最外层的那个布局。

//定义一个最外层的线性布局
private DirectionalLayout mainLayout;
//实例化该布局
mainLayout = new DirectionalLayout(this);
//设置布局宽度
mainLa