鸿蒙OS应用开发之——页面间跳转

发表于 分类于 ， ， 阅读时长 ≈ 5 分钟

一 概述

本文将创建两个页面，实现页面间跳转

  • 第一个页面MainAbility，第二个页面SecondAbility
  • 每个页面都有一个Text(显示页面内容)和Button(跳转按钮)
  • 在MainAbility点击Next按钮，跳转到SecondAbility
  • SecondAbility点击Return按钮，返回MainAbility

二 项目结构

三 编写第一个页面

3.1 页面组成

  • entry > src > main > resources > base > layout——>ability_main.xml
  • entry > src > main > java > com.example.harmonyosdemo> slice>MainAbilitySlice.java
  • entry > src > main > java > com.example.harmonyosdemo>MainAbility.java

3.2 页面内容

ability_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?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="#ffffff">

    <Text
        ohos:id="$+id:text"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:center_in_parent="true"
        ohos:text="Page One"
        ohos:text_color="#000000"
        ohos:text_size="32fp"/>

    <Button
        ohos:id="$+id:button"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:align_parent_bottom="true"
        ohos:background_element="$graphic:background_button"
        ohos:bottom_margin="40vp"
        ohos:bottom_padding="8vp"
        ohos:center_in_parent="true"
        ohos:left_padding="70vp"
        ohos:right_padding="70vp"
        ohos:text="Next"
        ohos:text_color="#ffffff"
        ohos:text_size="19fp"
        ohos:top_padding="8vp"
        />
</DependentLayout>

background_button

1
2
3
4
5
6
7
8
9
<?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>

MainAbilitySlice.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        Button button= (Button) findComponentById(ResourceTable.Id_button);
        if (button!=null){
            //为按钮设置点击回调
            button.setClickedListener(new Component.ClickedListener() {
                @Override
                public void onClick(Component component) {
                    Intent secondIntent=new Intent();
                    // 指定待启动FA的bundleName和abilityName
                    Operation operation = new Intent.OperationBuilder()
                            .withDeviceId("")
                            .withBundleName("com.example.harmonyosdemo")
                            .withAbilityName("com.example.harmonyosdemo.SecondAbility")
                            .build();
                    secondIntent.setOperation(operation);
                    // 通过AbilitySlice的startAbility接口实现启动另一个页面
                    startAbility(secondIntent);
                }
            });
        }
    }
    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

MainAbility

1
2
3
4
5
6
7
public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(MainAbilitySlice.class.getName());
    }
}

四 编写第2个页面

4.1 页面组成

  • entry > src > main > resources > base > layout——>ability_second.xml
  • entry > src > main > java > com.example.harmonyosdemo> slice>SecondAbilitySlice.java
  • entry > src > main > java > com.example.harmonyosdemo>SecondAbility.java

4.2 页面内容

ability_second.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?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="#ffffff">

    <Text
        ohos:id="$+id:text"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:center_in_parent="true"
        ohos:text="Second Page "
        ohos:text_color="#000000"
        ohos:text_size="32fp"/>

    <Button
        ohos:id="$+id:buttonReturn"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:align_parent_bottom="true"
        ohos:background_element="$graphic:background_button"
        ohos:bottom_margin="40vp"
        ohos:bottom_padding="8vp"
        ohos:center_in_parent="true"
        ohos:left_padding="70vp"
        ohos:right_padding="70vp"
        ohos:text="Return"
        ohos:text_color="#ffffff"
        ohos:text_size="19fp"
        ohos:top_padding="8vp"
        />

</DependentLayout>

SecondAbilitySlice

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
public class SecondAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        // 声明布局
        super.setUIContent(ResourceTable.Layout_ability_second);
        ((Button)findComponentById(ResourceTable.Id_buttonReturn)).setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                onBackPressed();
            }
        });

//        DependentLayout myLayout = new DependentLayout(this);
//        // 设置布局大小
//        myLayout.setWidth(MATCH_PARENT);
//        myLayout.setHeight(MATCH_PARENT);
//        // 设置布局背景为白色
//        ShapeElement element = new ShapeElement();
//        element.setRgbColor(new RgbColor(255, 255, 255));
//        myLayout.setBackground(element);
//
//        // 创建一个文本
//        Text text = new Text(this);
//        text.setText("Hi there");
//        text.setWidth(MATCH_PARENT);
//        text.setTextSize(100);
//        text.setTextColor(Color.BLACK);
//        // 设置文本的布局
//        DependentLayout.LayoutConfig textConfig = new DependentLayout.LayoutConfig(MATCH_CONTENT,MATCH_CONTENT);
//        textConfig.addRule(DependentLayout.LayoutConfig.CENTER_IN_PARENT);
//        text.setLayoutConfig(textConfig);
//        myLayout.addComponent(text);
//        super.setUIContent(myLayout);
    }

    @Override
    public void onActive() {
        super.onActive();
    }
    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

SecondAbility

1
2
3
4
5
6
7
public class SecondAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(SecondAbilitySlice.class.getName());
    }
}

五 效果图