華為圖庫(kù)本身有很多功能，按照傳統(tǒng)App的交互方式，用戶都是需要先進(jìn)入圖庫(kù)應(yīng)用，然后再找到相應(yīng)功能進(jìn)行使用。隨著App功能越做越多，其傳統(tǒng)的交互方式也漸漸顯露出繁瑣的地方。

因此考慮在圖庫(kù)中采用服務(wù)卡片技術(shù)，把圖庫(kù)App中希望用戶能快速使用的，具備競(jìng)爭(zhēng)力的功能直接通過(guò)卡片方式釋放出來(lái)。比如：圖庫(kù)的相冊(cè)卡片能夠直接讓用戶在桌面上直接瀏覽相冊(cè)圖片，圖庫(kù)的創(chuàng)作卡片可以讓用戶從桌面上一步進(jìn)入視頻編輯或拼圖創(chuàng)作。

本文會(huì)為大家介紹圖庫(kù)服務(wù)卡片的規(guī)格、功能，解析圖庫(kù)服務(wù)卡片整體的設(shè)計(jì)思路以及內(nèi)部模塊結(jié)構(gòu)，并且就圖庫(kù)服務(wù)卡片幾個(gè)關(guān)鍵功能點(diǎn)的具體實(shí)現(xiàn)進(jìn)行展開(kāi)，當(dāng)然也會(huì)就服務(wù)卡片開(kāi)發(fā)過(guò)程中可能會(huì)遇到的問(wèn)題提供一些建議。

1圖庫(kù)服務(wù)卡片功能簡(jiǎn)介1卡片樣式

圖庫(kù)服務(wù)卡片按照功能劃分為：相冊(cè)卡片和創(chuàng)作卡片。

相冊(cè)卡片方便用戶直接查看圖片內(nèi)容，按照樣式又可以劃分為2x2、2x4、4x4三種。創(chuàng)作卡片方便用戶快速使用圖庫(kù)應(yīng)用的內(nèi)容創(chuàng)作功能，只有2x4一種樣式。這里2x2即是指占桌面4個(gè)圖標(biāo)位置，其他以此類推。

2卡片呼出方式用戶可以通過(guò)兩種方式呼出圖庫(kù)服務(wù)卡片，一種是在圖庫(kù)應(yīng)用的桌面圖標(biāo)上滑。另一種是長(zhǎng)按桌面卡片就會(huì)出現(xiàn)一個(gè)彈框。用戶點(diǎn)擊更多服務(wù)卡片，就能看到有多個(gè)可選的圖庫(kù)服務(wù)卡片樣式，用戶任選一個(gè)就能設(shè)置到桌面上。3照片的選擇和瀏覽功能

用戶長(zhǎng)按一個(gè)相冊(cè)卡片會(huì)出現(xiàn)一個(gè)彈框，用戶點(diǎn)擊編輯就能對(duì)相冊(cè)卡片設(shè)置顯示某張圖片或者某個(gè)相冊(cè)。用戶直接單擊相冊(cè)卡片封面就能直接以大圖的方式瀏覽當(dāng)前卡片顯示的圖片。

4照片輪播功能

桌面上添加了多個(gè)相冊(cè)卡片，每個(gè)卡片都顯示了不同的相冊(cè)，在到了設(shè)定的輪播間隔時(shí)間后，卡片的封面就會(huì)自動(dòng)切換到相冊(cè)中的下一張圖。

5內(nèi)容創(chuàng)作功能

創(chuàng)作卡片上有三塊區(qū)域：微電影創(chuàng)作、自由創(chuàng)作和拼圖創(chuàng)作，用戶分別點(diǎn)擊這些不同的區(qū)域就能夠進(jìn)入圖庫(kù)應(yīng)用對(duì)應(yīng)的功能，快速開(kāi)始內(nèi)容創(chuàng)作。

2圖庫(kù)服務(wù)卡片方案設(shè)計(jì)1功能模塊設(shè)計(jì)

下圖展示了圖庫(kù)服務(wù)卡片與卡片使用方、系統(tǒng)卡片管理服務(wù)以及圖庫(kù)應(yīng)用三者之間的邏輯關(guān)系。

圖庫(kù)服務(wù)卡片的核心數(shù)據(jù)包括：卡片ID、卡片類型、卡片內(nèi)容ID、卡片內(nèi)容類型，這些核心數(shù)據(jù)都需要從圖庫(kù)應(yīng)用獲取。

圖庫(kù)服務(wù)卡片通過(guò)系統(tǒng)卡片管理服務(wù)將卡片內(nèi)容呈現(xiàn)到卡片使用方，例如桌面。

桌面點(diǎn)擊不同卡片的事件傳遞到了圖庫(kù)服務(wù)卡片內(nèi)部的路由跳轉(zhuǎn)模塊，根據(jù)路由跳轉(zhuǎn)匹配項(xiàng)，進(jìn)入圖庫(kù)應(yīng)用的圖片選擇、圖片瀏覽、內(nèi)容創(chuàng)作等功能。

2與DevEco Studio中卡片模板的關(guān)系圖庫(kù)服務(wù)卡片是基于HarmonyOS服務(wù)卡片模板開(kāi)發(fā)。在DevEco Studio中選擇了一個(gè)服務(wù)卡片模板，即可以快速實(shí)現(xiàn)一個(gè)具備基本功能的服務(wù)卡片，圖庫(kù)服務(wù)卡片在圖庫(kù)卡片模板基礎(chǔ)上重新實(shí)現(xiàn)了相冊(cè)卡片控制器（AlbumCardControllerlmpl）和創(chuàng)作卡片控制器（DiscoveryCardControllerlmpl），配合自定義的UI和業(yè)務(wù)邏輯，使得卡片服務(wù)得到完整的實(shí)現(xiàn)。

卡片控制器是實(shí)現(xiàn)卡片功能和行為的關(guān)鍵類。我們可以看到服務(wù)卡片模板的核心類圖與圖庫(kù)服務(wù)卡片的核心類圖高度相似。因此這里也推薦大家持續(xù)關(guān)注華為定期發(fā)布的各種HarmonyOS服務(wù)卡片模板，基于合適的服務(wù)卡片模板開(kāi)發(fā)可以提升開(kāi)發(fā)效率。

3圖庫(kù)服務(wù)卡片關(guān)鍵功能實(shí)現(xiàn)我們將從路由跳轉(zhuǎn)設(shè)計(jì)、深淺色模式適配和顯示圖片這三個(gè)關(guān)鍵功能點(diǎn)來(lái)展開(kāi)對(duì)于圖庫(kù)服務(wù)卡片實(shí)現(xiàn)的說(shuō)明。1路由跳轉(zhuǎn)設(shè)計(jì)用戶點(diǎn)擊相冊(cè)卡片和創(chuàng)作卡片分別能跳轉(zhuǎn)到圖庫(kù)應(yīng)用的不同界面。

我們看一下代碼中相冊(cè)卡片和創(chuàng)作卡片的UI層事件定義。

相冊(cè)卡片的UI上有個(gè)swipper組件，它的onclick屬性關(guān)聯(lián)了一個(gè)index.json中的routerEvent，這個(gè)routerEvent配置了一個(gè)jumpToSinglePhoto的action，其目標(biāo)Ability是SpringBoardAbility。

創(chuàng)作卡片UI內(nèi)有一個(gè)div組件，它的onclick屬性關(guān)聯(lián)了一個(gè)index.json中的routerCreateCollages，這個(gè)routerCreateCollages配置了一個(gè)jumpToCreateColleges的action，其目標(biāo)Ability同樣是SpringBoardAbility。

而SpringBoardAbility.java文件中的onStart函數(shù)中的入?yún)ntent，可以解析出不同的action，根據(jù)不同的action值，我們完成了不同功能Ability的跳轉(zhuǎn)，例如跳轉(zhuǎn)到圖片瀏覽或者內(nèi)容創(chuàng)作。這種UI和功能路由解耦的實(shí)現(xiàn)方式，一方面減少了卡片UI層對(duì)圖庫(kù)應(yīng)用具體功能的邏輯依賴，另一方面也有利于后續(xù)卡片功能擴(kuò)展和維護(hù)。2深淺色模式適配如下圖所示，系統(tǒng)進(jìn)入深色模式，創(chuàng)作卡片底色就是深色，系統(tǒng)進(jìn)入淺色模式，創(chuàng)作卡片底色就變成淺色。

創(chuàng)作卡片的Index.hml文件的div組件中，有一個(gè)樣式的定義—row_layout。在index.css文件中對(duì)其有深色模式、淺色模式的兩套定義。media這個(gè)注解中的dark-mode參數(shù)依據(jù)系統(tǒng)當(dāng)前顯示模式進(jìn)行判定，如果是系統(tǒng)進(jìn)入深色模式dark-mode為true，row_layout的樣式值就是左邊這一套，反之就是右邊這一套。以此實(shí)現(xiàn)UI對(duì)系統(tǒng)深淺色模式的動(dòng)態(tài)適配。

3顯示圖片內(nèi)容圖庫(kù)應(yīng)用圖標(biāo)上滑后卡片內(nèi)容呼出時(shí)的樣子。

在卡片呼出時(shí)，即FormAbility的onCreateForm回調(diào)被調(diào)用，我們發(fā)起了卡片內(nèi)容獲取任務(wù)，即去圖庫(kù)應(yīng)用查找當(dāng)前卡片應(yīng)該顯示的圖片，獲取圖片內(nèi)容，并將圖片內(nèi)容更新到卡片界面上。這個(gè)任務(wù)我們采用異步線程的運(yùn)行方式，沒(méi)有在onCreateForm中直接返回封裝卡片內(nèi)容的ProviderFormInfo對(duì)象，是為了防止查詢和解碼圖片過(guò)程的耗時(shí)導(dǎo)致卡片本身加載顯示緩慢。

按照規(guī)則，圖庫(kù)的相冊(cè)卡片上滑呼出時(shí)，默認(rèn)會(huì)使用相機(jī)相冊(cè)中的首張圖片作為卡片封面。我們根據(jù)相機(jī)相冊(cè)的id，獲取相機(jī)圖庫(kù)路徑信息Uri，再根據(jù)Uri查詢到相機(jī)相冊(cè)內(nèi)的一批圖片信息列表，并將圖庫(kù)列表中首張圖信息作為返回值。如果當(dāng)前圖庫(kù)為空，那么將對(duì)圖庫(kù)卡片設(shè)置一張默認(rèn)的圖片作為卡片封面。

根據(jù)圖片路徑信息Uri，開(kāi)始計(jì)算圖片解碼參數(shù)?？紤]到用戶圖片不同高寬比和大小不一的情況，在不同尺寸的相冊(cè)卡片上，圖片顯示不能變形，不能加載超大的原圖顯示到卡片上影響加載效率。因此就要做一些圖片解碼參數(shù)的計(jì)算與設(shè)置，例如：計(jì)算圖片降采樣率計(jì)算，圖片裁剪區(qū)域設(shè)置，和不同圖片旋轉(zhuǎn)方向的圖片高寬縮放設(shè)置。完成相關(guān)的解碼參數(shù)計(jì)算和設(shè)置之后，就能通過(guò)界面接口（imageSource.createPixelmap）獲得圖片pixelMap對(duì)象。

接著把pixelMap對(duì)象按照如下代碼打包，得到一個(gè)圖像字節(jié)數(shù)組。至此卡片所需的圖片內(nèi)容準(zhǔn)備完畢。

在將圖像字節(jié)數(shù)組更新顯示到UI界面前，要做一次數(shù)據(jù)封裝，把字節(jié)數(shù)組封裝到FormBindingData對(duì)象中。首先在zsonObject中設(shè)置圖片的url，然后將圖片字節(jié)流通過(guò)addImageData直接添加到FormBindingData對(duì)象中，這里我們可以看到url和字節(jié)流通過(guò)圖片名稱關(guān)聯(lián)了起來(lái)。

最終將已經(jīng)封裝了圖片信息的FormBindingData對(duì)象通過(guò)ability的updateForm方法推送給UI層，UI層的image組件解析到image字段就能獲取圖片的url信息，進(jìn)而通過(guò)圖片的url信息獲得圖片的字節(jié)流，最終完成圖片內(nèi)容的界面顯示。

4服務(wù)卡片開(kāi)發(fā)建議

問(wèn)題場(chǎng)景一：

桌面創(chuàng)建了多個(gè)卡片，切換系統(tǒng)語(yǔ)言后，快速返回桌面，桌面進(jìn)程重啟，用戶看到卡片一個(gè)一個(gè)慢慢顯示。

問(wèn)題原因：

onCreateForm方法中有耗時(shí)操作，影響了卡片加載速度。

解決辦法：

避免在服務(wù)卡片生命周期回調(diào)中出現(xiàn)耗時(shí)操作。

問(wèn)題場(chǎng)景二：

當(dāng)桌面在后臺(tái)時(shí)，相冊(cè)卡片不顯示，但圖片內(nèi)容（旋轉(zhuǎn)或其他編輯動(dòng)作）發(fā)生變化，卡片應(yīng)用主動(dòng)調(diào)用Ability的updateForm方法無(wú)法及時(shí)更新卡片內(nèi)容。

問(wèn)題原因：

當(dāng)桌面在后臺(tái)時(shí)，界面繪制任務(wù)暫停，卡片提交的內(nèi)容更新不會(huì)及時(shí)響應(yīng)處理。

解決辦法：

在卡片生命周期的onUpdateForm方法中調(diào)用Ability的updateForm方法更新卡片最新內(nèi)容，如下圖所示：

讀完了這個(gè)基于華為圖庫(kù)服務(wù)卡片開(kāi)發(fā)實(shí)踐，是不是讓你對(duì)于卡片開(kāi)發(fā)有了更深刻的認(rèn)識(shí)

編輯：jq