HarmonyOS服務(wù)卡片如何換膚

作者：zhenyu，華為軟件開發(fā)工程師

關(guān)注HarmonyOS的小伙伴肯定對服務(wù)卡片已經(jīng)很熟悉了。服務(wù)卡片(也簡稱為“卡片”)是FA(FeatureAbility，元服務(wù))的一種界面展示形式，將FA的重要信息或操作前置到卡片，以達(dá)到服務(wù)直達(dá)，減少體驗(yàn)層級的目的。類似手機(jī)上應(yīng)用的換膚，服務(wù)卡片也支持換膚。本期，我們就來聊一聊卡片換膚。

一、“卡片換膚”換的是什么?

服務(wù)卡片的UI界面由一系列的資源組成，這些資源包括顏色、文本、圖標(biāo)和圓角等等。不同資源有對應(yīng)的資源ID，通過替換資源ID對應(yīng)的資源就可以實(shí)現(xiàn)換膚。

為了讓大家更了解卡片換膚，下面來看兩個示例：

1.更改卡片的圓角大小。

2.更改卡片的背景顏色和文字顏色。

通過上面兩個示例，我們看到：通過修改卡片的圓角資源參數(shù)、背景顏色、文本顏色等就對卡片進(jìn)行了簡單的換膚。實(shí)際場景中，我們還可以對圖標(biāo)、多彩色板、切圖資源等各類卡片資源進(jìn)行修改和替換，實(shí)現(xiàn)更復(fù)雜的換膚。

二、如何實(shí)現(xiàn)卡片換膚?

卡片換膚需要應(yīng)用開發(fā)者、主題開發(fā)者和系統(tǒng)三者的配合?？ㄆ瑩Q膚的整體流程如圖3所示。

圖3 卡片換膚流程

卡片換膚流程說明如下：

步驟一：應(yīng)用開發(fā)者在開發(fā)卡片時，可以自定義卡片的各項(xiàng)資源及其資源ID。

步驟二：主題開發(fā)者在開發(fā)主題包時會使用新的資源來替換資源ID對應(yīng)的資源信息。

步驟三：用戶下載和安裝主題包后，在切換主題時，由系統(tǒng)自動完成卡片相應(yīng)的資源替換，從而達(dá)到卡片換膚的目的。

下面我們以JS卡片為例分別從應(yīng)用開發(fā)者、主題開發(fā)者、系統(tǒng)三者的角度來介紹卡片換膚的實(shí)現(xiàn)方案。

1. 應(yīng)用開發(fā)者：開發(fā)卡片

JS卡片工程中，應(yīng)用開發(fā)者可以使用的資源，包括三類：JS模塊資源、應(yīng)用資源和系統(tǒng)資源。下面一一介紹如何引用這三類資源。

(1)JS模塊資源

JS模塊資源指的是src/main/js/Component下resources目錄中的資源，如圖4所示。

圖4 JS模塊資源

此類資源的主要特點(diǎn)是只能在該JS模塊范圍內(nèi)引用。引用方法一般為在應(yīng)用開發(fā)的hml和js文件中使用$r的語法，對JS模塊內(nèi)resources目錄下的json資源進(jìn)行格式化，獲取相應(yīng)的資源內(nèi)容。

下面我們通過一個示例來說明JS模塊資源的引用方法。

例如，resources/res-defaults.json中定義了以下資源：

{    "image": {"clockFace":"common/face.png"},    "colors": { "background":"#ffffff"}}

在hml文件中可以通過{{ $r('colors.background') }}和{{ $r('image.clockFace') }}分別引用上面定義的background和clockFace資源。代碼如下：

<div style="background-color: {{ $r('colors.background') }}">    <image src="{{ $r('image.clockFace') }}">image>div>

(2)應(yīng)用資源

應(yīng)用資源指的是與java、js目錄同級的resources目錄中的資源，如圖5所示。

圖5 應(yīng)用資源

應(yīng)用資源的特點(diǎn)是所有JS模塊共享，可認(rèn)為是應(yīng)用內(nèi)共享。從API Version 6開始，可以在hml/css/json文件中引用應(yīng)用資源，包括顏色、圓角和圖片類型的資源。

在css文件中，通過“@app.type.resource_id”的形式引用應(yīng)用資源。

在hml文件中，通過“{{$r('app.type.resource_id')}}”的形式引用應(yīng)用資源。

在json文件中，通過“this.$r('app.type.resource_id')”的形式引用應(yīng)用資源。

其中，“app”是固定字符串，代表應(yīng)用資源?！皌ype”表示引用的資源類型，可以取值為“color”(顏色)、“float”(圓角)和“media”(圖片)?！皉esource_id”表示應(yīng)用資源ID，取值為color.json或float.json中的“name”字段值，或者media目錄中圖片文件的名稱(不包含圖片類型后綴)。

下面我們通過一個示例來說明應(yīng)用資源的引用方法。

例如，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)系統(tǒng)資源

系統(tǒng)資源指的是系統(tǒng)預(yù)置的資源。HarmonyOS為服務(wù)卡片提供了一系列統(tǒng)一的資源ID標(biāo)識，這些標(biāo)識在系統(tǒng)中對應(yīng)了默認(rèn)的資源信息。這些資源不在應(yīng)用工程中，但應(yīng)用可以通過特定的語法來訪問。(系統(tǒng)資源的詳細(xì)信息可參考文末鏈接。)

系統(tǒng)資源的特點(diǎn)是所有應(yīng)用均可訪問，但具體的資源內(nèi)容或資源值是根據(jù)應(yīng)用的上下文獲取到的。從API Version 6開始，在hml/css/json文件中可以引用系統(tǒng)資源，包括顏色、圓角和圖片類型的資源。系統(tǒng)資源的引用方法與應(yīng)用資源比較類似，只是資源前綴由“app”換成“sys”了，“sys”代表系統(tǒng)資源。

在css文件中，通過“@sys.type.resource_id”的形式引用系統(tǒng)資源。

.divA {    background-color: "@sys.color.fa_background";    border-radius: "@sys.float.fa_corner_radius_card";      }

在hml文件中，通過“{{$r('sys.type.resource_id')}}”的形式引用系統(tǒng)資源。

<div style="background-color:{{$r('sys.color.fa_background')}};">div><div style="border-radius:{{$r('sys.float.fa_corner_radius_card')}};">div><divstyle="background-image:{{$r('sys.media.fa_card_background')}};">div>

在json文件中，通過“this.$r('sys.type.resource_id')”的形式引用系統(tǒng)資源。

{    "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')"}}

比較推薦卡片優(yōu)先引用系統(tǒng)資源ID來適配UI界面。這樣，主題開發(fā)者做換膚適配時，可以極大減少對單個應(yīng)用的資源ID適配的工作量，同時避免應(yīng)用升級引用資源ID發(fā)生變化時引起的兼容性問題。

2. 主題開發(fā)者：開發(fā)主題包

“主題”由企業(yè)或個人開發(fā)者設(shè)計開發(fā)，主要是對系統(tǒng)皮膚界面進(jìn)行個性化設(shè)計，這其中也包括對卡片皮膚界面的個性化設(shè)計。

主題開發(fā)者在開發(fā)主題包的時候，根據(jù)卡片引用的資源，開發(fā)新的資源進(jìn)行替換。

下面我們通過一個示例主題包來進(jìn)行介紹：

此示例中，應(yīng)用開發(fā)者在開發(fā)卡片時同時引用了應(yīng)用資源和系統(tǒng)資源。主題包的目錄結(jié)構(gòu)與卡片工程的目錄結(jié)構(gòu)一一對應(yīng)。圖6展示了主題包與卡片工程之間的資源覆蓋關(guān)系。

圖6 主題包資源覆蓋

主題包的外層colors.json文件用于覆蓋應(yīng)用中自定義的color資源定義。

主題包的外層的floats.json文件用于覆蓋應(yīng)用中自定義的float類型資源定義，如自定義圓角大小等。

主題包的entry目錄用于替換卡片工程中entry目錄的資源，分別替換entry/src/resources/base/media目錄的淺色模式下的圖片，entry/src/resources/dark/media目錄的深色模式下的圖片。

主題包的ohos.global.systemres目錄中的colors.json文件用于覆蓋引用的系統(tǒng)顏色資源定義，floats.json文件用于覆蓋引用的系統(tǒng)圓角資源定義。

另外，我們?yōu)閺V大主題開發(fā)者提供了一款智能、高效的主題開發(fā)工具——Theme Studio。工具的相關(guān)信息和主題的開發(fā)教程可參考文末鏈接。

3. 系統(tǒng)：切換主題

用戶在華為主題APP中下載主題包后，后續(xù)的主題切換由系統(tǒng)自動完成。系統(tǒng)切換主題的流程如圖7所示。

圖7 切換主題

用戶在點(diǎn)擊主題包后，主題APP對主題包進(jìn)行解壓解析，然后通知系統(tǒng)進(jìn)行資源切換。系統(tǒng)資源管理模塊根據(jù)應(yīng)用包名對其引用的資源ID進(jìn)行重定向映射，使用主題包中對應(yīng)的資源完成解析替換，然后通知卡片應(yīng)用重新加載刷新?？ㄆ瑧?yīng)用讀取到重映射后的資源，將其刷新顯示到界面上。

三、開發(fā)實(shí)例

了解了卡片換膚的整體實(shí)現(xiàn)方案之后，下面我們來看一個簡單的卡片換膚開發(fā)實(shí)例：

1.新建卡片工程，應(yīng)用包名com.example.cardtest。

2.編寫卡片的界面布局hml，并設(shè)置卡片的圖標(biāo)和文本顏色。

圖8 卡片界面布局代碼

3.查看卡片顯示效果，如圖9所示。

4.制作測試主題包，添加com.example.cardtest應(yīng)用資源。

圖10 com.example.cardtest應(yīng)用資源

　　圖11 資源內(nèi)容

資源替換說明如下：

• entry esourcesasemedia目錄下的圖片資源替換應(yīng)用圖標(biāo)ic_icon.png。

• 外層colors.json替換第一行文本顏色為黑色。

{  "color": [    {      "name": "text_color",      "value": "#000000"    }           ]}

• ohos.global.systemres目錄下colors.json替換第二行文本顏色為藍(lán)色。

{    "color": [        {            "name": "fa_text_primary",            "value": "#ff0000ff"        }             ]}

5.進(jìn)入主題APP，應(yīng)用上面制作的測試主題包。顯示效果如圖12所示。

四、結(jié)束語

以上就是本期卡片換膚的全部內(nèi)容了。通過本期的介紹，對于卡片換膚的概念和具體實(shí)現(xiàn)，您是否都已經(jīng)了解了呢?最后，我們?yōu)檫€想深入學(xué)習(xí)和了解的同學(xué)匯總了一些鏈接，建議收藏!

想了解更多HarmonyOS技術(shù)?后臺留言，立刻安排!

原文標(biāo)題：一文讀懂服務(wù)卡片怎么換膚

文章出處：【微信公眾號：HarmonyOS開發(fā)者】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。

審核編輯：湯梓紅