HarmonyOS的OhosGlide三方組件應(yīng)用介紹

在實際應(yīng)用開發(fā)中，會用到大量圖片處理，如：網(wǎng)絡(luò)圖片、本地圖片、應(yīng)用資源、二進制流、Uri對象等，雖然官方提供了PixelMap進行圖片處理，但是卻遠遠滿足不了實際應(yīng)用中各種五花八門的應(yīng)用場景，如占位圖、Gif圖、加載失敗圖、內(nèi)存浪費、內(nèi)存溢出、節(jié)約流量等，這時候就需要一款能夠處理這些問題，而且簡單易用且性能很高的圖片處理器了，因此OhosGlide三方組件應(yīng)運而生。

功能介紹
OhosGlide 是一款非常優(yōu)秀的圖片處理工具，支持多種格式圖片加載,采用磁盤緩存、內(nèi)存緩存方式實現(xiàn)預加載，指定緩存大小實現(xiàn)節(jié)省內(nèi)存避免OOM，操作方便簡單易用。

指南

接下來我們來看下OhosGlide 具體是怎么使用的，在哪些場景使用，以及他的開發(fā)指南

我們先來看下對于開發(fā)者來講，如何使用這個三方件，也就是har包，需要注意哪些地方

1. 新建工程，增加組件Har包依賴

在應(yīng)用模塊中添加HAR，只需要將glidelibrary.har復制到entrylibs目錄下即可（由于build.gradle中已經(jīng)依賴的libs目錄下的*.har，因此不需要在做修改）。

2.修改配置文件，首先在entry下面的build.gradle添加library 的依賴

其次在content.json 中添加需要的權(quán)限（由于在開發(fā)過程中，需要用到網(wǎng)絡(luò)，以及存儲權(quán)限，所以需要在content.json中添加相應(yīng)的權(quán)限申明）

3.在我們需要加載網(wǎng)絡(luò)圖片的地方，實現(xiàn)以下代碼，具體如下：

OhosGlideUtils.with(this).load("https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png").def(ResourceTable.Media_A).into(image);

注釋：//with（this）當前page

//load(url) 需要顯示的圖片url

//def(resID) 默認展示圖片，當中途發(fā)生異常，展示默認的圖片

//into(image) 需要展示的component

在實際開發(fā)中，我們不僅需要加載網(wǎng)絡(luò)圖片，還需要加載本地圖片，具體代碼如下：

注釋：//load(inputStream) 需要顯示的圖片的流

作為一個程序員，最關(guān)注的不是如何使用三方件，而是三方件的靈魂，如果實現(xiàn)才是重中之重，那么作為圖片處理工具，核心的就是我們的緩存了，這樣不僅頁面加載快，而且還能節(jié)省流量，體驗感好，接下來我們就來看下OhosGlide的緩存是如何實現(xiàn)的

緩存主要分為兩種，第一種：內(nèi)存緩存，也就是我們經(jīng)常說的MemoryCache，當首次加載圖片時，將圖片緩存至內(nèi)存中，這樣用戶在有網(wǎng)的情況，再次訪問時，先加載內(nèi)存緩存圖片，然后再去網(wǎng)絡(luò)請求最新的圖片。減少流量的浪費和增加用戶體驗感

第二種就是我們說的磁盤緩存：DiskCache，設(shè)計磁盤緩存的核心理念就是當前設(shè)備沒有網(wǎng)絡(luò)的情況，訪問該頁面，如果app有磁盤緩存，則顯示緩存的圖片。不至于用戶什么也看不到，這樣做的目的也是為了增加用戶體驗感。

先來介紹第一種：MemoryCache,核心代碼如下，具體可以參考源碼

public static void savePixelMap(String key, PixelMap pixelMap) {
    if (!isCache(key)) {
        CACHE_LOADER.addBitmap(CacheUtils.hashKeyForCache(key), pixelMap);
    }
}
public static PixelMap getPixelMap(String key) {
    return CACHE_LOADER.getPixelMap(CacheUtils.hashKeyForCache(key));

}

再來介紹第二種：DiskCache ,核心代碼如下，具體可以參考源碼：

// Add緩存
byte[] bytes = response.body().bytes();
diskLruCacheImpl.addDiskCache(bytes, url);
// Get緩存
pixelMap = diskLruCacheImpl.getDiskCache(url);
if (pixelMap != null) {
    abilitySlice.getUITaskDispatcher().asyncDispatch(() -> {
        image.setPixelMap(pixelMap);
    });
}

緩存架構(gòu)圖如下：

代碼如下：

public static void savePixelMap(String key, PixelMap pixelMap) {
    if (!isCache(key)) {
        CACHE_LOADER.addBitmap(CacheUtils.hashKeyForCache(key), pixelMap);
    }
}
public static PixelMap getPixelMap(String key) {
    return CACHE_LOADER.getPixelMap(CacheUtils.hashKeyForCache(key));

}

最終模擬器展示一張網(wǎng)絡(luò)圖片效果圖如下：

在實現(xiàn)的過程中，我們可以在任何地方去調(diào)用OhosGlide 去展示網(wǎng)絡(luò)圖片，比如ListContainer加載列表

編輯：hfy