乐趣区

关于harmonyos:一文读懂服务卡片怎么换肤

jiezi

作者：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）系统资源

系统资源指的是零碎预置的资源。HarmonyOS 为服务卡片提供了一系列对立的资源 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="background-color:{{$r('sys.color.fa_background')}};"></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 发生变化时引起的兼容性问题。

  1. 主题开发者：开发主题包
    “主题”由企业或集体开发者设计开发，次要是对系统皮肤界面进行个性化设计，这其中也包含对卡片皮肤界面的个性化设计。

主题开发者在开发主题包的时候，依据卡片援用的资源，开发新的资源进行替换。

上面咱们通过一个示例主题包来进行介绍：

此示例中，利用开发者在开发卡片时同时援用了利用资源和系统资源。主题包的目录构造与卡片工程的目录构造一一对应。图 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。工具的相干信息和主题的开发教程可参考文末链接。

  1. 零碎：切换主题
    用户在华为主题 APP 中下载主题包后，后续的主题切换由零碎主动实现。零碎切换主题的流程如图 7 所示。

图 7 切换主题
用户在点击主题包后，主题 APP 对主题包进行解压解析，而后告诉零碎进行资源切换。零碎资源管理模块依据利用包名对其援用的资源 ID 进行重定向映射，应用主题包中对应的资源实现解析替换，而后告诉卡片利用从新加载刷新。卡片利用读取到重映射后的资源，将其刷新显示到界面上。

三、开发实例
理解了卡片换肤的整体实现计划之后，上面咱们来看一个简略的卡片换肤开发实例：

1. 新建卡片工程，利用包名 com.example.cardtest。

2. 编写卡片的界面布局 hml，并设置卡片的图标和文本色彩。

图 8 卡片界面布局代码
3. 查看卡片显示成果，如图 9 所示。

图 9 卡片显示成果（1）
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 卡片显示成果（2）

四、结束语
以上就是本期卡片换肤的全部内容了。通过本期的介绍，对于卡片换肤的概念和具体实现，您是否都曾经理解了呢？最初，咱们为还想深刻学习和理解的同学汇总了一些链接，倡议珍藏！

1. 服务卡片开发：
https://developer.harmonyos.c…

2. 卡片的系统资源：
https://developer.harmonyos.c…

3. 主题开发工具 Theme Studio 的下载和操作领导：
https://developer.huawei.com/…

4. 主题的开发教程：
https://developer.huawei.com/…

点击 https://developer.harmonyos.c… 跳转服务卡片开发

退出移动版