第三章 - HarmonyOS鸿蒙开发：3分钟XML布局编写第一个页面

作者：孔壹学院、程序咖创始人黎跃春。

免费系统学习请移步：https://chengxuka.com

上一篇文章我们带大家从0到1把HelloWord小项目运行起来了，到目前为止，我还没有给大家讲解任何的原理，相信我，学技术就是这样，刚开始的时候，不需要知道里面的门道和理论，直接上代码，按流程出结果即可，后面再回过头来研究里面实现的逻辑。

这一小节我们同样不讲解原理，而是带大家三分钟先搞定一个页面。

话不多说，打开你的上一个Hello Word项目。

1. 先简单介绍一下项目的结构

• layout文件夹的xml文件用于UI布局。
• graphic文件夹的xml文件用于样式渲染，类似于CSS。
• /main/java/com.example.myapplication/slice/MainAbilitySlice.java用于启动加载UI布局。

对项目结构有大致了解后，我们来看一下本章节中，我们需要完成的小项目的效果图，如下所示：

2. 要完成上面的效果图，我们按下面的三个步骤操作即可

2.1 在layout/ability_main.xml中完成一个Text和一个Button的布局。将下面的代码拷贝到ability_main.xml文件中即可。

2.2 在graphic文件夹中创建background_button.xml，这个文件夹主要是设置Button的样式，文件创建完后，将下面的代码拷贝即可。

代码拷贝完毕后，需要切换到layout/ability_main.xml文件中，添加如下一行代码，将Button和background_button.xml里面的样式关联起来。

ohos:background_element="$graphic:background_button"

2.3 切换到/main/java/com.example.myapplication/slice/MainAbilitySlice.java文件中，拷贝下面的代码进行替换，这里主要是为了加载我们的UI布局。

package com.example.myapplication.slice;

import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main); // 加载XML布局
    }
}

3. 我们来运行项目看看效果

**备注：**在这一节中，我们用XML的方式编写了一个包含文本和按钮的页面。为了帮助大家熟悉在代码中创建布局的方式，接下来我们使用代码的方式编写第二个页面。

入门系列

• HarmonyOS鸿蒙开发：开发环境DevEco Studio安装
• 第二章 - HarmonyOS鸿蒙开发：从Hello Word开始
• 第三章 - HarmonyOS鸿蒙开发：3分钟XML布局编写第一个页面
• 第四章 - HarmonyOS鸿蒙开发：3分钟Java代码编写第二个页面
• 第五章 - HarmonyOS鸿蒙开发：3分钟实现页面跳转