詳談高大上的圖片載入框架Glide -應用篇

Code4Android發表於2016-09-22

在Android裝置上,載入網路圖片一直是一個頭疼的問題,因為Android裝置種類繁多(當然最主要的是配置),處理的稍不周到輕則應用卡頓,嚴重者就會出現OOM的,導致程式掛掉。現如今網路上有很多圖片庫,如 Universal-Image-Loader,Picasso,FrescoGlide等等。相信列舉出的這幾個庫大家都不陌生,這也是目前最火的圖片庫了。由於個人的喜好原因(主要是別人介紹說Glide庫比較NB),所以就開始研究學習Glide。

Glide庫和Picasso庫有極大的相似性,編碼風格也幾近相同,不過Glide卻有著更為強大的功能。它在快取處理方面有著很大的優勢並且支援載入Gif動畫以及本地Video。這個庫在谷歌開源庫中也有應用。如此好東西,心動不如行動,現在開始我們的學習之旅吧。


原始碼【傳送門】

如果想更深入學習Glide,可繼續閱讀下一篇文章

詳談高大上的圖片載入框架Glide -原始碼篇


配置

使用Glide的第一步是現在我們的builde.gradle

配置gradle檔案後,我們就可以使用Glide了。上程式碼

看著很簡單吧,一句話就可以實現圖片下載和展示。我們看到Glide使用建造者模式載入圖片。

我們看到with()可接受三種引數,這也是Glide的亮點,它能根據傳入引數Activity/Fragment的生命週期保持一致,去暫停和執行圖片載入,這也節省了不必要的流量浪費。

載入圖片方式

String引數載入

資原始檔載入

本地檔案載入

Uri載入

URL方式

該方式在原始碼中已經標記@Deprecated

設定佔點陣圖片

在上面的處理中,我們之間將載入成功的圖片展示到ImageView,這樣會不會看起來很突兀?是的,Glide為我們提供了設定佔位符,他可以讓我們知道圖片是否載入成功,等

placeholder

我們都知道,圖片載入是不確定的,載入成功需要的時間也是不確定的,而在載入這段時間,我們可以通過placeholder設定給ImageView一個佔位符,圖片上可以提示正在載入中之類的,當然可以任何你要的效果,

error

當然除了載入成功前我們設定了佔位符,那麼如果載入錯誤(網路原因及url非法原因等導致圖片沒有載入成功),我們填充一個圖片到ImageView提示使用者當前圖片載入失敗。

此時你可能想如何知道圖片載入失敗的具體原因呢?Glide為我們提供了listener()方法,接收RequestListener物件

我們看到有兩個回撥方法,通過onException是圖片載入異常回撥,onResourceReady是載入成功的回撥。我們可以測試不同情況列印的日誌

  • 正確的url首次載入

  • 正確的url第二次載入

  • 錯誤的url

  • 錯誤的url(非圖片型別url)

  • 無網路

通過日誌我們很容易看出異常的原因,因此,我們可以針對不同的操作情形,書寫自己的處理給使用者反饋。

crossFade

通過上面的分析,我們實現了佔點陣圖填充ImageView,但是我們依然發現其中有些不足,因為圖片的轉換並沒有實現平滑過渡效果,實際新api已經預設實現一個漸入漸出的動畫效果,預設是300ms.

crossFade()還可以接收一個int型的引數,用它來指定動畫執行的時間,例如我們設定動畫執行的時間是2s

既然我們能新增一個漸入漸出的動畫效果,那麼如果想直接顯示圖片而沒有任何淡入淡出效果,該作何處理,我們可以使用dontAnimate()方法,這是直接顯示你的圖片,而不是淡入顯示到 ImageView。

圖片調整

Glide載入圖片大小是自動調整的,他根據ImageView的尺寸自動調整載入的圖片大小,並且快取的時候也是按圖片大小快取,每種尺寸都會保留一份快取,如果圖片不會自動適配到 ImageView,呼叫 override(horizontalSize, verticalSize) 。這將在圖片顯示到 ImageView之前重新改變圖片大小

注意override接收的引數是畫素(px)

縮放

對於任何影象操作,調整大小可能讓圖片失真。但是我們要儘可能的避免發生這種情況發生。Glide 提供了兩個圖形裝換的操作提供了兩個標準選項:centerCrop 和 fitCenter

  • centerCrop
    這個方法是裁剪圖片,當圖片比ImageView大的時候,他把把超過ImageView的部分裁剪掉,儘可能的讓ImageView 完全填充,但影象可能不會全部顯示

  • fitCenter
    它會自適應ImageView的大小,並且會完整的顯示圖片在ImageView中,但是ImageView可能不會完全填充

載入Gif

載入Gif動畫也是Glide的一大優勢,它很簡單的就能實現Gif的載入與顯示

是不是很簡單,依然是一句話就實現顯示網路上Gif功能。Glide還提供了Gif相關操作的兩個方法。如果我們想將Gif顯示成圖片的第一幀只需要使用asBitmap()方法即可。如果我們有這個需求,就是嚴格顯示成Gif,那麼當傳入了一個非Gif 的url時,我們當做錯誤處理。此時我們可以使用asGif()方法

Glide 將會把這個 load 當成失敗處理。這樣做的的好處是,.error() 回撥被呼叫並且錯誤佔位符被顯示,如果url是Gif,那麼會沒什麼變化,這樣就檢查了load引數是否為Gif.

Glide網路載入方式

Glide內部預設是通過HttpURLConnection網路方式載入圖片的,並且支援OkHttp,Volley

整合OkHttp

在gradle檔案加入下面程式碼

整合Volley

Gradle 會自動合併必要的 GlideModule 到Android.Manifest。Glide 會認可在 manifest 中的存在,然後使用 所整合的網路連線。

自定義動畫

在前面我們已經提到過Glide提供了一個漸入漸出的動畫效果,當然該動畫不是那麼酷炫,而且有時並不能達到我們想要的效果,不過Glide給我們提供了animate()方法,我們可以通過此方法實現我們自定義的動畫效果。

animate(int animationId)

上面我們實現了一個圖片從小變大並且有一個旋轉效果的動畫,當然你可以在此檔案書寫任何你想要實現的動畫。

java檔案設定動畫

我們也可以通過Animator實現動畫,如下

Target

Glide不但可以把圖片、視訊劇照、GIF動畫載入到View,還可以載入到自定義的Target實現中。Target就是使用Glide獲取到資源之後資源作用的目標,我們通常是用Glide載入完資源後顯示到ImageView中,這個ImageView就是目標.

SimpleTarget

上面的程式碼我們將TextView作為Target,將載入的圖片設為背景,對於SimpleTarget是接收的泛型資料,如果我們需要Bitmap物件,我們將泛型為Bitmap.以及其它我們想要的型別。
我們還可以指定載入的寬和高,如下,設定寬和高都是100,單位是px

ViewTarget

如果你想載入一個圖片到View中,但是你想觀察或者覆蓋Glide的預設行為。你可以覆蓋ViewTarget或者它的子類。
當你想讓Glide來獲取view的的大小,但是由自己來啟動動畫和設定資源到view中,ViewTarget是個不錯的選擇。如果你要載入一個圖片到ImageView之外的自定義view中,那麼ImageViewTarget或者它的子類就不能滿足你的要求,此時繼承ViewTarget就特別合適。
你可以靜態的定義一個ViewTarget的子類,或者傳遞一個匿名內部類到你的載入呼叫裡:

說明:
載入一張靜態的圖片或者一張GIF動態圖,可以在load後面加上asBitmap()/asGif()
.Load(url)會通過asXXX()替換ViewTarget當中的GlideDrawable引數,也可以通過實現LifecycleLisener,給target設定一個回撥

轉換 transform

在圖片顯示之前,我們可以通過transform對影象做一些處理,達到我們想要的圖片效果,例如我們改變圖片的大小,範圍,顏色等。Glide提供了兩種基本的圖片轉換即:fitCenter 和 centerCrop,前面已介紹過。這次我們來了解如何自定義轉換效果,例如如果我們想展示一個圓形圖片或者一個具有圓角的圖片該如何處理?(圓形頭像)
為了自定義轉換,我們需要建立一個新的類實現了 Transformation 介面。不過如果我們只是做圖片的轉換可以直接用Glide封裝好的BitmapTransformation抽象類。影象轉換操作只需要在transform裡實現。getId() 方法描述了這個轉換的唯一識別符號。Glide 使用該鍵作為快取系統的一部分,為了避免意外的問題,你要確保它是唯一的
接下來先實現一個圓角的圖片

推薦一個開源的轉換庫glide-transformations,它實現了很多轉換,我們只要整合直接使用 glide-transformationsGithub地址

20160829164424144

當然如果我們想實現成一個圓形的頭像,只需要在上面基礎上稍微調整即可。那麼如何旋轉圖片呢如下

看到這就明白了,其實自定義轉換也很簡單。需要注意的一點transform()如果多次呼叫,後面的效果會覆蓋前面的,也就是說我們只能看到最後一次的轉換,所以不要多次呼叫,還有centerCrop() 和fitCenter() 也是轉換,他是Glide自己實現的轉換。
通過前面幾句的描述,你可能會問既然transform()或者centerCrop() 和fitCenter() 不能多次呼叫,那麼我們想實現多種效果該怎麼辦呢?不要驚慌,我們看下transform原始碼它就收任意長的引數

現在我們要實現上面兩個圓角加旋轉的轉換隻需要將兩個物件都以引數傳遞就可以了

實現效果

20160829171435629

Notifications載入網路圖片

我們發現現在很多App通知都會有一個圖片展示,這更美觀而且更能形象的表達出通知的內容,那麼怎麼載入網路上的圖片到通知欄呢?Glide提供了NotificationTarget來載入網路上的圖片,當然我們自己寫通知載入網路上的圖片也能實現,但是畢竟需要耗很多時間,
接下來我們先佈局通知UI,如下

建立自定義通知

自定義GlideModule

我們先新建一個類實現GlideModule介面 ,在applyOptions方法裡利用GlideBuilder 全域性改變 Glide 行為的一個方式,通過全域性GlideModule 配置Glide,用GlideBuilder設定選項,用Glide註冊ModelLoader等

完成自定義類的建立後,需要在清單檔案中配置,如果不配置的話,我們自定義的ConfigurationGlide 裡實現的內容都不會生效。

混淆

因為要用到反射的GlideModule可以通過反射例項化

當然我們最好的方法是一次性混淆配置

Glide 的圖片質量

在 Android 中有兩個主要的方法對圖片進行解碼:ARGB8888(每畫素4位元組儲存) 和 RGB565(每畫素2位元組儲存)。當然ARGB8888有更高的圖片質量,Glide預設使用RGB565進行解碼,所以記憶體佔用相對較小,如果我們想要更高的圖片質量,可以設定,如下

記憶體快取

Glide提供了一個類MemorySizeCalculator,用於決定記憶體快取大小以及 bitmap 的快取池。bitmap 池維護了你 App 的堆中的影象分配。正確的 bitmpa 池是非常必要的,因為它避免很多的影象重複回收,這樣可以確保垃圾回收器的管理更加合理。它的預設計算實現

此時我們可以根據預設的大小去調整自己想要的大小

磁碟快取

Glide圖片快取有兩種情況,一種是內部磁碟快取另一種是外部磁碟快取。我們可以通過 builder.setDiskCache()設定,並且Glide已經封裝好了兩個類實現外部和內部磁碟快取,分別是InternalCacheDiskCacheFactory和ExternalCacheDiskCacheFactory,通過原始碼發現磁碟快取預設是250M,路徑名image_manager_disk_cache如下

設定磁碟快取大小100M

上面我們實現了自定義快取的大小,但是快取的路徑是固定的,那麼該如何自己定義快取路徑呢?上程式碼

registerComponents裡的實現參考原始碼

本文是自己學習的一個總結記錄,同時也希望對看本文的你有一定幫助,由於水平有限,文中若有錯誤的地方歡迎指正!謝謝。

打賞支援我寫出更多好文章,謝謝!

打賞作者

打賞支援我寫出更多好文章,謝謝!

任選一種支付方式

詳談高大上的圖片載入框架Glide -應用篇 詳談高大上的圖片載入框架Glide -應用篇

相關文章