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杭州站的直播回放内容哦~