鸿蒙学习笔记之使用 XML 方式创建布局

春节不停更，此文正在参加「星光计划-春节更帖活动」

前言

平常使用的 APP 应用会在屏幕上显示一个用户界面，该界面用来显示所有可被用户查看和交互的内容。而应用中所有的用户界面元素都是由 Component 和 ComponentContainer 对象构成。

• Component 是绘制在屏幕上的一个对象，用户能与之交互。
• ComponentContainer 是一个用于容纳其他 Component 和 ComponentContainer 对象的容器。

Java UI 布局

Java UI框架中，提供了两种编写布局的方式：代码方式创建布局和 XML 方式声明 UI 布局。

XML 声明布局的方式更加简便直观。 每个 Component 和 ComponentContainer 对象中的大部分属性支持在 XML 中进行设置，它们都有各自的XML属性列表。

Component作为组件的基类，拥有各个组件常用的属性，例如 ID、布局参数等。

代码方式创建布局的方式比较麻烦，需要在 AbilitySlice 中分别创建组件和布局，并将它们进行组织关联。

本篇文章讲一下如何通过 XML 方式创建布局

XML 创建布局

XML 创建布局的方式简便直观。每一个 Component 和 ComponentContainer 对象大部分属性都支持在 XML 中进行设置，它们都有各自的 XML 属性列表。某些属性仅适用于特定的组件，例如：只有 Text 支持 “text_color” 属性，不支持该属性的组件如果添加了该属性，该属性则会被忽略。具有继承关系的组件子类将继承父类的属性列表，Component 作为组件的基类，拥有各个组件常用的属性，比如：ID、布局参数等。

首先，在 src\main\resources\base\layout 目录下 , 创建布局文件 ;

右键点击 layout 目录 , 在弹出的菜单中选择 " New / Layout Resource File " 选项 ：

默认添加线性布局 DirectionLayout 作为根布局，代码如下：

<?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">

</DirectionalLayout>

加入 Text 子组件

Text，顾名思义，文本。

• 标识属性 : ohos:id="$+id:text" , 为该组件设置标识 text , 在 Java 代码中可以通过该 id 标识获取 XML 布局中定义的组件 ; 其中 + 号作用是如果该 id 不存在则生成 id 常量 , 如果该 id 存在则使用已存在的常量 ; 在 Java 代码中可以通过该生成的常量来获取该组件 ;
• 宽高属性 : 宽度充满父容器 ohos:width=“match_parent” ; 高度包裹内容 ohos:height=“match_content” ;
• 文字内容属性 : 这是 Text 组件独有的属性 , ohos:text=“自定义布局 Text 组件” , 显示 " 自定义布局 Text 组件 " 文字 ;
• 文字字体大小属性 : 这是 Text 组件独有的属性 , ohos:text_size=“100” ;
• 文本对齐方式属性 : 这是 Text 组件独有的属性 , ohos:text_alignment=“center” 居中 ;

代码如下：

<Text
        ohos:id="$+id:text"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text_color="#FFDE1968"
        ohos:text="一起学习鸿蒙"
        ohos:text_size="40fp"
        ohos:center_in_parent="true"
        />

加入 Button 子组件

 <Button
        ohos:id="$+id:button"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="点击此处有惊喜"
        ohos:text_size="19fp"
        ohos:text_color="#FF0C43CF"
        ohos:top_padding="8vp"
        ohos:bottom_padding="8vp"
        ohos:right_padding="70vp"
        ohos:left_padding="70vp"
        ohos:center_in_parent="true"
        ohos:below="$id:text"
        ohos:margin="10vp"/>

完整的 XML 文件如下：

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    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:text_color="#FFDE1968"
        ohos:text="一起学习鸿蒙"
        ohos:text_size="40fp"
        ohos:center_in_parent="true"
        />
    <Button
        ohos:id="$+id:button"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="点击此处有惊喜"
        ohos:text_size="19fp"
        ohos:text_color="#FF0C43CF"
        ohos:top_padding="8vp"
        ohos:bottom_padding="8vp"
        ohos:right_padding="70vp"
        ohos:left_padding="70vp"
        ohos:center_in_parent="true"
        ohos:below="$id:text"
        ohos:margin="10vp"/>


</DependentLayout>

创建 Ability

右键点击想要创建 Ability 的包名 , 选择 New / Ability / Empty Page Ability ( Java ) 选项:

在弹出的对话框中输入 Ability 类名, 比如 XMLAbility , 点击 Finish 按钮 ;

然后就会自动生成两个 Java 文件：XMLAbility.java 和 XMLAbilitySlice.java，如图：

创建成功后，也会自动配置刚刚创建的 XMLAbility，我们会发现在 config.json 中的 “abilities” 标签下添加如下了 XMLAbility 配置 :

{
        "orientation": "unspecified",
        "name": "com.example.helloworld.XMLAbility",
        "icon": "$media:icon",
        "description": "$string:xmlability_description",
        "label": "$string:entry_XMLAbility",
        "type": "page",
        "launchType": "standard"
      }

设置 XMLAbility 为启动 Ability , 将 config.json 中该 XMLAbility 配置放在 “abilities”: [] 标签中第一个 , 按照如下配置 , 自定义的 com.example.helloworld.XMLAbility 就是应用启动后显示的第一个 Ability, 此时完整的 config.json 代码如下：

{
  "app": {
    "bundleName": "com.example.helloworld",
    "vendor": "example",
    "version": {
      "code": 1000000,
      "name": "1.0.0"
    }
  },
  "deviceConfig": {},
  "module": {
    "package": "com.example.helloworld",
    "name": ".MyApplication",
    "mainAbility": "com.example.helloworld.MainAbility",
    "deviceType": [
      "phone"
    ],
    "distro": {
      "deliveryWithInstall": true,
      "moduleName": "entry",
      "moduleType": "entry",
      "installationFree": true
    },
    "abilities": [
      {
        "orientation": "unspecified",
        "name": "com.example.helloworld.XMLAbility",
        "icon": "$media:icon",
        "description": "$string:xmlability_description",
        "label": "$string:entry_XMLAbility",
        "type": "page",
        "launchType": "standard"
      },
      {
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ],
        "orientation": "unspecified",
        "name": "com.example.helloworld.MainAbility",
        "icon": "$media:icon",
        "description": "$string:mainability_description",
        "label": "$string:entry_MainAbility",
        "type": "page",
        "launchType": "standard"
      }
    ]
  }
}

XMLAbility 加载布局文件

Ability 中加载布局文件 , 在 onStart 中调用 super.setUIContent ( ) 方法 , 设置加载的布局文件 ID , 代码如下 :

package com.example.helloworld;

import com.example.helloworld.slice.XMLAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;

public class XMLAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
//        super.setMainRoute(XMLAbilitySlice.class.getName());
        // 显示自定义的 ability_xml.xml 布局文件
        super.setUIContent(ResourceTable.Layout_ability_xml);
    }
}

运行代码：

总结

本文学习如何用 XML 的方式编写了一个包含文本和按钮的页面，可能有很多地方还写的不是很好，界面也是随意编写的，不是很美观。

但至少是我们自己创建的一个页面。接下来将继续学习其他 Java UI 中的常见组件，争取早日写出一个好看点的像常规使用的 APP UI界面。下一篇文章见！