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

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

文章由鴻蒙社區(qū)產(chǎn)出，想要了解更多內(nèi)容請(qǐng)前往：51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)https://harmonyos.51cto.com

[[388726]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

引言

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

功能介紹

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

指南

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

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

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

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

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

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

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

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

注釋：//with(this)當(dāng)前page

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

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

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

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

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

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

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

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

先來(lái)介紹第一種：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)); 
 
}

再來(lái)介紹第二種：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)); 
 
}