作者：孔壹学院、程序咖创始人黎跃春。
免费系统学习请移步：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的方式编写了一个包含文本和按钮的页面。为了帮助大家熟悉在代码中创建布局的方式，接下来我们使用代码的方式编写第二个页面。