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

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

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

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

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

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

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

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

4照片輪播功能

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

5內容創作功能

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

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

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

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

圖庫服務卡片通過系統卡片管理服務將卡片內容呈現到卡片使用方，例如桌面。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4服務卡片開發建議

問題場景一：

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

問題原因：

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

解決辦法：

避免在服務卡片生命周期回調中出現耗時操作。

問題場景二：

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

問題原因：

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

解決辦法：

在卡片生命周期的onUpdateForm方法中調用Ability的updateForm方法更新卡片最新內容，如下圖所示：

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

編輯：jq