1.9 【实战】HarmonyOS第一个应用开发_鸿蒙入门：HarmonyOS应用开发-QQ阅读男生轻小说网

上QQ阅读APP看书，第一时间看更新

1.9 【实战】HarmonyOS第一个应用开发

1.9.1　实战目标

（1）初步熟悉使用XML显式声明UI布局。

（2）初步熟悉使用Java代码编写页面布局。

（3）初步熟悉页面跳转。

（4）初步熟悉按钮组件。

本节的实战将分别通过XML显式声明UI布局与Java代码编写布局这两种方式编写两个简单的页面，并通过单击按钮跳转到代码创建的页面。

1.9.2　通过XML显式编写第一个页面

在entry→src→main→resources→base→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>

在entry→src→main→resource→base→layout文件夹下创建文件，并将其命名为main_layout.xml，通常布局类型包括单一方向布局、相对位置布局、精确位置布局，本实战采用相对位置布局DependentLayout，main_layout.xml声明代码如下。

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="#000000">
<Text
ohos:id="$+id:test"
ohos:width="match_content"
ohos:height="match_content"
ohos:center_in_parent="true"
ohos:text="你好！张方兴！ "
ohos:text_color="white"
ohos:text_size="40vp"/>
<Button
ohos:id="$+id:button"
ohos:width="match_content"
ohos:height="match_content"
ohos:text="跳转下一页面"
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:test"
ohos:margin="10vp"
ohos:background_element="$graphic:background_button"/>
</DependentLayout>

此声明代码中部分内容的释义如下。

● DependentLayout：相对位置布局。

● xmlns：配置XML文件的schma定义。

● ohos：HarmonyOS配置头。

● match_parent：所在布局或组件采用父类容器的高度，如果在XML文件最外层的布局中采用该配置，则会采用屏幕的高度。

● ohos:id：该组件的id，设置后会将该组件自动注册到ResourceTable之中，可在Java代码中调用该组件。

● ohos:height：配置高度。

● ohos:width：配置宽度。

● vp：虚拟像素（Virtual Pixel），HarmonyOS独有的计量单位，是一台设备针对应用而言所具有的虚拟尺寸（区别于屏幕硬件本身的像素单位）。它提供了一种灵活的方式来适应不同屏幕的显示效果。除vp外Android中的dpi（屏幕像素密度）、dp（设备独立像素）、sp（缩放独立像素）也都可以使用。

在编辑声明代码的过程中可通过右侧的Previewer工具查看当前编辑的页面样式，如图1-11所示。也可以将模拟器切换至横屏进行查看，效果如图1-12所示。

图1-11

图1-12

1.9.3　通过Java代码调用第一个页面

修改com.example.myapplication_01.slice.MainAbilitySlice文件如下。

package com.example.myapplication_01.slice;
import com.example.myapplication_01.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_main_layout);
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}

此文件中通过super.setUIContent()设置初始化页面，由于本实战的布局存放在resources→base →layout文件夹下，所以默认被注册在ResourceTable对象内，只需要直接进行调用即可。另外要注意此处需要引用自己项目的ResourceTable，默认情况下会有本项目的ResourceTable和底层自带的ResourceTable，例如此处引用的是com.example.myapplication_01.ResourceTable。

MainAbilitySlice之所以是初次进入应用时展示的页面，是因为在MainAbility类中进行了定义，com.example.myapplication_01.MainAbility代码如下。

package com.example.myapplication_01;
import com.example.myapplication_01.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
public class MainAbility extends Ability {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setMainRoute(MainAbilitySlice.class.getName());
}
}

在这段代码中通过setMainRoute()将初始化页面设置为MainAbilitySlice.class，所以MainAbilitySlice是初次进入应用时展示的页面。

MainAbility之所以能够定义初始化页面，是因为它在项目的config.json中进行了定义，config.json在前文有简略描述。

在设置好第一个页面之后，可以通过HarmonyOS模拟器运行应用，得到的效果与图1-11相同。

1.9.4　通过Java代码编写第二个页面

创建新的类com.example.myapplication_01.slice.MyAbilitySlice，用于使用Java代码编写第二个页面，代码如下。

package com.example.myapplication_01.slice;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.DependentLayout;
import ohos.agp.components.Text;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.Color;
import ohos.agp.components.DependentLayout.LayoutConfig;
public class MyAbilitySlice extends AbilitySlice{
@Override
public void onStart(Intent intent) {
super.onStart(intent);
// 声明布局
DependentLayout myLayout = new DependentLayout(this);
// 设置布局宽高
myLayout.setWidth(LayoutConfig.MATCH_PARENT);
myLayout.setHeight(LayoutConfig.MATCH_PARENT);
// 设置布局背景为白色
ShapeElement background = new ShapeElement();
background.setRgbColor(new RgbColor(255, 255, 255));
myLayout.setBackground(background);
// 创建一个文本
Text text = new Text(this);
text.setText("Hi 第二个页面");
text.setWidth(LayoutConfig.MATCH_PARENT);
text.setTextSize(100);
text.setTextColor(Color.BLACK);
// 设置文本的布局
DependentLayout.LayoutConfig textConfig = new
DependentLayout.LayoutConfig(LayoutConfig.MATCH_CONTENT,
LayoutConfig.MATCH_CONTENT);
textConfig.addRule(LayoutConfig.CENTER_IN_PARENT);
text.setLayoutConfig(textConfig);
myLayout.addComponent(text);
super.setUIContent(myLayout);
}
}

1.9.5　在第一个页面的按钮上添加监听器

虽然第一个页面已经展示出了按钮效果，但是该按钮无法正常使用，因为它还没有添加监听器，修改com.example.myapplication_01.slice.MainAbilitySlice的onStart()函数如下。

package com.example.myapplication_01.slice;
import com.example.myapplication_01.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
public class MainAbilitySlice extends AbilitySlice {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_main_layout);
//获取页面上的按钮
Button button = (Button) findComponentById(ResourceTable.Id_button);
//给按钮添加监听器，单击按钮跳转至第二个页面
button.setClickedListener(listener -> present(new MyAbilitySlice(), new
Intent()));
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}

此时便在第一个页面中获取到了按钮，并且为它添加了单击事件的监听器，一旦发生单击事件便会跳转到MyAbilitySlice实例页面之中。

present( )为SDK（Software Development Kit，软件开发工具包）中的内置函数，只需要直接调用即可。如果出现找不到该函数等相关错误，需要查看一下继承的类是否正确，或者SDK是否被正确设置。

如果要编写有参数的跳转功能，只需要把参数放置在Intent对象之中即可，代码如下。

...
//有参数跳转
Intent intent1 = new Intent();
intent1.setParam("paramKey"，"paramValue");
present(new MyAbilitySlice()，intent1);
...

1.9.6　展示效果

启动模拟器，运行应用程序，进入第一个页面，如图1-11所示；单击按钮后进入第二个页面，如图1-13所示。

图1-13

1.9.7　项目结构

最终项目结构如图1-14所示。

图1-14