第三章 - 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文件中即可。

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent">
    <Text
        ohos:id="$+id:text"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="程序咖"
        ohos:text_color="#000000"
        ohos:text_size="32fp"
        ohos:center_in_parent="true"/>
    <Button
        ohos:id="$+id:button"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="IT职业技能评测平台"
        ohos:text_size="19fp"
        ohos:text_color="#FFFFFF"
        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>

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

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners
        ohos:radius="100"/>
    <solid
        ohos:color="#007DFF"/>
</shape>

代码拷贝完毕后，需要切换到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分钟实现页面跳转