前 言
鸿蒙应用程序开发界面和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 ————————
码字不易，如果您觉得这篇博客写的比较好的话，可以赞赏一杯咖啡吧~~
