1、案例步骤明确:
- 编写第一个页面(文本 + 按钮)
- 编写第二个页面(文本)
- 给按钮添加一个跳转
在鸿蒙UI中,提供了两种编写布局的方式:
注意:创建新的Ability
点击包,右键新建Ability,创建后开发工具会帮助我们生成一个新Ability需要的所有东西。包括子AbilitySlice、配置文件中相关配置(config.json内)都处理好了
2、布局对象介绍
(1)使用XML方式
使用XML方式的时候,所有的标签都包含在 DirectionalLayout 中,它就是一个布局标签,默认该标签的布局规则是从上到下
(2)Java方式
在Java代码书写方式中,布局对象类也叫作:DirectionalLayout
(3)页面书写
XML方式书写第一个页面:
<?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:alignment="center"
ohos:orientation="vertical">
<Text
ohos:id="$+id:text_helloworld"
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_ability_main"
ohos:layout_alignment="horizontal_center"
ohos:text="第一个页面!!!"
ohos:text_size="40vp"
/>
<!-- match_content表示长宽适应内容调整 -->
<Button
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="red"
ohos:text_size="40fp"
ohos:text="点击我"
/>
</DirectionalLayout>
Java方式书写第二个界面:
public class SecondAbilitySlice extends AbilitySlice {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
//使用XML文件定义方式
//super.setUIContent(ResourceTable.Layout_ability_second);
//使用Java代码的方式定义内容文件
//1、创建一个布局对象(布局对象规定内容的布局方式)
//this代表布局对象放在当前界面中
DirectionalLayout dl = new DirectionalLayout(this);
//2、创建文本对象
Text text = new Text(this);
//设置文本内容
text.setText("第二个页面");
//设置文字大小
text.setTextSize(55);
//设置文字颜色
text.setTextColor(Color.BLUE);
//3、把文字对象添加到界面当中
dl.addComponent(text);
//4、把布局添加到界面当中
super.setUIContent(dl);
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}
3、页面跳转
定义按钮点击事件时,需要实现 Component.ClickedListener 接口,实现它的所有方法,也即 onClick方法,定义需要做的事情。
public void setClickedListener(Component.ClickedListener listener) { throw new RuntimeException("Stub!"); }
如上所示:setClickedListener需要传入一个Component.ClickedListener对象,在Studio中追到该对象定义处发现它是一个接口,所以需要实现该接口,我在本类(MainAbilitySlice)中实现该接口,也即本类就是此接口的一个实现类了,所以在setClickedListener函数传参是就可以传入this代表本类。
package com.example.helloworld.slice;
import com.example.helloworld.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.aafwk.content.Operation;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
public Button button;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
//1、找到按钮 id
button = (Button) findComponentById(ResourceTable.Id_but1);
//2、给按钮添加一个点击事件
//如果没有给按钮添加点击事件,那么用鼠标点击是没有任何反应的
//如果我们给按钮添加了点击事件,那么用鼠标点击按钮之后就可以执行对应的代码
//理解方式:给button按钮添加了点击事件,点击了button按钮后,就可以执行本类的onClick方法
button.setClickedListener(this);
}
//继承了ClickedListener,就需要实现她所有的方法
@Override
public void onClick(Component component) {
if(component == button) {
//只有点击了button这个按钮后,才进行跳转
//跳转到哪个页面中(意图)
Intent i = new Intent();
//包含了要跳转的页面信息
//要跳转到哪个设备,如果传递一个没有内容的字符串,表示跳转本机
Operation operation = new Intent.OperationBuilder()
.withDeviceId("")
.withBundleName("com.example.helloworld") //要跳转到哪个应用上,小括号可以写包名
.withAbilityName("com.example.helloworld.SecondAbility") //要跳转的页面
.build(); // 表示将上面的三个信息进行打包
//把打包之后的operation的设置写到意图中
i.setOperation(operation);
//跳转页面
startAbility(i);
}
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}