HarmonyOS开发详解(四)——鸿蒙Page Ability功能及UI界面开发详解

2024-09-02 22:58

本文主要是介绍HarmonyOS开发详解(四)——鸿蒙Page Ability功能及UI界面开发详解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

        HarmonyOS里面的界面通过Page Ability和Java UI一起来实现;讲述Page Ability就离不开Ability。在HarmonyOS里面把各种具备的能力进行抽象,叫做Ability;Ability是程序重要的组成部分;鸿蒙的各种功能、能力都是通过Ability展现,可以说开发鸿蒙应用就离不开Ability。本文将详细讲解Page Ability相关的应用和案例。

        Ability分为两大类:一类是FA(Feature Ability),FA支持带页面的Page Ability,提供与用户交互界面;另一类是PA(Particle Ability),PA代表一种能力,特点不带界面,又细分为Service Ability(服务能力,比如美颜功能)、Data Ability(提供统一的数据访问抽象,本地数据访问、设备间数据共享)。下图是FA与PA之间的关系:

1、Ability框架

         HarmonyOS提供了三种Ability,分别可以基于Page模板、Service模板、Data模板三种模板来方便的构建这三种能力;Ability之间的跳转、交互通过Intent实现;本文先重点讲解Page Ability和Intent。(这里不讲Service和Data是因为二者相对独立,并不是Page Ability必须的,后续夸设备迁移必须要用到Data,这样更顺)

        1.1 Page Ability  介绍        

        Page ability(一下都简称Page),提供与用户交互能力,它由一个或者多个AbilitySlice构成。AbilitySlice是单个页面内容(比如新闻列表、详情)及其控制逻辑(展示新闻、返回列表等)的总和。

        对比有如下特点:

        1)Page相关度比较高的内容的多个AbilitySlice(比如新闻主体模块一个Page,体育主体模块一个Page)

        2)Page自己并不会初始化具体的内容(自己没有UI布局),只负责控制页面入口(首页,第一个展示的AbilitySlice)、路由(AbilitySlice通过Action发起页面跳转,Page不会去跳转,但是这action需要在Page初始化时去注册/关联)

        3)HarmonyOS支持Page内部跳转,支持Page间跳转,支持直接跳转到目标Page的Ability(比如点外卖支付时,直接从饿了吗的Page页面跳转到支付宝的支付页面(AbilitySlice,支付页面并不是首页))

        1.2 Page Ability生命周期

        生命周期是所有面向对象开发过程中最重要的概念,Page在用户不断操作过程中,会有各种状态变化(初始化、后退、后台、销毁等),这状态变化中可能需要一些操作(比如释放资源,比如传递某些用户数据),而每一个状态变化时,HarmonyOS提供回调函数供开发者嵌入自己的操作。具体看下图Page的声明周期变化:

         注意点:我开始看的时候觉得onStart()和onActive()两个回调有些重复,理论上初始化界面、数据在这两个方法里都可以;仔细研究以后发现,如果是第一次初始化确实二者只有细微差别,而用户返回再激活最好是从onActive开始。

        AbilitySlice的生命周期和回调方法与Page相同,而且一般是由应用app负责创建和管理;但在特定情况下导航到某个AbilitySlice的时候由系统负责,比如饿了吗跳转到支付,再比如华为支持通过“小艺小艺打开支付宝健康码”的语音交互,这种时候肯定是由系统负责实例化的。

        当一个Page下有两个AblilitySlice——FooAbilitySlice和BarAbilitySlice,从Foo页面跳转到Bar页面时的时间执行顺序:

       1)事件执行顺序: Foo出发失去焦点时间-->Bar启动(这里不考虑Bar已经启动返回的情况)-->Bar激活-->Foo后台事件出发;

       2)对应方法执行顺序: FooAbilitySlice.onInactive() --> BarAbilitySlice.onStart() --> BarAbilitySlice.onActive() --> FooAbilitySlice.onBackground()。

          1.3 AbilitySlice页面导航

         Intent是对象之间传递信息的载体,当一个Ability需要启动另一个Ability时,或者AbilitySlice需要跳转到另一个AbilitySlice时,通过Intent指定启动目标和相关参数。

        导航分为两类,一个Page内部导航和不同Page之间导航。

        1.3.1 Page内部导航

        Page内部导航又分为两种情况,一种不需要返回结果,一种需要返回结果,后者继承实现一个onResult方法即可。

//不需要发挥结果的,方法只有两个参数Button button = ...;button.setClickedListener(listener -> present(new TargetSlice(), new Intent()));//需要返回结果的 多一个参数,并需要重写onResult方法
Button button = ...;button.setClickedListener(listener -> presentForResult(new TargetSlice(), new Intent(), positiveInteger));
//重写一个方法
@Override
protected void onResult(int requestCode, Intent resultIntent) {if (requestCode == positiveInteger) {// Process resultIntent here.}
}

        1.3.2 不同Page导航

        不同Page间导航也分两种情况,根据全名称启动和属性启动:

        1)根据全名称启动:通过依据BundleName与AbilityName就可以定位到确定的Ability,就可以启动该Ability;通过构造OperationBuilder来添加名称;

// 通过Intent中的OperationBuilder类构造operation对象,指定设备标识(空串表示当前设备)、应用包名、Ability名称
Intent intent = new Intent();
Operation operation = new Intent.OperationBuilder().withDeviceId("").withBundleName("com.demoapp").withAbilityName("com.demoapp.FooAbility").build();
// 把operation设置到intent中
intent.setOperation(operation);
startAbility(intent);

        2)根据Operation属性启动:开发者需要启动一个应用,而不关心或者不确定用户用哪一个应用时,通过属性来描述,比如浏览器打开一个链接,阅读器打开一个文档等。比如下文查询天气,用户手机上可能有系统自带或者墨迹天气等;

private void queryWeather() {Intent intent = new Intent();Operation operation = new Intent.OperationBuilder().withAction(Intent.ACTION_QUERY_WEATHER).build();intent.setOperation(operation);startAbilityForResult(intent, REQ_CODE_QUERY_WEATHER);
}@Override
protected void onAbilityResult(int requestCode, int resultCode, Intent resultData) {switch (requestCode) {case REQ_CODE_QUERY_WEATHER:// Do something with result....return;default:...}
}

2、Java UI基础

        这里把Java UI基础纳入进来,一是Page和UI相关,二完全是为了让学习过程走的顺利;想要调试、编写简单的程序,对于如果完全没有接触过鸿蒙或者安卓开发的同学,不了解UI可能就走不下去了。

2.1 Java UI组件分类

        1)按类型分:Java UI中所有用户界面的内容都是由Component(组件对象)和ComponentContainer(组件对象容器)组成;

        2)按有意义的使用描述,组件又可以分为两大类组件(Component)和布局(鸿蒙系统自带的布局以XXXLayerout方式命名,它是一种ComponentContainer)。此外每一种布局通过LayoutConfig来配置布局的属性,对子Component进行约束。

        3)按功能分:布局类组件、显示类组件(Text、Image、Clock、TickTimer、ProgressBar)、交互类组件(输入、点击、滚动、选择等);

        4)创建类型:支持在java代码中创建(设置属性和参数)和XML中声明UI的方式创建(按层级结构来描述,通过xml方式配置参数和属性,支持预览);

        两种创建方式没有本质区别;XML创建的组件可以通过Java代码进行修改。

2.2创建 UI

        2.2.1 通过Java代码创建UI

        如下代码实现声明一个一个Layerout,然后声明Button和一个Text,把二者放入Layerout里面,最后进行页面初始化。

        值得注意的是里面多了一个DirectionalLayout.LayoutConfig,从字面意思看出定义Layerout的配置,统过Layerout对其内部组件的约束;这里有点儿像Word里面编辑一个Table,比如设置了文字居中,每个格子里面的文字都会居中。

        同样按常规习惯,以高度为例,如果子对象不设置高度,那么采用LayoutConfig定义的高度,如果Button自己定义了高度,会替代LayerConfig里面的高度。

// 声明布局
DirectionalLayout directionalLayout = new DirectionalLayout(getContext());
// 设置布局大小
directionalLayout.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);
directionalLayout.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT);
// 设置布局属性
directionalLayout.setOrientation(Component.VERTICAL);
directionalLayout.setPadding(32, 32, 32, 32);//创建一个Button
Button button = new Button(getContext());
layoutConfig.setMargins(0, 50, 0, 0);button.setText("My name is Button.");
button.setTextSize(50);
//设置背景、圆角等
ShapeElement background = new ShapeElement();
background.setRgbColor(new RgbColor(0, 125, 255));
background.setCornerRadius(25);
button.setBackground(background);
button.setPadding(10, 10, 10, 10);
button.setClickedListener(new Component.ClickedListener() {@Override// 在组件中增加对点击事件的检测public void onClick(Component component) {// 此处添加按钮被点击需要执行的操作}
});// 为组件添加对应布局的布局属性
DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT);
layoutConfig.alignment = LayoutAlignment.HORIZONTAL_CENTER;
//为组件添加布局的属性,父对象对子对象的约束;
//就像Word里面的table比如统一调整文字居中,里面的每个格子里面都会居中一个道理
button.setLayoutConfig(layoutConfig);//创建一个text
Text text = new Text(getContext());
text.setText("My name is Text.");
text.setTextSize(50);
text.setId(100);
text.setLayoutConfig(layoutConfig);// 将Text添加到布局中
directionalLayout.addComponent(text);
directionalLayout.addComponent(button);// 将布局作为根布局添加到视图树中
super.setUIContent(directionalLayout);

2.2.2 通过XML创建UI

        XML的创建的方式更加直观,可以直接通过Previewer进行预览;可以通过xml直接设置组件的属性,如果设置了一些不支持的属性会被忽略,比如text_color只有Text才支持;

        1)为组件设置有意义唯一ID,会被编译成一个常量在Java代码中使用;

//xml中声明一个id
ohos:id="$+id:text_input"//在java中调用,系统自动根据ID编译一个常量:ResourceTable.Id_text_input
//如果ID重复,返回找到的第一个Component;尽量不要重复,避免混乱
Text text=findComponentById(ResourceTable.Id_text_input);

        2)组件宽、高设置,支持三种方式,一数值:10(像素)、10vp(屏幕像素);二、match_parent(占据父组件全部的剩余内容);三match_content,根据内容多少自适应;

        3)DevEco Studio提供专门的 Layout Resource File模板来创建布局

        创建完成可以在xml中修改、配置属性,也可以通过Java代码来修改属性、绑定属性,以下代码演示点击按钮的时候把按钮颜色由灰色变为蓝色、文字提示“You click me”;

//创建UI的XML代码
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><Buttonohos:id="$+id:button"ohos:margin="50"ohos:padding="50"ohos:width="match_content"ohos:height="match_content"ohos:layout_alignment="horizontal_center"ohos:text="My name is Button."ohos:background_element="$graphic:background_ability__change"ohos:text_size="25fp"/>
</DirectionalLayout>

通过java代码注册click事件,点击时改变按钮颜色、并提示点击了按钮

public class MainAbility2Slice extends AbilitySlice {@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_change_button);Button button=findComponentById(ResourceTable.Id_button);if(button!=null){button.setClickedListener(clickListenner-> {ShapeElement shpe=new ShapeElement();shpe.setRgbColor(new RgbColor(0, 125, 255));button.setBackground(shpe);button.setText("You click me.");});}}
}

 3、重要UI应用举例

3.1 常用组件

        HarmonyOS提供了很多基础组件Text、Button、Image、DatePicker(时间选择器)、进度条、table列表、滚动条、提示框等,上文已经展示了Button使用,而且参考文档非常详细,这里就不一一列举属性,只列举部分要点:

        1、HarmonyOS定了基类通用Component,所有组件都集成了Component的属性,通用组件属性定义了:

        1)基础XML属性;

       2) 间距相关的XML属性;

        3)滚动条相关的XML属性;

        4)旋转缩放相关的XML属性;

        5)焦点相关的XML属性;

        以上内容大部分组件都需要,因此就定义在了Component里面,内容非常丰富,自行参考API

        2、具体组件之间也相互继承

        比如TextField、Button组件是继承自Text来实现,TabList继承自ScrollView;其他有很多组件也是继承关系。

3.2  常用布局

        3.2.1常用布局分类

        核心重要的布局按不同的布局规则分为六大类:

        1)DirectionalLayout(方向布局):按方向排列组件,不会换行,超出部分不显示

        2)DependentLayout(依赖布局):每个组件依赖与同级或者父级组件,比如left_of,表示在某个组件左边;

        3)StackLayout(堆叠布局):按绝对位置在屏幕上叠加显示,先加的组件在下面,最后加的组件在最上边,相互压盖(覆盖)显示;

         4)TableLayout(表格布局):按规则表格显示,默认一列多行,可以通过column_count、row_count指定行列;同时支持类似Word里面的表格合并功能(一个表格占用多个格子的不规则表格布局),目前只支持通过TableLayout.LayoutConfig的Java代码来实现,不支持xml直接实现

        5)PositionLayout(绝对位置):以左上角为(0,0),根据值显示;

ohos:position_x="50vp"
ohos:position_y="8vp"

         6)AdaptiveBoxLayout(自适应盒子布局):为每个子组件构造一个单独盒子,子组件的布局参考以盒子为主;每个盒子宽度除以列数,自动适应;高度按match_conten自动适应最高的组件;水平方向自动分块,因此水平方向不支持match_content,只支持match_parent或者固定值;

        AdaptiveBoxLayout主要是为了满足不同类型的设备自动适应排版、布局。

          有两个核心方法:addAdaptiveRule(int minWidth, int maxWidth, int columns)、removeAdaptiveRule(int minWidth, int maxWidth, int columns)

        3.2.2 常用布局应用

        注意:布局本身有一些属性,不同的布局会导致组件的属性不同,比如DependentLayout是依赖布局,会有一个left_of属性,表示在某个组件的左边,DependentLayout里面的button就会有一个left_of属性;相反DirectionalLayout是方向布局,它是按方向排列组件,它里面的Button就没有left_of属性,即使有也矛盾。

        1、DirectionalLayout(方向布局):按水平或者垂直方向排列内部的Component,是最简单、最常用的一种布局;也可以和其他布局组合提供更丰富的布局方式;核心属性有三个:alignment(对象方式,值如left、top等)、orientation(布局方向,值horizontal、vertical,水平或者垂直)、total_weight(权重)。

        附加子组件属性:layout_alignment、weight

        2、DependentLayout(依赖布局):每个组件相对于同级组件或者父组件的位置;核心属性alignment(对齐方式)

        附加子组件属性:

        1)同级别组件相对位置:left_of、start_of、above、align_left、align_bottom(上下左右都有,太多省略)等,

        2)父组件依赖align_parent_left、align_parent_start、center_in_parent等

        此外支持属性组合:

ohos:text="align_parent_left and align_parent_top"

        部分属性组合结果; 

 //内容太多,就只罗列两个<Textohos:id="$+id:text_center"ohos:height="210vp"ohos:width="210vp"ohos:background_element="#878787"ohos:center_in_parent="true"ohos:text="center"ohos:text_alignment="center"ohos:text_size="20fp"ohos:text_color="#FFFFFF"/><Textohos:id="$+id:text_left_and_above"ohos:height="match_content"ohos:width="100vp"ohos:left_of="$id:text_center"ohos:above="$id:text_center"ohos:background_element="#FF9912"ohos:padding="8vp"ohos:multiple_lines="true"ohos:text="left_of and above"ohos:text_size="18fp"ohos:text_color="#FFFFFF"/>

         注意:如果多种属性组合有时候会产生冲突,如果冲突时优先级举例:align_parent_start、align_parent_end优先级高于align_parent_right属性;更多参考API。

        3.2.3 其他

        1、自定义组件和布局

        鸿蒙支持自定义组件和布局等高级功能,分别通过继承Component和ComponentContainer来实现;这部分相对比较复杂,后边再专门章节讲解。

        2、动画开发

        HarmonyOS支持帧动画(按时间循环播放图片)、数值动画(利用java代码通过循环方式改变图片位置数值来实现动画)、属性动画(通过属性实现位置变化、旋转、循环等)、多种动画集合。

        3、鸿蒙特色功能“可见即可说”

        在智慧产品上支持对界面进行语音交互,然后根据语音进行一些操作,达到“所见都可说”。

        实现方式注册“热词”,支持中英文,这样系统可以捕获关键语音;支持多个热词

//为组件添加OK和确定两个热词
Component component = new Component(getContext());
component.VoiceEvent eventKeys = new Component.VoiceEvent("ok");
eventKeys.addSynonyms("确定");
//完成注册
component.subscribeVoiceEvents(eventKeys);//注册一个回调方法speechEventListener
component.setSpeechEventListener(speechEventListener);
//实现回调类的接口,做出响应
private Component.SpeechEventListener speechEventListener = new Component.SpeechEventListener(){@Overridepublic boolean onSpeechEvent(Component v, SpeechEvent event) {if (event.getActionProperty().equals("ok")) {... // 检测注册的热词,进行相应的处理}return false;};
}

        通过本文能简单了解鸿蒙与用户交互页面的相关内容,这一部分相对来说比较基础、容易上手但又不可获取,UI内容比较杂碎但是又很重要,建议多动手、体会不同组件之间的差别和特点。不必一一实现,可以选择部分重要UI 组件动手、实践,对比各个组件特点!

这篇关于HarmonyOS开发详解(四)——鸿蒙Page Ability功能及UI界面开发详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1131314

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

C++11第三弹:lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页: 南桥几晴秋 🌈C++专栏: 南桥谈C++ 🌈C语言专栏: C语言学习系列 🌈Linux学习专栏: 南桥谈Linux 🌈数据结构学习专栏: 数据结构杂谈 🌈数据库学习专栏: 南桥谈MySQL 🌈Qt学习专栏: 南桥谈Qt 🌈菜鸡代码练习: 练习随想记录 🌈git学习: 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

6.1.数据结构-c/c++堆详解下篇(堆排序,TopK问题)

上篇:6.1.数据结构-c/c++模拟实现堆上篇(向下,上调整算法,建堆,增删数据)-CSDN博客 本章重点 1.使用堆来完成堆排序 2.使用堆解决TopK问题 目录 一.堆排序 1.1 思路 1.2 代码 1.3 简单测试 二.TopK问题 2.1 思路(求最小): 2.2 C语言代码(手写堆) 2.3 C++代码(使用优先级队列 priority_queue)