一文读懂HarmonyOS服务卡片怎么换肤
作者:zhenyu,华为软件开发工程师
关注HarmonyOS的小伙伴肯定对服务卡片已经很熟悉了。服务卡片(也简称为“卡片”)是FA(FeatureAbility,元服务)的一种界面展示形式,将FA的重要信息或操作前置到卡片,以达到服务直达,减少体验层级的目的。
类似手机上应用的换肤,服务卡片也支持换肤。本期,我们就来聊一聊卡片换肤。
一、“卡片换肤”换的是什么?
服务卡片的UI界面由一系列的资源组成,这些资源包括颜色、文本、图标和圆角等等。不同资源有对应的资源ID,通过替换资源ID对应的资源就可以实现换肤。
为了让大家更了解卡片换肤,下面来看两个示例:
1.更改卡片的圆角大小。
图1 卡片的圆角大小
2.更改卡片的背景颜色和文字颜色。
图2 卡片的文本和背景颜色
通过上面两个示例,我们看到:通过修改卡片的圆角资源参数、背景颜色、文本颜色等就对卡片进行了简单的换肤。实际场景中,我们还可以对图标、多彩色板、切图资源等各类卡片资源进行修改和替换,实现更复杂的换肤。
二、如何实现卡片换肤?
卡片换肤需要应用开发者、主题开发者和系统三者的配合。卡片换肤的整体流程如图3所示。
图3 卡片换肤流程
卡片换肤流程说明如下:
- 步骤一:应用开发者在开发卡片时,可以自定义卡片的各项资源及其资源ID。
- 步骤二:主题开发者在开发主题包时会使用新的资源来替换资源ID对应的资源信息。
- 步骤三:用户下载和安装主题包后,在切换主题时,由系统自动完成卡片相应的资源替换,从而达到卡片换肤的目的。
下面我们以JS卡片为例分别从应用开发者、主题开发者、系统三者的角度来介绍卡片换肤的实现方案。
1. 应用开发者:开发卡片
JS卡片工程中,应用开发者可以使用的资源,包括三类:JS模块资源、应用资源和系统资源。下面一一介绍如何引用这三类资源。
(1)JS模块资源
JS模块资源指的是src/main/js/Component下resources目录中的资源,如图4所示。
图4 JS模块资源
此类资源的主要特点是只能在该JS模块范围内引用。引用方法一般为在应用开发的hml和js文件中使用$r的语法,对JS模块内resources目录下的json资源进行格式化,获取相应的资源内容。
下面我们通过一个示例来说明JS模块资源的引用方法。
例如,resources/res-defaults.json中定义了以下资源:
{
"image": {
"clockFace": "common/face.png"
},
"colors": {
"background": "#ffffff"
}
}
在hml文件中可以通过{{ $r('colors.background') }}和{{ $r('image.clockFace') }}分别引用上面定义的background和clockFace资源。代码如下:
<!-- xxx.hml -->
<div style="background-color: {{ $r('colors.background') }}">
<image src="{{ $r('image.clockFace') }}"></image>
</div>
(2)应用资源
应用资源指的是与java、js目录同级的resources目录中的资源,如图5所示。
图5 应用资源
应用资源的特点是所有JS模块共享,可认为是应用内共享。从API Version 6开始,可以在hml/css/json文件中引用应用资源,包括颜色、圆角和图片类型的资源。
- 在css文件中,通过“@app.type.resource_id”的形式引用应用资源。
- 在hml文件中,通过“{{$r('app.type.resource_id')}}”的形式引用应用资源。
- 在json文件中,通过“this.$r('app.type.resource_id')”的形式引用应用资源。
其中,“app”是固定字符串,代表应用资源。“type”表示引用的资源类型,可以取值为“color”(颜色)、“float”(圆角)和“media”(图片)。“resource_id”表示应用资源ID,取值为color.json或float.json中的“name”字段值,或者media目录中图片文件的名称(不包含图片类型后缀)。
下面我们通过一个示例来说明应用资源的引用方法。
例如,color.json中定义了背景色和前景色两个资源:
{
"color": [
{
"name": "my_background_color",
"value": "#ffff0000"
},
{
"name": "my_foreground_color",
"value": "#ff0000ff"
}
]
}
其中,背景色资源ID为my_background_color,前景色资源ID为my_foreground_color。
在css文件中可以通过@app.color.my_background_color引用背景色资源,代码如下:
.divA {
background-color: "@app.color.my_background_color";
border-radius: "@app.float.my_radius";
}
在hml文件中可以通过{{$r('app.color.my_background_color')}}引用背景色资源,代码如下:
{
"data":{
"myColor": "this.$r('app.color.my_background_color')",
"myRadius": "this.$r('app.float.my_radius')",
"myImage":"this.$r('app.media.my_background_image')"
}
}
(3)系统资源
系统资源指的是系统预置资源。服务卡片有一系列统一的资源ID标识,这些标识在系统中对应了默认的资源信息。这些资源不在应用工程中,但应用可以通过特定的语法来访问。(系统资源的详细信息可参考文末链接)
系统资源的特点是所有应用均可访问,但具体的资源内容或资源值是根据应用的上下文获取到的。从API Version 6开始,在hml/css/json文件中可以引用系统资源,包括颜色、圆角和图片类型的资源。系统资源的引用方法与应用资源比较类似,只是资源前缀由“app”换成“sys”了,“sys”代表系统资源。
在css文件中,通过“@sys.type.resource_id”的形式引用系统资源。
.divA {
background-color: "@sys.color.fa_background";
border-radius: "@sys.float.fa_corner_radius_card";
}
在hml文件中,通过“{{$r('sys.type.resource_id')}}”的形式引用系统资源。
<div style=""></div>
<div style="border-radius:{{$r('sys.float.fa_corner_radius_card')}};"></div>
<div style="background-image:{{$r('sys.media.fa_card_background')}};"></div>
在json文件中,通过“this.$r('sys.type.resource_id')”的形式引用系统资源。
{
"data":{
"sysColor": "this.$r('sys.color.fa_background')",
"sysRadius": "this.$r('sys.float.fa_corner_radius_card')",
"sysImage":"this.$r('sys.media.fa_card_background')"
}
}
比较推荐卡片优先引用系统资源ID来适配UI界面。这样,主题开发者做换肤适配时,可以极大减少对单个应用的资源ID适配的工作量,同时避免应用升级引用资源ID发生变化时引起的兼容性问题。
2. 主题开发者:开发主题包
“主题”由企业或个人开发者设计开发,主要是对系统皮肤界面进行个性化设计,这其中也包括对卡片皮肤界面的个性化设计。
主题开发者在开发主题包的时候,根据卡片引用的资源,开发新的资源进行替换。
下面我们通过一个示例主题包来进行介绍:
此示例中,应用开发者在开发卡片时同时引用了应用资源和系统资源。主题包的目录结构与卡片工程的目录结构一一对应。图6展示了主题包与卡片工程之间的资源覆盖关系。
图6 主题包资源覆盖
- 主题包的外层colors.json文件用于覆盖应用中自定义的color资源定义。
- 主题包的外层的floats.json文件用于覆盖应用中自定义的float类型资源定义,如自定义圆角大小等。
- 主题包的entry目录用于替换卡片工程中entry目录的资源,分别替换entry/src/resources/base/media目录的浅色模式下的图片,entry/src/resources/dark/media目录的深色模式下的图片。
- 主题包的ohos.global.systemres目录中的colors.json文件用于覆盖引用的系统颜色资源定义,floats.json文件用于覆盖引用的系统圆角资源定义。
另外,我们为广大主题开发者提供了一款智能、高效的主题开发工具——Theme Studio。工具的相关信息和主题的开发教程可参考文末链接。
3. 系统:切换主题
用户在华为主题APP中下载主题包后,后续的主题切换由系统自动完成。系统切换主题的流程如图7所示。
图7 切换主题
用户在点击主题包后,主题APP对主题包进行解压解析,然后通知系统进行资源切换。系统资源管理模块根据应用包名对其引用的资源ID进行重定向映射,使用主题包中对应的资源完成解析替换,然后通知卡片应用重新加载刷新。卡片应用读取到重映射后的资源,将其刷新显示到界面上。
三、开发实例
了解了卡片换肤的整体实现方案之后,下面我们来看一个简单的卡片换肤开发实例:
1.新建卡片工程,应用包名com.example.cardtest。
2.编写卡片的界面布局hml,并设置卡片的图标和文本颜色。
图8 卡片界面布局代码
3.查看卡片显示效果,如图9所示。
图9 卡片显示效果
4.制作测试主题包,添加com.example.cardtest应用资源。
图10 com.example.cardtest应用资源
该资源的内容如下:
图11 资源内容
资源替换说明如下:
entry\resources\base\media目录下的图片资源替换应用图标ic_icon.png。外层colors.json替换第一行文本颜色为黑色。
{
"color": [
{
"name": "text_color",
"value": "#000000"
}
]
}
ohos.global.systemres目录下colors.json替换第二行文本颜色为蓝色。
{
"color": [
{
"name": "fa_text_primary",
"value": "#ff0000ff"
}
]
}
5.进入主题APP,应用上面制作的测试主题包。显示效果如图12所示。
图12 卡片显示效果
四、结束语
以上就是本期卡片换肤的全部内容了。通过本期的介绍,对于卡片换肤的概念和具体实现,您是否都已经了解了呢?
最后,我们为还想深入学习和了解的同学汇总了一些链接,建议收藏!
1.服务卡片开发:
2.卡片的系统资源:
3.主题开发工具Theme Studio的下载和操作指导:
https://developer.huawei.com/consumer/cn/doc/development/Tools-Guides/overview-0000001050145150
4.主题的开发教程:
扫码添加开发者小助手微信
获取更多HarmonyOS开发资源和开发者活动资讯
一文读懂HarmonyOS服务卡片怎么换肤的更多相关文章
- 一文读懂HTTP/2及HTTP/3特性
摘要: 学习 HTTP/2 与 HTTP/3. 前言 HTTP/2 相比于 HTTP/1,可以说是大幅度提高了网页的性能,只需要升级到该协议就可以减少很多之前需要做的性能优化工作,当然兼容问题以及如何 ...
- 一文读懂高性能网络编程中的I/O模型
1.前言 随着互联网的发展,面对海量用户高并发业务,传统的阻塞式的服务端架构模式已经无能为力.本文(和下篇<高性能网络编程(六):一文读懂高性能网络编程中的线程模型>)旨在为大家提供有用的 ...
- 从HTTP/0.9到HTTP/2:一文读懂HTTP协议的历史演变和设计思路
本文原作者阮一峰,作者博客:ruanyifeng.com. 1.引言 HTTP 协议是最重要的互联网基础协议之一,它从最初的仅为浏览网页的目的进化到现在,已经是短连接通信的事实工业标准,最新版本 HT ...
- [转帖]一文读懂 HTTP/2
一文读懂 HTTP/2 http://support.upyun.com/hc/kb/article/1048799/ 又小拍 • 发表于:2017年05月18日 15:34:45 • 更新于:201 ...
- [转帖]从HTTP/0.9到HTTP/2:一文读懂HTTP协议的历史演变和设计思路
从HTTP/0.9到HTTP/2:一文读懂HTTP协议的历史演变和设计思路 http://www.52im.net/thread-1709-1-2.html 本文原作者阮一峰,作者博客:r ...
- 即时通讯新手入门:一文读懂什么是Nginx?它能否实现IM的负载均衡?
本文引用了“蔷薇Nina”的“Nginx 相关介绍(Nginx是什么?能干嘛?)”一文部分内容,感谢作者的无私分享. 1.引言 Nginx(及其衍生产品)是目前被大量使用的服务端反向代理和负载均衡 ...
- 【FIORI系列】SAP 一文读懂SAP Fiori是什么
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FIORI系列]SAP 一文读懂SAP Fio ...
- kubernetes基础——一文读懂k8s
容器 容器与虚拟机对比图(左边为容器.右边为虚拟机) 容器技术是虚拟化技术的一种,以Docker为例,Docker利用Linux的LXC(LinuX Containers)技术.CGroup(Co ...
- 大数据篇:一文读懂@数据仓库(PPT文字版)
大数据篇:一文读懂@数据仓库 1 网络词汇总结 1.1 数据中台 数据中台是聚合和治理跨域数据,将数据抽象封装成服务,提供给前台以业务价值的逻辑概念. 数据中台是一套可持续"让企业的数据用起 ...
随机推荐
- Android4.4开机动画播放视频
Android4.4系统启动时,播放自定义bootanimation.zip动画时,由于分辨率为1280x720,bootanimation.zip包也很大,播放太卡,所以将开机动画修改为播放视频.如 ...
- Mybatis-Plus一键生成代码
Mybatis-Plus一键生成代码 一.闲言碎语 闲来无事看了看了MP的官网看到一键生成的代码更新了! 整个Ui风格都变了,遂决定瞅一眼新的代码生成器 官网地址~~ 二.引入依赖 新的代码生成只有在 ...
- centos7使用Dockerfile(docker-compose)运行jar包
Dockerfile文件 FROM openjdk:8-jdk-alpine MAINTAINER "镜像维护者的姓名和邮箱地址" WORKDIR app ADD demo.jar ...
- JAVA获取当前日期时间所在周的周一和周日日期
/** * 获取当前时间所在周的周一和周日的日期时间 * @return */ public static Map<String,String> getWeekDate() { Map&l ...
- 【LeetCode】682. Baseball Game 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 使用栈模拟 日期 题目地址:https://leet ...
- Monkey工具之fastbot-iOS实践
Monkey工具之fastbot-iOS实践 背景 目前移动端App上线后 crash 率比较高, 尤其在iOS端.我们需要一款Monkey工具测试App的稳定性,更早的发现crash问题并修复. 去 ...
- 一图搞懂Web应用的单点登录
单点登录即Signle Sign On,简称SSO.其解决的是用户在多个站点之间跳转时需要频繁登录的问题,比如用户登录了天猫,就应该无需再使用账号登录淘宝,它们之间是可以相互信任的,应该自动同步登录状 ...
- BAIRE ONE FUNCTIONS (Baire第一类函数)
目录 定义 导函数 一致收敛性质 的连续点 JOHNNY HU, BAIRE ONE FUNCTIONS. 一些基本的定义(诸如逐点收敛, 一致收敛\(F_{\sigma}\)集合等)就不叙述了. 定 ...
- HTML网页设计基础笔记 • 【目录】
持续更新中- 我的大学笔记>>> 章节 内容 第1章 HTML网页设计基础笔记 • [第1章 HTML5基础] 第2章 HTML网页设计基础笔记 • [第2章 排列页面内容] 第3章 ...
- .net core中EFCore发出警告:More than twenty 'IServiceProvider' instances have been created for internal use by Entity Framework
最近使用.net core k开发时,碰到个问题,Ef使用中程序发出了一个警告: More than twenty 'IServiceProvider' instances have been cre ...