HDD杭州站•ArkUI让开发更灵活
原文:https://mp.weixin.qq.com/s/cX48CPs61daKOC2J5znyJw,点击链接查看更多技术内容。
7月15日的HUAWEI Developer Day(简称HDD)杭州站活动中,HarmonyOS技术专家分享了ArkUI的多款新特性,详细解析了这些新特性如何助力开发更灵活,并透露了ArkUI的下一步计划。下面,小编带您了解本次活动中HarmonyOS技术专家分享的精彩内容。
一、整体介绍
ArkUI是用于构建HarmonyOS应用程序的UI开发框架,提供开发者进行应用UI开发时所必须的能力,帮助提升HarmonyOS应用界面开发效率。随着HarmonyOS的版本更新迭代,ArkUI的能力也在不断扩展和增强。在最近的版本中,ArkUI新增/增强了以下能力:
声明式Canvas绘制能力:支持开发者自定义绘制能力,包括Canvas绘制能力和离屏绘制能力。
高级UI组件扩展能力:XComponent组件让开发者轻松面对游戏、地图等独立渲染场景;Web组件提供了HTML5页面加载特性。
UI开发效率提升:在交互归一、多态样式自定义、工具链体验等方面进行了增强和提升,让开发更灵活。
图1 ArkUI框架能力集
二、声明式Canvas绘制能力
在Web浏览器中,Canvas是一个可自定义width、height的矩形画布,开发者可以通过调用API在画布上绘制路径、矩形、圆形、字符以及添加图像等等,实现自定义绘制图形。
ArkUI结合现有的Web Canvas接口和声明式开发范式特点,为开发者提供了声明式Canvas绘制能力,其具有以下优点:
利用现有Web Canvas生态,对标W3C的Canvas接口。
提供17种属性、35种方法,覆盖大部分绘制场景需求。
采用声明式语法,更符合开发者绘制习惯。
框架集成Canvas能力,无需引入Web引擎。
同时,ArkUI还提供离屏绘制能力。当绘制的图形比较复杂时,频繁的删除与重绘会消耗很多性能。这时,开发者可以使用OffscreenCanvasRenderingContext2D对象在Canvas上进行离屏绘制,将需要绘制的内容先绘制在缓存区,然后将其转换成图片,一次性绘制到Canvas上,加快了绘制速度。
下面我们通过一个演示动图,看看如何使用声明式Canvas来进行绘制:
图2 声明式Canvas绘制能力
以上示例中,Canvas组件的onReady回调表示CanvasRenderingContext2D对象已经初始化完毕,可以进行绘制。绘制过程中,首先演示了如何绘制了一个西瓜图形:
首先设置绘制属性,通过设置strokeStyle指定画笔颜色为绿色,通过设置fillStyle指定封闭区域的填充色为红色,并通过设置lineWidth指定线宽。然后调用arc方法绘制了一个半径为80的半圆,并调用fill将半圆的颜色填充为红色。最后调用stroke方法绘制边框。这就完成了一个西瓜图形的绘制。
接下来,还演示了调用drawImage方法添加图片。
由以上示例可知,声明式Canvas提供了丰富的绘制方法,可以让开发者高效绘制出精美的图形。感兴趣的小伙伴们,快去体验声明式Canvas,绘制自己的精彩作品吧~
三、高级UI组件扩展能力
1. 基于XComponent组件的C++/TS开发能力
在游戏、地图等应用场景,原生组件往往不能满足需求,开发者需要进行独立渲染。为此,ArkUI框架提供了基于XComponent组件的C++/TS开发能力,以支持独立渲染场景。XComponent 组件是ArkUI的高级UI组件,可与其他原生的ArkUI组件一起进行布局和渲染。同时,XComponent拥有单独的Surface,通过系统NDK接口为开发者在C++层提供NativeWindow来创建EGL/GLES环境,从而可以使用标准OpenGL ES开发渲染逻辑,并在XComponent的Surface上渲染。
图3 基于XComponent组件的C++/TS开发能力
那么开发者如何使用此开发能力呢?下面我们以图4为例,介绍如何通过三个步骤在ArkUI框架中实现独立渲染。
图4 三步实现独立渲染
步骤1:引入框架提供的native_interface_xcomponent.h头文件(此头文件中提供了Surface创建的生命周期回调和用户事件回调接口),在OnSurfaceCreate生命周期回调中使用EGL创建渲染环境,并使用GLES进行渲染。
步骤2:在具体业务逻辑完成后,通过HarmonyOS提供的编译工具链,编译成对应的应用动态库。本示例中,我们编译得到动态库 libmynativerender.so。
步骤3:通过在eTS文件中声明XComponent,并赋值libraryname属性为动态库名称,将动态库接入ArkUI框架。ArkUI框架在初始化XComponent时,会创建用于绘制的Surface,同时根据动态库名称,调用对应动态库的OnSurfaceCreate生命周期回调。这样,开发者之前写的绘制代码就能渲染出相应的图形。
还想深入学习的小伙伴,可以参考以下更为完整的Demo:
https://gitee.com/openharmony/app_samples/tree/master/ETSUI/XComponent
2. 基于Web组件的HTML5/TS开发能力
针对应用内嵌网页(网页可能是本地页面,也可能是网络页面)、浏览器等场景,ArkUI框架提供了基于Web组件的HTML5/TS开发能力,支持本地和网络的HTML5页面渲染,也支持在HTML5页面与Web组件之间进行数据传递。如图5所示,ArkUI基于Web内核层,结合接口层的声明式Web组件和符合W3C规范的HTML/CSS/JS接口,为开发者提供基于Web组件的HTML5/TS开发能力。
图5 基于Web组件的HTML5/TS开发能力
那么开发者如何使用此开发能力呢?下面以图6为例,介绍如何使用Web组件实现应用内嵌HTML5页面。
图6 内嵌HTML5页面
核心实现代码如下:
@Entry
@Component
struct WebIndex {
private controller: WebController = new WebController(); build() {
Row() {
Column() {
Web({ src: "https://developer.harmonyos.com/cn/develop/arkUI/", controller: this.controller })
}
.width('100%')
}
.height('100%')
}
}
Web组件初始化时,先通过src参数指定Web组件的初始加载路径,再通过controller参数初始化WebController对象。基于runJavaScript 和 registerJavaScriptProxy 方法,WebController对象可以提供HTML5页面和Web组件之间进行数据传递的能力,从而构建出能力更强的 Web 应用。
由于篇幅有限,上述API的使用方法此处不再赘述,开发者可以参考社区开发文档:
(注:以上两项能力目前仅支持在真机上调试。)
四、UI开发效率提升
为有效提升UI开发效率,ArkUI在交互归一、多态样式自定义、工具链体验等方面进行了增强。下面为大家一一讲解。
1. 统一交互能力提升
随着输入设备类型日渐丰富,给用户带来了更多的交互方式,也给开发者带来了各种不同的原始交互事件。开发者为了应对不同的原始交互事件,需要监听多种设备的不同事件,并进行对应的逻辑处理。为此,ArkUI框架提升了统一交互能力,抽象出统一的交互规则,并将不同设备的原始交互事件映射到对应的交互规则,让应用开发化繁为简。基于不同的输入方式(例如鼠标、触摸板、键盘)和交互行为,ArkUI抽象了8种基础手势(即交互规则),包括:点击、辅助点按、双击、拖拽、轻扫、滚动及平移、缩放、旋转。这样,开发者只需考虑手势实现的功能,无需关注输入方式和交互行为,实现交互事件归一。
为了方便大家理解,下面结合两个示例进行说明。
示例一:使用Toggle组件实现开关状态切换
进行开关状态切换时,输入方式不同,对应的交互行为也不一样,如图7所示。
图7 开关状态切换
针对开关状态切换场景,ArkUI抽象出了点击手势,让开发者只需关注开关的状态变化即可。以Toggle组件为例,当某种输入设备触发Toggle状态变化时,Toggle组件提供了onChange回调。在业务处理逻辑中,开发者不用关心输入设备的类型,仅需关注onChange回调即可,通过判断回调中的状态值进行相应的业务处理。
图8 Toggle组件
示例二:使用PinchGesture组件实现图片缩放
在更复杂的场景下,比如图片缩放场景,不同设备上的交互行为也不同,比如:在触屏上通过双指捏合进行缩放,使用鼠标时则通过按下Ctrl键同时滚动鼠标滚轮来进行缩放。针对缩放场景,ArkUI在框架内部进行了输入事件的整合,抽象出了缩放手势(PinchGesture),用户通过双指捏合或者Ctrl+鼠标滚轮操作,均可以触发PinchGesture事件。这样,开发者无需监听手势、键盘按键、鼠标滚轮等输入设备相关的裸事件,仅需监听PinchGesture即可实现多输入设备的缩放能力。
2. 多态样式自定义能力增强
ArkUI以W3C样式设置能力为参考,提供了对开发者友好的多态样式自定义能力。“多态”是指组件的多种状态。通过组件的不同状态、不同的视觉呈现,向用户展示不同的交互阶段。同时,多态样式自定义能力,支持样式的统一设置和复用,提升了UI开发效率。
为了方便大家理解,我们来看一个多态样式自定义的示例,如图9所示。
图9 多态样式自定义
此示例使用@Styles装饰器定义了normal、pressed、disabled三种状态,并设置了对应的背景色(分别为棕色、红色和灰色)。同时,在Text组件上使用stateStyles方法设置了对应的状态。为了让状态切换的过渡更自然,还增加了时长为1s的动画效果。
从示例的演示效果中,我们可以看到:当点击“Hi ArkUI”的Text组件时,背景色从棕色平滑过渡到红色,实现了状态从normal到pressed的切换。同样地,当点击“Toggle Status”的Text组件时,背景色从棕色平滑过渡到了灰色,实现了状态从normal到disabled的切换。
3. 开发工具优化
基于ArkUI框架,我们对开发工具DevEco Studio的预览功能进行了优化。首先通过ArkUI获取当前显示页面中所有的组件信息,包括组件的父子结构、大小、位置、样式、属性以及状态信息等。然后,以可视化的形式在预览器界面中展示组件树和组件属性。这样,通过结合DevEco Studio和ArkUI的能力,给开发者带来了以下新的预览体验:
● 亚秒级别实时预览
通过检测最小更新代码,进行局部渲染更新,达到亚秒级的实时预览能力。
● UI界面与代码段可双向跳转
对于复杂的页面,寻找布局和代码的对应关系比较费时。通过双向跳转能力,可以从预览界面跳转到对应的代码段;也可以点击对应的代码段,在预览界面高亮对应的控件。
● 实时查看、编辑组件属性
选中需要编辑的组件,右下角Attributes面板中会显示对应组件的属性,可以通过下拉框进行可视化编辑。当开发者对属性进行改变后,会自动生成应用代码,同时更新预览效果。
图10 新的预览体验
五、ArkUI的下一步
1. 动态布局能力提升
在不同分辨率或折叠屏场景下,开发者往往需要对界面布局进行特殊适配。为此,后续我们将基于ArkUI提供多分辨率场景布局能力和UI组件自适应能力,减少开发者的工作量的同时,也提供更加生动、自然的自适应效果。
(1) 多分辨率场景布局能力
在布局框架方案中,布局框架在不同分辨率场景下有不同的布局方式。这样,开发者可以把主要精力放在具体内容的组织上,无需过度关注分辨率的变化。
以图11为例,多态布局控件在不同分辨率场景下,有不同的布局方式。在较窄的屏幕场景下,为了增加显示内容,不会加载子页签。而在较宽的屏幕场景下,为了显示更丰富的信息,会自动加载子页签,给用户更好的体验。开发者仅需关注子页签的内容,由布局控件自适应加载。
图11 多分辨率场景布局
(2) UI组件自适应能力
在UI组件自适应方案中,组件对于自身尺寸的变化有一定的自适应能力。
比如图12所示的多列场景适配,在容器组件中,开发者事先配置好item的布局约束。当容器尺寸变宽时,会触发item变宽,当item宽度达到最大宽度时,便会自适应地从一列变化到两列。变化过程,无需开发者介入,提高了开发效率。
图12 多列场景适配
2. FA卡片能力增强
对于可玩性较高的卡片场景,我们也将FA卡片能力增强也摆上了日程。在下一步的开发中,计划为FA卡片提供基础的动效能力(比如旋转、平移、缩放、透明度等)和更多的组件支持。
图13 FA卡片动效
ArkUI的每一步都离不开广大开发者的参与。以上介绍的ArkUI新特性中,有一部分就是来源于开发者在社区提出的建议。欢迎开发者和我们一起构筑ArkUI开发框架,夯实泛智能终端的数字底座,支撑千行百业的产业生态!
感兴趣的小伙伴,可以登录华为开发者学堂查看HDD杭州站的直播回放内容哦~
HDD杭州站•ArkUI让开发更灵活的更多相关文章
- 倒计时 | 7.24 阿里云 Serverless Developer Meetup 杭州站报名火热进行中!
本周六阿里云 Serverless Developer Meetup 即将亮相杭州 时间:7.24 本周六 13:30 - 17:30 地点:杭州市良睦路 999 号乐佳国际 1-3-7 特洛伊星 ...
- HDD深圳站:全生命周期赋能开发者,华为引领应用生态升级
12月14日,由华为开发者联盟主办的HDD(HUAWEI Developer Day)于深圳举行.此次HDD主论坛,围绕打造应用全生命周期服务,介绍了华为在创新孵化.开发测试.应用分发和运营增长阶段的 ...
- 移动应用开发迎来哪些新技术?5月24日相约HDD·线上沙龙·创新开发专场
HUAWEI Developer Day(简称HDD),是华为开发者联盟与广大开发者深度交流的平台.围绕移动终端的最新技术和产品形态,持续向广大开发者传递华为终端的最新产品和开放服务能力,结合最新的行 ...
- Bootstrap 简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、简单。
http://v3.bootcss.com/ 从2.x升级到3.0版本 Bootstrap 3并不向后兼容Bootstrap v2.x.下面章节列出的内容可以作为从v2.x升级到v3.0的通用指南.如 ...
- 让开发更简单 —— Coding Enterprise 发布
今天,我们很高兴地宣布 Coding Enterprise 发布了 —— Coding Enterprise 是 CODING 专为企业打造的软件开发协作平台,提供了针对中小型企业的公有云版本和针对大 ...
- xmake从入门到精通12:通过自定义脚本实现更灵活地配置
xmake是一个基于Lua的轻量级现代化c/c++的项目构建工具,主要特点是:语法简单易上手,提供更加可读的项目维护,实现跨平台行为一致的构建体验. 本文主要详细讲解下,如何通过添加自定义的脚本,在脚 ...
- 如何用Serverless让SaaS获得更灵活的租户隔离和更优的资源开销
关于SaaS和Serverless,相信关注我的很多读者都已经不陌生,所以这篇不会聊它们的技术细节,而将重点放在SaaS软件架构中引入Serverless之后,能给我们的SaaS软件带来多大的收益. ...
- 声网Agora 教育 aPaaS 灵动课堂升级:UI与业务逻辑分离,界面、功能自定义更灵活
声网Agora 教育 aPaaS 产品灵动课堂现已升级至 v1.1.0 版本.声网Agora 灵动课堂可以帮助教育机构和开发者最快 15 分钟上线自有品牌.全功能的在线互动教学平台,节省 90% 开发 ...
- Bootstrap 简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。
Bootstrap 简洁.直观.强悍的前端开发框架,让web开发更迅速.简单.
- chrome快捷键,让开发更快捷:
9:18 2015/12/9chrome快捷键,让开发更快捷:部分:按住 Ctrl 键,然后点击链接 从后台在新标签页中打开链接,但您仍停留在当 前标签页中 按住 Ctrl+Shift 键,然后点击链 ...
随机推荐
- Java 封装+构造器+this 小测试
1 package com.bytezero.account; 2 3 4 public class Account 5 { 6 private int id; //账号 7 private doub ...
- C# DiagnosticSource and DiagnosticListener
class Program { private static readonly DiagnosticSource testDiagnosticListener = new DiagnosticList ...
- linux下,使用nginx实现动静分离,访问图片报404
一.需求描述 最近在开发一个微信小程序,由于微信小程序端代码包总大小限定在三四兆,所以有很多的图标资源就不能放在微信小程序中进行打包, 否则会超过微信的限制而无法打包.自己能够想到的最简单的办法就是将 ...
- Python isinstance() 函数含义及用法解析
描述 isinstance() 函数来判断一个对象是否是一个已知的类型,类似 type(). isinstance() 与 type() 区别: type() 不会认为子类是一种父类类型,不考虑继承关 ...
- ETL工具-KETTLE教程实例实战3----转换(输入、输出)
ETL工具-KETTLE教程实例实战3----转换(输入.输出) 欢迎关注笔者的公众号: java大师, 每日推送java.kettle运维等领域干货文章,关注即免费无套路附送 100G 海量学习.面 ...
- 关于初始化page入参的设计思路
最近在重构老的代码,在写的过程中发现之前的逻辑如果遇到没有入参pageNo会Npe,于是乎我想找找公司项目有啥方式处理page入参的有两种如下 使用三元表达式直接判断是否null,然后赋值 使用map ...
- JNI中AttachCurrentThread和DetachCurrentThread的问题
在<Java与CC++交互JNI编程>中有讲过AttachCurrentThread和DetachCurrentThread的使用. 我们知道在jni中我们可以使用pthread或者std ...
- python高级技术(进程二)
一 进程对象及其他方法 '''一台计算机上面运行着很多进程,那么计算机是如何区分并管理这些进程服务端的呢?计算机会给每一个运行的进程分配一个PID号如何查看 windows电脑 进入cmd输入task ...
- OkHttp请求耗时统计
目录介绍 01.先提问一个问题 02.EventListener回调原理 03.请求开始结束监听 04.dns解析开始结束监听 05.连接开始结束监听 06.TLS连接开始结束监听 07.连接绑定和释 ...
- 【Leetcode】53. 最大子数组和
题目(链接) 给你一个整数数组nums,请你找出一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 子数组是数组中的一个连续部分. 示例 1: 输入:nums = [-2,1,-3, ...