一、前言:再優秀的開源庫都有坑要填
手上的項目使用的圖片加載框架是:Universal-Image-Loader+業務需要定制化的一些代碼。Universal-Image-Loader 這個框架是一個非常經典好用的框架,唯一的問題是是作者很久之前就不再更新了。所以綜合考慮下,確定使用Glide+封裝代替當前的圖片加載框架。
二、困惑:
在沒有真正使用 Glide 之前,我所看到的文章基本都是贊美這個庫的功能強大,加載流暢。然而,當我用上了以后,才發現並不完美。遇到了不少的坑,需要自己填。
2.1 Glide 配合 OKHttp 使用的坑:
需要在Gradle中引入:
compile "com.github.bumptech.glide:glide:3.7.0"
compile "com.github.bumptech.glide:okhttp3-integration:1.4.0@aar"
這里就有一個坑,如果你用到自定義的 GlideModule,這里的可能會失效,被com.github.bumptech.glide:okhttp3-integration:1.4.0@aar默認的替換
解決方法是升級版本號:
compile "com.github.bumptech.glide:okhttp3-integration:1.4.0@aar" -》 compile "com.github.bumptech.glide:okhttp3-integration:1.5.0" 注意,沒有@arr
2.2 OKHttpClient 超時設置導致圖片無法加載坑:
因為Glide本身只負責圖片加載,網絡請求圖片數據由網絡框架決定。網絡請求一般會有超時的問題,坑的是OKHttp默認的超時時間太短了,如果不修改,網絡狀態比較差
就很容易請求超時,圖片自然就加載不出來。我設置的參數是60,60,30這個可以自己根據實際情況確定。
//這個是源碼里面的,默認超時時間,都是10s,10000ms
connectTimeout = 10_000;
readTimeout = 10_000;
writeTimeout = 10_000;
//手動設置超時時間
OkHttpClient client=new OkHttpClient.Builder()
.connectTimeout(HTTP_CONNECT_TIMEOUT, TimeUnit.SECONDS)
.readTimeout(HTTP_READ_TIMEOUT, TimeUnit.SECONDS)
.writeTimeout(HTTP_WRITE_TIMEOUT, TimeUnit.SECONDS)
.build;
2.3 Glide 查看 log 的坑:
如果你使用 Glide 經常出現圖片加載不出來或者加載有問題,你需要查看 Glide 本身的 log,不過這個必須通過 adb 命令開啟,詳情百度,需要注意如果是請求圖片問題,關注請求的 log,圖片加載||轉換的問題,關注圖片加載||轉換的log。
2.4 Glide 加載的圖片內存占用巨多的坑:
在使用 Glide 的第一個版本,OOM 問題一下子爆炸了,查看內存占用,使用 Universal-Image-Loader 的舊版本,App 占用50m~80m內存,
而使用 Glide 加載列表大圖的時候,突然猛增到120M+,低端機器自然很容易就 OOM 了。
Glide 有一個優點被很多人稱贊,就是它會根據圖片控件的大小對 Bitmap 進程縮放處理,適應控件的大小。
但是,如果是一個控件,在高分屏下,它的控件大小往往比實際圖片尺寸大很多,舉例一個控件:
長寬:1080400,圖片原始尺寸540200,如果不做任何設置,Glide 會把 bitmap 放大到控件大小,那么占用的內存就變成了原始大小四倍。。。
這個是 Glide 的特性,暫時沒有找到的方法修改。
臨時方案:為了避免Glide自動把bitmap放大,使用在加載圖片的時候,使用 .override(width, height) 限制圖片的寬高
2.5 Glide 使用過渡動畫造成圖片變形的 bug
Glide 默認會加載圖片的時候會有一個過渡效果,其原理是采用TransitionDrawable實現的。
但是這個和 placeHolder,一起使用,尤其是你的playHolder的尺寸比你加載的圖片要大,這個時候就會出現,你加載出來的圖片變形的問題。
很多人推薦使用 .dontAnimate() 解決問題,即去掉過渡動畫。
但是,如果產品一定需要加入過渡動畫,官方其實沒有提供完美的解決方案,Glide的作者之一在stackoverflow有回答並且給出了 github 的代碼。
http://stackoverflow.com/questions/32235413/glide-load-drawable-but-dont-scale-placeholder
https://github.com/TWiStErRob/glide-support/tree/master/src/glide4/java/com/bumptech/glide/supportapp
注意:我在使用的過程中發現,如果你的ImageView的type是center_crop 的話,那么必須確保你的place_holder默認圖片,長寬小於你加載的圖片,不然即使使用的了作者的代碼,任然會有變形的問題。