- 实现步骤:
①: 编写第一个页面(文本+按钮) xml 编写
②: 编写第二个页面(文本) java 编写
③: 给按钮增加一个跳转 - 设计思路:
第一步:在第一个界面中把 HelloWorld 改写为第一个界面,并增加一个按钮。
第二步:写第二个界面
第三步:书写跳转关系 - 鸿蒙 UI 中,提供了两种编写布局的形式:
- 在 XML 中申明 UI 布局
- 在代码中创立布局
- 这两种形式创立出的布局没有实质差异,然而 XML 形式较为不便简略,当前开发中,也都是用 XML 布局的形式。
-
然而这两种形式都须要咱们相熟。所以,所以咱们将通过 XML 的形式布局第一张页面,而后再通过代码的形式布局第二张页面。
1. 第一个页面布局(xml 编写)
- 关上
layout
上面的“ability_main.xml
”文件 - 在“
ability_main.xml
”文件中创立一个文本Text
和一个按钮Button
- xml 编写
-
match-context
相当于 安卓中的wrap_content
<?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" /> <Button ohos:id="$+id:but1" ohos:height="match_content" ohos:width="match_content" ohos:background_element="red" ohos:text_size="40fp" ohos:text="点我"> </Button> </DirectionalLayout>
2. 第二个页面布局(java 编写)
- java 代码编写
- 创立:
- 删除 layout 下的
ability_second.xml
- 正文掉报错的这段:
DirectionalLayout
布局,是从上往下的排列
SecondAbilitySlice
public class SecondAbilitySlice extends AbilitySlice {
@Override
public void onStart(Intent intent) {super.onStart(intent);
//super.setUIContent(ResourceTable.Layout_ability_second);
// 1. 创立布局对象
DirectionalLayout d1 = new DirectionalLayout(this);
//2. 创立文本对象
Text t = new Text(this);
// 设置内容
t.setText("第二个页面");
// 设置文字大小
t.setTextSize(55);
// 设置文字色彩
t.setTextColor(Color.BLUE);
//3. 把文本对象增加到布局中
d1.addComponent(t);
//4. 把布局增加到子界面当中
super.setUIContent(d1);
}
3. 页面跳转实现
MainAbilitySlice
public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
Button but;
@Override
public void onStart(Intent intent) {super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
//1. 找到按钮 id
but = (Button) findComponentById(ResourceTable.Id_but1);
//2. 给按钮增加点击事件
// 如果没有增加点击事件,那么用鼠标点击按钮是没有任何反馈
// 如果增加了点击事件,鼠标点击之后就能够执行对应的代码了
//
but.setClickedListener(this);
}
@Override
public void onActive() {super.onActive();
}
@Override
public void onForeground(Intent intent) {super.onForeground(intent);
}
@Override
public void onClick(Component component) {
// 点击按钮只有执行的代码
// 跳转到第二个页面
if (component == but){
// 只有点击个按钮,能力跳转
// 跳转到哪个页面中(用意)Intent i = new Intent();
// 蕴含了页面跳转的信息
Operation operation = new Intent.OperationBuilder()
// 要跳转到哪个设施上,如果传递一个空的内容,示意跳转到本机
.withDeviceId("")
// 要跳转到哪个利用上,小括号外面能够写包名
.withBundleName("com.example.myapplication")
// 要跳转的页面
.withAbilityName("com.example.myapplication.SecondAbility")
// 示意将下面的三个信息进行打包
.build();
// 把打包之后的 operation 设置到用意当中
i.setOperation(operation);
// 跳转页面
startAbility(i);
}
}
}
- 点击后跳转到第二个页面