鸿蒙应用程序开发界面和Android一样有两种实现方式,一种是在XML中声明UI布局,另一种是在Java代码中创建布局。那么下面我们就来看这两种方式是如何实现界面布局的。
在“layout”文件夹目录下可以看到刚刚创建的“main_layout.xml”布局文件。如下图所示。
<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”表示有所区别)。
“graphic”文件目录类似于Android工程中的“drawable”文件目录,都是用来存放一些可绘制的文件或者图片。
创建的“button_element.xml”文件的示例代码如下。
<shape
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="oval">
<solid
ohos:color="#007DFF"/>
shape>
示例代码中的ohos:shape=“oval"是设置为椭圆,ohos:color=”#007DFF"是设置背景颜色。
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)是一样的。
需要注意的是,创建一个新的“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)来加载该布局。
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 ————————
码字不易,如果您觉得这篇博客写的比较好的话,可以赞赏一杯咖啡吧~~