鸿蒙应用开发入门（三）：开发第一个鸿蒙应用原创

钟洪发老师

发布于 2020-12-21 17:36

浏览

3收藏

3.1 第一个鸿蒙应用实现需求
编写两张页面，实现在第一张页面点击按钮跳转到第二张页面。在Java UI框架中，提供了两种编写布局的方式：在XML中声明UI布局和在代码中创建布局。这两种方式创建出的布局没有本质差别，都是我们需要熟悉方式，所以我们将通过XML的方式布局第一张页面，然后再通过代码的方式布局第二张页面。

3.2 用XML布局第一张页面

1. 打开layout下面的“ability_main.xml”文件
2. 在“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"
        ohos:background_element="#000000">
    <Text
            ohos:id="$+id:text"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="Hello World"
            ohos:text_color="white"
            ohos:text_size="32fp"
            ohos:center_in_parent="true"/>
    <Button
            ohos:id="$+id:button"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="Next"
            ohos:text_size="19fp"
            ohos:text_color="white"
            ohos:top_padding="8vp"
            ohos:bottom_padding="8vp"
            ohos:right_padding="80vp"
            ohos:left_padding="80vp"
            ohos:background_element="$graphic:background_button"
            ohos:below="$id:text"
            ohos:horizontal_center="true"
           />
</DependentLayout>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.

3. 创建按钮的背景
按钮的背景是通过“background_button”来指定的。右键点击“graphic”文件夹，选择“New > File”，命名为“background_button.xml”。

<?xml version="1.0" encoding="utf-8"?>
<shape  xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="oval">
    <solid ohos:color="#007DFF"/>
    <corners ohos:radius="20"/>
</shape>1.
2.
3.
4.
5.

3.3 用编程的方式布局第二张页面
1. 创建Feature Ability
2. 代码编写界面

public class SecondAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        // 声明布局
        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("Nice to meet you.");
        text.setTextSize(55);
        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);
    }
}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.

3.4 实现页面跳转

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.myapplication")
                            .withAbilityName("com.example.myapplication.SecondAbility")
                            .build();
                    secondIntent.setOperation(operation);
                    startAbility(secondIntent); // 通过AbilitySlice的startAbility接口实现启动另一个页面
                }
            });
        }
    }
 
    @Override
    public void onActive() {
        super.onActive();
    }
 
    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}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.