入门应用HelloWorld
当新建完毕一个鸿蒙项目之后，自带有HelloWorld的代码
- 页面中的包含关系
如下图所示，MainAbility（界面）包含一个或多个MainAbilitySlice（子界面）
MainAbilitySlice（子界面）包含要显示的内容
MainAbility是项目启动的第一个界面，在界面里面不是直接显示内容的。在界面里面展示的是子界面，我们也称之为切片slice。在子界面里面才是显示内容的，这也正是为什么我们的逻辑代码都要写在slice文件中
- 配置文件config.json
所有的模块，界面等信息，都会在这个文件中进行配置。鸿蒙启动之后，先解析这个文件，这个文件分为三类app deviceConfig module
{
"app": {//整个项目的配置，包含了厂商信息，版本号等
"bundleName": "com.example.myapplicationnewtest",//包名
"vendor": "example",//是应用开发厂商的描述，也就是开发公司的名字
"version": {
"code": 1000000,//用户看到的版本号
"name": "1.0.0"//用户看不到的，只能公司内部人员使用的版本号
}
},
"deviceConfig": {},//表示应用在设备删搞得配置信息，比如是否允许使用网络流量，是否支持设备未解锁状态直接启动等
"module": {//表示整个代码的配置信息，比如程序在运行时候的所有界面，以及第一个要启动的界面是谁
"package": "com.example.myapplicationnewtest",//包名
"name": ".MyApplication",//hap包的名字
"mainAbility": "com.example.myapplicationnewtest.MainAbility",//表示HAP包的入口名称
"deviceType": [//表示项目可以在哪些设备上运行，因为可能有多个设备，所以有个方括号，表示这些值可以写到一个数组里
"phone"
],
"distro": {//表示HAP包的描述信息
"deliveryWithInstall": true,//当前HAP包是否可以支持随应用安装，一般为true
"moduleName": "entry",//当前HAP的名称
"moduleType": "entry",//当前HAP的类型，有entry和feature
"installationFree": false
},
"abilities": [//表示当前模块内的所有Ability
{
"skills": [//表示Ability能接受到的Intent的特征
{
"entities": [//表示能够接收的Intent的Ability的类别（视频，桌面应用）
"entity.system.home"
],
"actions": [//表示能够接收的Intent的action值
"action.system.home"
]
}
],
"orientation": "unspecified",
"visible": true,
"name": "com.example.myapplicationnewtest.MainAbility",
"icon": "$media:icon",//表示Ability图标资源文件的索引，表示引用media目录下的icon资源
"description": "$string:mainability_description",
"label": "$string:entry_MainAbility",//应用安装后用户设备显示的名称
"type": "page",//可以为page service或data
"launchType": "standard"//表示启动模式，支持standard和singleton
}
]
}
}
- 程序的启动过程
当程序刚开始启动的时候，会解析config.json中的信息，获取到第一个要加载的界面，也就是mainAbility，通过包名 + 类名定位到要运行的类MainAbility，所以界面启动，在这个界面里面又加载了MainAbilitySlice切片，在该切片中展示的内容为Layout包中的ability_main。
页面跳转功能
把HelloWorld界面改为第一个界面，并且添加一个按钮
写第二个界面SecondAbility
书写跳转关系
界面布局。这两种方式创建出的布局没有本质差别，但是XML方式较为方便简单，以后开发中，尽量用XML布局的方式
- 在XML中声明UL布局
<?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>
其中宽和高的取值分别可以是固定的数值，match_content以及match_parent
具体数值10表示以像素为单位，10vp表示以屏幕相对像素为单位。
content表示组件大小与它的内容占据大大小范围相适应
parent表示组件大小将扩展为父组件允许的最大值，它将占据父组件方向上的剩余大小
- 在代码中创建布局
需要在SecondAbilitySlice中分别创建组件和布局，并将他们进行组织关联。并且我们还需要设置页面布局大小和背景色，以及设置文本的布局，下面代码只是简单的一个介绍。
public class SecondAbilitySlice extends AbilitySlice {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
//super.setUIContent(ResourceTable.Layout_ability_second);
//1.创建布局对象
DirectionalLayout dl = new DirectionalLayout(this);
//2.创建文本对象
Text t = new Text(this);
//设置内容
t.setText("第二个页面");
//设置文字大小
t.setTextSize(55);
//设置文字颜色
t.setTextColor(Color.BLUE);
//3.把文本对象添加到布局当中
dl.addComponent(t);
//4.把布局添加到子界面当中
super.setUIContent(dl);
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}
- 代码实现页面跳转
public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
Button btu ;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
//1.找到按钮 id
btu = (Button) findComponentById(ResourceTable.Id_but1);
//2.给按钮添加一个点击事件
//如果没有添加点击事件，那么用鼠标点击按钮之后是没有任何反应的。
//如果我们给按钮添加了点击事件，那么用鼠标点击按钮之后，就可以执行对应的代码
//理解方式：
//给btu这个按钮添加了点击事件
//当我们用鼠标点击了btu这个按钮之后，就可以执行本类中onClick方法
btu.setClickedListener(this);
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
@Override
public void onClick(Component component) {
//点击按钮只要要执行的代码
//跳转到第二个页面中
if(component == btu){
//只有点击了btu这个按钮之后，才进行跳转
//跳转到哪个页面中（意图）
Intent i = new Intent();
//包含了要跳转的页面信息
Operation operation = new Intent.OperationBuilder()
.withDeviceId("")//要跳转到哪个设备上，如果传递一个没有内容的字符串，表示跳转本机
.withBundleName("com.example.myapplication")//我要跳转到哪个应用上，小括号里面可以写报名
.withAbilityName("com.example.myapplication.SecondAbility")//要跳转的页面
.build();//表示将上面的三个信息进行打包
//把打包之后的operation设置到意图当中
i.setOperation(operation);
//跳转页面
startAbility(i);
}
}
}
最后运行结果如下两张图所示
编程方式创建简单页面布局
这几天一直遇到个问题，我们都知道项目启动的首页面是MainAbility并且会自动加载MainAbilitySlice。那么问题来了，假设我又创建了一个ExampleAbility（创建Ability的时候，DEV会自动帮我们生成对应的slice文件和graphic里面的xml文件和layout里面的xml文件）那么我如何把ExampleAbility设置成我的首页面呢？
无外乎，在请教高人之后，他们给出了两种方法。
第一种比较傻的方法是我们都知道MainAbility和ExampleAbility内容几乎完全一样，所以我们可以在MainAbility中设置setMainRoute的路由为ExampleAbilitySlice即可。如下图所示。
package com.example.myexampleapplication;
import com.example.myexampleapplication.slice.ExampleAbilitySlice;
import com.example.myexampleapplication.slice.MainAbilitySlice;//以前用的，这个包用不上了
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
public class MainAbility extends Ability {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setMainRoute(ExampleAbilitySlice.class.getName());
}
}
第二种方法我觉得很实用，我们需要修改config.json文件中的内容。主要是修改abilities中的文件
"abilities": [
{
"orientation": "unspecified",
"visible": true,
"name": "com.example.myexampleapplication.MainAbility",
"icon": "$media:icon",
"description": "$string:mainability_description",
"label": "$string:entry_MainAbility",
"type": "page",
"launchType": "standard"
},
{
"skills": [
{
"entities": [
"entity.system.home"
],
"actions": [
"action.system.home"
]
}
],
"orientation": "unspecified",
"name": "com.example.myexampleapplication.ExampleAbility",
"icon": "$media:icon",
"description": "$string:exampleability_description",
"label": "$string:entry_ExampleAbility",
"type": "page",
"launchType": "standard"
}
]
我们需要哪个Ability作为首界面，我们就把skills的内容复制给它，如上图我想要ExampleAbility作为首界面，因此我就把skills的内容复制到对应的数组对象里。最后用编程方式创建的Ability如下图所示
其余页面并未做任何更改，因此我们只需要修改ExampleAbilitySlice页面
package com.example.myexampleapplication.slice;
import com.example.myexampleapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.Button;
import ohos.agp.components.Text;
import ohos.agp.components.Component;
import ohos.agp.components.ComponentContainer;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.Color;
import ohos.agp.utils.LayoutAlignment;
public class ExampleAbilitySlice extends AbilitySlice {
//三个重写的方法均继承于AbilitySlice类，其又继承AbilityContext类,后者又继承Context接口
//继承关系DirectionLayout继承ComponentContainer类，后者又继承Component类，Component类又继承JAVA的Object类
@Override
public void onStart(Intent intent) {
//onStart和setUIContent都来自于AbilitySlice类
super.onStart(intent);
//super.setUIContent(ResourceTable.Layout_ability_example);
//声明布局
DirectionalLayout directionalLayout= new DirectionalLayout(getContext());
//设置布局大小
//setWidth和setHeight方法继承Component类 里面的参数继承ComponentContainer这个类。
directionalLayout.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);
directionalLayout.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT);
//设置布局属性
//setOrientation来自本类，设置布局的方向 setPadding来自于Component设置布局间距。
directionalLayout.setOrientation(Component.VERTICAL);
directionalLayout.setPadding(32,32,32,32);
//getContext来自于AbilityContext，为什么这个地方可以写getContext呢？首先我们查阅继承关系可知道，这个地方的构造函数传参应该为Context类型的参数
//Text和DirectionLayout同理。而getContext是来自于AbilityContext这个类，然后这个类又继承Context接口，因此这个地方可以填getContext
Text text=new Text(getContext());
//setText和setTextSize都是来自Text类中的方法，很好理解
text.setText("编码创建视图布局");
text.setTextSize(80);
//setId是来自于Component这个类的方法，需要额外注意。
text.setId(100);
//为组件添加对应布局的布局属性,设置文本的布局，调用DirectionLayout中的构造方法，这个构造方法可以传递两个参数，参数与上面一样。
DirectionalLayout.LayoutConfig layoutConfig=new DirectionalLayout.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT);
//alignment来自DirectionLayout.LayoutConfig属性，LayoutAlignment是引入的类
layoutConfig.alignment= LayoutAlignment.HORIZONTAL_CENTER;
//setLayoutConfig来自于Component
text.setLayoutConfig(layoutConfig);
//将Text添加到布局中,addComponent来自于ComponentContainer
directionalLayout.addComponent(text);
//类似的还添加一个Button
Button button=new Button(getContext());
//setMargins来自于ComponentContainer，同上
layoutConfig.setMargins(0,50,0,0);
button.setLayoutConfig(layoutConfig);
button.setText("更新信息");
button.setTextSize(50);
//设置页面背景色，shapeElement来自于引入类，构造方法可以不传参！
ShapeElement background=new ShapeElement();
//下面两个方法都来自于ShapeElement这个类,setRgbColor构造函数需要RgbColor类型的参数，于是只能new一个，来自于ohos.agp.colors.RgbColor;
background.setRgbColor(new RgbColor(0,125,255));
background.setCornerRadius(25);
//前面两个来自于Component类
button.setBackground(background);
button.setPadding(10,10,10,10);
//来自于Text类，为什么Button可以使用Text这个类中的方法呢？Button继承了Text类这个方法！注意看源代码！
button.setTextColor(Color.WHITE);
button.setClickedListener(new Component.ClickedListener() {//点击事件方法来自于Component
@Override
public void onClick(Component component) {
System.out.println(this);
}
});
//addComponent来自于ComponentContainer类
directionalLayout.addComponent(button);
//将布局作为根布局添加到视图树中
super.setUIContent(directionalLayout);
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}
523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
