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

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

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

1圖庫服務卡片功能簡介1卡片樣式

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

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

2卡片呼出方式用戶可以通過兩種方式呼出圖庫服務卡片，一種是在圖庫應用的桌面圖標上滑。另一種是長按桌面卡片就會出現(xiàn)一個彈框。用戶點擊更多服務卡片，就能看到有多個可選的圖庫服務卡片樣式，用戶任選一個就能設置到桌面上。3照片的選擇和瀏覽功能

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

4照片輪播功能

桌面上添加了多個相冊卡片，每個卡片都顯示了不同的相冊，在到了設定的輪播間隔時間后，卡片的封面就會自動切換到相冊中的下一張圖。

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

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

2圖庫服務卡片方案設計1功能模塊設計

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

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

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

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

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

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

3圖庫服務卡片關鍵功能實現(xiàn)我們將從路由跳轉設計、深淺色模式適配和顯示圖片這三個關鍵功能點來展開對于圖庫服務卡片實現(xiàn)的說明。1路由跳轉設計用戶點擊相冊卡片和創(chuàng)作卡片分別能跳轉到圖庫應用的不同界面。

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

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

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

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

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

3顯示圖片內(nèi)容圖庫應用圖標上滑后卡片內(nèi)容呼出時的樣子。

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

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

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

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

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

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

4服務卡片開發(fā)建議

問題場景一：

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

問題原因：

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

解決辦法：

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

問題場景二：

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

問題原因：

當桌面在后臺時，界面繪制任務暫停，卡片提交的內(nèi)容更新不會及時響應處理。

解決辦法：

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

讀完了這個基于華為圖庫服務卡片開發(fā)實踐，是不是讓你對于卡片開發(fā)有了更深刻的認識

編輯：jq