鸿蒙开发-编写应用程序第一个界面

前 言

鸿蒙应用程序开发界面和Android一样有两种实现方式,一种是在XML中声明UI布局,另一种是在Java代码中创建布局。那么下面我们就来看这两种方式是如何实现界面布局的。

XML编写页面

  • 首先打开开发工具DevEco Studio创建一个项目,然后在“Project”目录节点,打开“entry > src > main > resources > base”,右键点击“base”文件夹,选择“New > Directory”,命名为“layout”。如下图所示。

在这里插入图片描述

  • 接着右键点击“layout”文件夹,选择“New > File”,命名为“main_layout.xml”,并点击“OK”创建XML布局界面文件。如下图所示。

在这里插入图片描述

在“layout”文件夹目录下可以看到刚刚创建的“main_layout.xml”布局文件。如下图所示。

在这里插入图片描述

  • 打开创建好的“main_layout.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_parent"
            ohos:height="match_content"
            ohos:center_in_parent="true"
            ohos:text="你好,_彼岸雨敲窗_"
            ohos:text_color="white"
            ohos:left_margin="10vp"
            ohos:right_margin="10vp"
            ohos:text_size="30fp"/>

    <Button
            ohos:id="$+id:button"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text_size="18fp"
            ohos:text="点击跳转至下一页"
            ohos:top_padding="15vp"
            ohos:bottom_padding="15vp"
            ohos:right_padding="15vp"
            ohos:left_padding="15vp"
            ohos:text_color="white"
            ohos:background_element="$graphic:button_element"
            ohos:center_in_parent="true"
            ohos:bottom_margin="20vp"
            ohos:align_parent_bottom="true"/>

</DependentLayout>

布局代码分析:Text是属于文本控件,用来显示一段文字,和Android的TextView控件作用一样。控件中的ohos:id="$+id:text"是设置该控件的id,和Android中的给控件设置id的android:id="@+id/text"类似。ohos:width="match_parent"和ohos:height="match_content"分别给该控件设置宽和高,它们和Android中的给控件设置宽高android:layout_width="match_parent"和android:layout_height="match_parent"类似,ohos:width和ohos:height可以设置为“match_parent”(作用类似于Android中的match_parent)和“ohos:height=“match_content”(作用类似于Android中的wrap_content)两个值。ohos:text的作用是给控件设置文本的内容。Button是属于按钮控件,和Android中的Button作用一样。还有,在鸿蒙中给控件设置大小单位使用“vp”表示(和Android中使用“dp”表示有所区别),设置文本的大小单位使用“fp”表示(和Android中使用“sp”表示有所区别)。

  • 在“main_layout.xml”布局文件中的Button按钮的背景是通过“button_element”来显示的,需要在“base”目录下创建“graphic”文件夹,在“graphic”文件夹中新建一个“button_element.xml”文件。如下图所示。

在这里插入图片描述

“graphic”文件目录类似于Android工程中的“drawable”文件目录,都是用来存放一些可绘制的文件或者图片。

创建的“button_element.xml”文件的示例代码如下。

<?xml version="1.0" encoding="utf-8"?>
<shape
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:shape="oval">
    <solid
            ohos:color="#007DFF"/>
</shape>

示例代码中的ohos:shape=“oval"是设置为椭圆,ohos:color=”#007DFF"是设置背景颜色。

加载XML布局

  • 首先在“Project”目录节点,选择“entry > src > main > java > com.example.testdemo01 > slice” ,打开“MainAbilitySlice.java”文件,并在onStart()生命周期方式中通过super.setUIContent()来加载XML布局。示例代码如下。
import com.example.testdemo01.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);
        // 加载XML布局
        super.setUIContent(ResourceTable.Layout_main_layout);
    }

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

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

代码中的super.setUIContent(ResourceTable.Layout_main_layout)就是用来加载XML布局的,它和Android中加载布局XML文件使用setContentView(R.layout.activity_main)是一样的。

  • 运行程序到TV模拟器上截图如下图所示。

在这里插入图片描述

创建另一个界面

  • 首先在“Project”目录节点,打开“entry > src > main > java”,右键点击“com.example.testdemo01”文件夹,选择“New > Ability > Empty Feature Ability(Java)”,配置Ability时,将“Page Name”设置为“SecondAbility”,点击“Finish”。创建完成后,可以看到新增了“SecondAbility”和“SecondAbilitySlice”文件。如下图所示。

在这里插入图片描述
需要注意的是,创建一个新的“SecondAbility”如果“config.json(~\entry\src\main\config.json)”文件中如果没有自动添加配置信息的话必须要手动添加,config.json和Android中的AndroidManifest.xml类似,都是项目一些需要注册和配置的信息。配置信息如下。

"abilities": [
      {
       ...
      },
      {
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ],
        "orientation": "landscape",
        "formEnabled": false,
        "name": "com.example.testdemo01.SecondAbility",
        "icon": "$media:icon",
        "description": "$string:mainability_description",
        "label": "TestDemo01",
        "type": "page",
        "launchType": "standard"
      }
    ]

代码编写布局界面

在第一个界面是使用XML中声明UI布局,那么接下使用Java代码中创建布局看看。打开 “SecondAbilitySlice.java”文件,添加一个文本,示例代码如下。

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;

public class SecondAbilitySlice extends AbilitySlice {

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        // 声明布局
        DependentLayout myLayout = new DependentLayout(this);
        // 设置布局大小
        myLayout.setWidth(DependentLayout.LayoutConfig.MATCH_PARENT);
        myLayout.setHeight(DependentLayout.LayoutConfig.MATCH_PARENT);
        ShapeElement element = new ShapeElement();
        element.setRgbColor(new RgbColor(0, 0, 0));
        myLayout.setBackground(element);

        // 创建一个文本
        Text text = new Text(this);
        text.setText("你好,你好,_彼岸雨敲窗_。我是第二个界面。");
        text.setWidth(DependentLayout.LayoutConfig.MATCH_PARENT);
        text.setTextSize(30);
        text.setTextColor(Color.WHITE);
        // 设置文本的布局
        DependentLayout.LayoutConfig textConfig = new DependentLayout.LayoutConfig(DependentLayout.LayoutConfig.MATCH_CONTENT,
                DependentLayout.LayoutConfig.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);
    }
}

代码分析:首先声明一个DependentLayout布局,并设置该布局相关的属性,接着创建一个Text文本控件并设置该控件的相关属性。然后把该文本控件添加到该布局中,最后通过super.setUIContent(myLayout)来加载该布局。

实现界面之间的跳转

  • 打开第一个界面的“MainAbilitySlice.java”文件代码,在onStart()方法添加按钮的点击事件,并实现点击按钮跳转到下一个界面的代码逻辑,示例代码如下。
import com.example.testdemo01.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 {

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        // 加载XML布局
        super.setUIContent(ResourceTable.Layout_main_layout);
        Button button = (Button) findComponentById(ResourceTable.Id_button);
        if (button != null) {
            // 为按钮控件设置点击事件
            button.setClickedListener(new Component.ClickedListener() {
                @Override
                public void onClick(Component component) {
                    Intent intent = new Intent();
                    Operation operation = new Intent.OperationBuilder()
                            .withDeviceId("")
                            .withBundleName("com.example.testdemo01")
                            .withAbilityName("com.example.testdemo01.SecondAbility")
                            .build();
                    intent.setOperation(operation);
                    startAbility(intent);
                }
            });
        }
    }

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

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

代码分析:首先通过findComponentById(ResourceTable.Id_button)找到该按钮控件,类似于Android的中通过findViewById(R.id.button)找到控件id类似。接着通过button.setClickedListener()来设置该按钮的点击事件。最后实现界面之间的跳转逻辑,通过new Intent()实例一个“意图”,再实例指定待启动FA的bundleName和abilityName标签,abilityName标签填写下一个界面的注册信息,再通过intent.setOperation(operation)添加到Intent,通过startAbility(intent)来启动这个“意图”动作启动下一个界面。
有Android原生应用的开发者对这段代码应该不是很陌生,button.setClickedListener()设置点击事件和Android中设置点击事件一样,启动下一个界面在Android中也是通过new Intent()一个“意图”动作的方式。鸿蒙的启动加载下一个界面通过startAbility(intent)方式来启动,这和Android中通过startActivity(intent)来启动下一个界面类似。

  • 点击界面一中的“点击跳转至下一页”按钮后跳转到下一个界面截图如下图所示。

在这里插入图片描述

———————— The end ————————

码字不易,如果您觉得这篇博客写的比较好的话,可以赞赏一杯咖啡吧~~
在这里插入图片描述


©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页