HarmonyOS三方件開發指南(14)-Glide組件功能介紹

作者：軟通田可輝 2021-03-19 17:42:01

文章由鴻蒙社區產出，想要了解更多內容請前往：51CTO和華為官方戰略合作共建的鴻蒙技術社區https://harmonyos.51cto.com

[[388726]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

引言

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

功能介紹

OhosGlide 是一款非常優秀的圖片處理工具，支持多種格式圖片加載,采用磁盤緩存、內存緩存方式實現預加載，指定緩存大小實現節省內存避免OOM，操作方便簡單易用。

指南

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

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

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

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

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

其次在content.json 中添加需要的權限(由于在開發過程中，需要用到網絡，以及存儲權限，所以需要在content.json中添加相應的權限申明)

3.在我們需要加載網絡圖片的地方，實現以下代碼，具體如下：

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) 默認展示圖片，當中途發生異常，展示默認的圖片

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

在實際開發中，我們不僅需要加載網絡圖片，還需要加載本地圖片，具體代碼如下：

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

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

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

第二種就是我們說的磁盤緩存：DiskCache，設計磁盤緩存的核心理念就是當前設備沒有網絡的情況，訪問該頁面，如果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); 
    }); 
}

緩存架構圖如下：

代碼如下：

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)); 
 
}