乐趣区

关于harmonyos:12HarmonyOS鸿蒙开发组件与布局

jiezi

作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

HarmonyOS 提供了 Ability 和 AbilitySlice 两个根底类，一个有界面的 Ability 能够由一个或多个 AbilitySlice 形成，AbilitySlice 次要用于承载单个页面的具体逻辑实现和界面 UI，是利用显示、运行和跳转的最小单元。AbilitySlice 通过 setUIContent 为界面设置布局。

表 1 AbilitySlice 的 UI 接口

接口申明 接口形容
setUIContent(ComponentContainer root) 设置界面入口，root 为界面组件树根节点。

组件须要进行组合，并增加到界面的布局中。在 Java UI 框架中，提供了两种编写布局的形式：

  • 在代码中创立布局：用代码创立 Component 和 ComponentContainer 对象，为这些对象设置适合的布局参数和属性值，并将 Component 增加到 ComponentContainer 中，从而创立出残缺界面。
  • 在 XML 中申明 UI 布局：按层级构造来形容 Component 和 ComponentContainer 的关系，给组件节点设定适合的布局参数和属性值，代码中可间接加载生成此布局。

这两种形式创立出的布局没有实质差异，在 XML 中申明布局，在加载后同样可在代码中对该布局进行批改。

一、组件分类

依据组件的性能，能够将组件分为布局类、显示类、交互类三类：

组件类别 组件名称 性能形容
布局类 PositionLayout、DirectionalLayout、StackLayout、DependentLayout、TableLayout、AdaptiveBoxLayout 提供了不同布局标准的组件容器，例如以繁多方向排列的 DirectionalLayout、以绝对地位排列的 DependentLayout、以确切地位排列的 PositionLayout 等。
显示类 Text、Image、Clock、TickTimer、ProgressBar 提供了单纯的内容显示，例如用于文本显示的 Text，用于图像显示的 Image 等。
交互类 TextField、Button、Checkbox、RadioButton/RadioContainer、Switch、ToggleButton、Slider、Rating、ScrollView、TabList、ListContainer、PageSlider、PageFlipper、PageSliderIndicator、Picker、TimePicker、DatePicker、SurfaceProvider、ComponentProvider 提供了具体场景下与用户交互响应的性能，例如 Button 提供了点击响应性能，Slider 提供了进度抉择性能等。

框架提供的组件使利用界面开发更加便当，这些组件的具体性能阐明及属性设置详见 API 参考。

二、代码创立布局

开发如下图所示界面，须要增加一个 Text 组件和 Button 组件。因为两个组件从上到下顺次居中排列，能够抉择应用竖向的 DirectionalLayout 布局来搁置组件。

代码创立布局须要在 AbilitySlice 中别离创立组件和布局，并将它们进行组织关联。

2.1 创立组件

  1. 申明组件 

    Button button = new Button(getContext());

  2. 设置组件大小 

    button.setWidth(ComponentContainer.LayoutConfig.MATCH_CONTENT);button.setHeight(ComponentContainer.LayoutConfig.MATCH_CONTENT);

  3. 设置组件属性 

    button.setText("My name is Button.");button.setTextSize(50);

2.2 创立布局并应用

  1. 申明布局 

    DirectionalLayout directionalLayout = new DirectionalLayout(getContext());

  2. 设置布局大小 

    directionalLayout.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);directionalLayout.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT);

  3. 设置布局属性 

    directionalLayout.setOrientation(Component.VERTICAL);

  4. 将组件增加到布局中（视布局须要对组件设置布局属性进行束缚）

    directionalLayout.addComponent(button);

  5. 将布局增加到组件树中 

    setUIContent(directionalLayout);

示例代码如下：

public class ExampleAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {super.onStart(intent);
        // 申明布局
        DirectionalLayout directionalLayout = new DirectionalLayout(getContext());
        // 设置布局大小
        directionalLayout.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);
        directionalLayout.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT);
        // 设置布局属性
        directionalLayout.setOrientation(Component.VERTICAL);
        directionalLayout.setPadding(32, 32, 32, 32);

        Text text = new Text(getContext());
        text.setText("My name is Text.");
        text.setTextSize(50);
        text.setId(100);
        // 为组件增加对应布局的布局属性
        DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT);
        layoutConfig.alignment = LayoutAlignment.HORIZONTAL_CENTER;
        text.setLayoutConfig(layoutConfig);

        // 将 Text 增加到布局中
        directionalLayout.addComponent(text);

        // 相似的增加一个 Button
        Button button = new Button(getContext());
        layoutConfig.setMargins(0, 50, 0, 0);
        button.setLayoutConfig(layoutConfig);
        button.setText("My name is Button.");
        button.setTextSize(50);
        ShapeElement background = new ShapeElement();
        background.setRgbColor(new RgbColor(0, 125, 255));
        background.setCornerRadius(25);
        button.setBackground(background);
        button.setPadding(10, 10, 10, 10);
        button.setClickedListener(new Component.ClickedListener() {
            @Override
            // 在组件中减少对点击事件的检测
            public void onClick(Component component) {// 此处增加按钮被点击须要执行的操作}
        });
        directionalLayout.addComponent(button);

        // 将布局作为根布局增加到视图树中
        super.setUIContent(directionalLayout);
    }
}

依据以上步骤创立组件和布局后的界面显示成果如图 1 所示。其中，代码示例中为组件设置了一个按键回调，在按键被按下后，利用会执行自定义的操作。

在代码示例中，能够看到设置组件大小的办法有两种：

  • 通过 setWidth/setHeight 间接设置宽高。
  • 通过 setLayoutConfig 办法设置布局属性来设定宽高。

这两种办法的区别是后者还能够减少更多的布局属性设置，例如：应用“alignment”设置程度居中的束缚。另外，这两种办法设置的宽高以最初设置的作为最终后果。它们的取值统一，能够是以下取值：

  • 具体以像素为单位的数值。
  • MATCH_PARENT：示意组件大小将扩大为父组件容许的最大值，它将占据父组件方向上的残余大小。
  • MATCH_CONTENT：示意组件大小与它内容占据的大小范畴相适应。

三、XML 创立布局

XML 申明布局的形式更加简便直观。每一个 Component 和 ComponentContainer 对象大部分属性都反对在 XML 中进行设置，它们都有各自的 XML 属性列表。某些属性仅实用于特定的组件，例如：只有 Text 反对“text_color”属性，但不反对该属性的组件如果增加了该属性，该属性则会被疏忽。具备继承关系的组件子类将继承父类的属性列表，Component 作为组件的基类，领有各个组件罕用的属性，比方：ID、布局参数等。

ID

ohos:id="$+id:text"

在 XML 中应用此格局申明一个对开发者敌对的 ID，它会在编译过程中转换成一个常量。尤其在 DependentLayout 布局中，组件之间须要形容绝对地位关系，形容时要通过 ID 来指定对应组件。

布局中的组件通常要设置独立的 ID，以便在程序中查找该组件。如果布局中有不同组件设置了雷同的 ID，在通过 ID 查找组件时会返回查找到的第一个组件，因而尽量保障在所要查找的布局中为组件设置独立的 ID 值，避免出现与预期不合乎的问题。

布局参数 

ohos:width="20vp"ohos:height="10vp"

与代码中设置组件的宽度和高度相似，在 XML 中它们的取值能够是：

  • 具体的数值：10（以像素为单位）、10vp（以屏幕绝对像素为单位）。
  • match_parent：示意组件大小将扩大为父组件容许的最大值，它将占据父组件方向上的残余大小。
  • match_content：示意组件大小与它的内容占据的大小范畴相适应。

3.1 创立 XML 布局文件

  1. 在 DevEco Studio 的“Project”窗口，关上“entry > src > main > resources > base”，右键点击“layout”文件夹，抉择“New > Layout Resource File”，命名为“first_layout”。

  2. 关上新创建的 first_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_parent"
    ohos:orientation="vertical"
    ohos:padding="32">
    <Text
        ohos:id="$+id:text"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:text="My name is Text."
        ohos:text_size="25fp"/>
    <Button
        ohos:id="$+id:button"
        ohos:margin="50"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:text="My name is Button."
        ohos:text_size="50"/>
</DirectionalLayout>

3.2 加载 XML 布局

在代码中须要加载 XML 布局，并增加为根布局或作为其余布局的子 Component。

package com.example.myapplication.slice;

import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.*;
import ohos.agp.components.element.ShapeElement;

public class ExampleAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {super.onStart(intent);
        // 加载 XML 布局作为根布局
        super.setUIContent(ResourceTable.Layout_first_layout);
        Button button = (Button) findComponentById(ResourceTable.Id_button);
        if (button != null) {
            // 设置组件的属性
            ShapeElement background = new ShapeElement();
            background.setRgbColor(new RgbColor(0, 125, 255));
            background.setCornerRadius(25);
            button.setBackground(background);

            button.setClickedListener(new Component.ClickedListener() {
                @Override
                // 在组件中减少对点击事件的检测
                public void onClick(Component component) {// 此处增加按钮被点击须要执行的操作}
            });
        }
    }
}

更多内容：

1、社区：鸿蒙巴士 https://www.harmonybus.net/

2、公众号：HarmonyBus

3、技术交换 QQ 群：714518656

4、视频课：https://www.chengxuka.com

退出移动版