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

前言

鸿蒙应用程序开发界面和Android同样有两种实现方式，一种是在XML中声明UI布局，另外一种是在Java代码中建立布局。那么下面咱们就来看这两种方式是如何实现界面布局的。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”布局文件。以下图所示。android

打开建立好的“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”表示有所区别）。json

在“main_layout.xml”布局文件中的Button按钮的背景是经过“button_element”来显示的，须要在“base”目录下建立“graphic”文件夹，在“graphic”文件夹中新建一个“button_element.xml”文件。以下图所示。

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

建立的“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相似，都是项目一些须要注册和配置的信息。配置信息以下。
ui

"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”文件，添加一个文本，示例代码以下。this

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)来加载该布局。spa

实现界面之间的跳转

打开第一个界面的“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 ————————

码字不易，若是您以为这篇博客写的比较好的话，能够赞扬一杯咖啡吧~~