零、前言
本文所使用的Glide版本為3.7.0
一、簡介
Glide，一個被google所推薦的圖片加載庫，作者是bumptech。這個庫被廣泛運用在google的開源項目中，包括2014年的google I/O大會上發布的官方app。（PS：眾所周知的簡介就到此為止了）Glide 對於 Android SDK 的最低要求是 API level 10Glide滑行的意思，可以看出這個庫的主旨就在於讓圖片加載變的流暢。現在被廣泛使用，當然還是有很多開發者使用Square公司的picasso，也有兩個庫的對比原文鏈接： http://inthecheesefactory.com/blog/get-to-know-glide-recommended-by-google/en譯文鏈接： http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0327/2650.html二、使用
（一）導入
在AndroidStudio上添加依賴非常簡單dependencies {
compile 'com.github.bumptech.glide:glide:3.7.0'
compile 'com.android.support:support-v4:23.2.1'
}
<dependency>
<groupId>com.github.bumptech.glide</groupId>
<artifactId>glide</artifactId>
<version>3.7.0</version>
</dependency>
<dependency>
<groupId>com.google.android</groupId>
<artifactId>support-v4</artifactId>
<version>r7</version>
</dependency>
（二）基礎使用
基本方法
Glide的一個完整的請求至少需要三個參數，代碼如下：String url = "http://img1.dzwww.com:8080/tupian_pl/20150813/16/7858995348613407436.jpg";
ImageView imageView = (ImageView) findViewById(R.id.imageView);
Glide.with(context)
.load(url)
.into(imageView);
- with(Context context) - 需要上下文，這里還可以使用 Activity、FragmentActivity、android.support.v4.app.Fragment、android.app.Fragment 的對象。將 Activity/Fragment 對象作為參數的好處是，圖片的加載會和 Activity/Fragment 的生命周期保持一致，例如：onPaused 時暫停加載，onResume 時又會自動重新加載。所以在傳參的時候建議使用 Activity/Fragment 對象，而不是 Context。
- load(String url) - 這里我們所使用的一個字符串形式的網絡圖片的 URL，后面會講解 load() 的更多使用方式
- into(ImageView imageView) - 你需要顯示圖片的目標 ImageView
占位圖設置
偶爾出現圖片加載慢或者加載不出來的情況是難以避免的，所以為了 UI 能好看一些，我們會使用占位圖。Glide 也為我們提供這種方法 placeHolder() 和 error()String url = "http://img1.dzwww.com:8080/tupian_pl/20150813/16/7858995348613407436.jpg";
ImageView imageView = (ImageView) findViewById(R.id.imageView);
Glide.with(context)
.load(url)
.placeholder(R.drawable.place_image)//圖片加載出來前，顯示的圖片
.error(R.drawable.error_image)//圖片加載失敗后，顯示的圖片
.into(imageView);
注：這里需要注意一點，placeholder() 和 error() 的參數都是只支持 int 和 Drawable 類型的參數，這種設計應該是考慮到使用本地圖片比網絡圖片更加合適做占位圖。
縮略圖
Glide 的縮略圖功能在這里不得不說，和占位圖略有不同，占位圖必須使用資源文件才行，而縮略圖是動態的占位圖可以從網絡中加載。縮略圖會在世紀請求加載完成或者處理完之后才顯示。在原始圖片到達之后，縮略圖不會取代原始圖片，只會被抹除。Glide 為縮略圖提供了2種不同的加載方式，比較簡單的方式是調用 thumbnail() 方法，參數是 float 類型，作為其倍數大小。例如，你傳入 0.2f 作為參數，Glide 將會顯示原始圖片的20%的大小，如果原圖是 1000x1000 的尺寸，那么縮略圖將會是 200x200 的尺寸。為縮略圖明顯比原圖小得多，所以我們需要確保 ImageView 的 ScaleType 設置的正確。Glide.with( context )
.load( url )
.thumbnail( 0.2f )
.into( imageView );
注：應用於請求的設置也將應用於縮略圖。使用 thumbnail() 方法來設置是簡單粗暴的，但是如果縮略圖需要通過網絡加載相同的全尺寸圖片，就不會很快的顯示了。所以 Glide 提供了另一種防止去加載縮略圖，先看代碼
private void loadImageThumbnailRequest(){
// setup Glide request without the into() method
DrawableRequestBuilder<String> thumbnailRequest = Glide.with( context ).load( url );
// pass the request as a a parameter to the thumbnail request
Glide.with( context )
.load( url )
.thumbnail( thumbnailRequest )
.into( imageView );
}
動畫開關
動畫效果可以讓圖片加載變得更加的平滑，crossFade() 方法強制開啟 Glide 默認的圖片淡出淡入動畫，當前版本3.7.0是默認開啟的。crossFade() 還有一個重載方法 crossFade(int duration)。可以控制動畫的持續時間，單位ms。動畫默認的持續時間是300ms。既然可以添加動畫，那肯定就可以設置沒有任何淡出淡入效果，調用 dontAnimate()Glide.with(context)
.load(url)
.crossFade()//或者使用 dontAnimate() 關閉動畫
.placeholder(R.drawable.place_image)
.error(R.drawable.error_image)
.into(imageView);
圖片大小與裁剪
在項目開發過程中，指定圖片顯示大小長長可能用到，畢竟從服務器獲取的圖片不一定都是符合設計圖的標准的。我們在這里就可以使用 override(width,height) 方法，在圖片顯示到 ImageView 之前，重新改變圖片大小。Glide.with(context)
.load(url)
.override(width,height)//這里的單位是px
.into(imageView);
注：其實 Glide 的 CenterCrop() 和 FitCenter() 這兩個方法分別對應 ImageView 的 ScaleType 屬性中的 CENTER_CROP 和 FIT_CENTER 命名基本一致。
圖片的緩存處理
為了更快的加載圖片，我們肯定希望可以直接拿到圖片，而不是進行網絡請求，所以我們需要緩存。Glide 通過使用默認的內存和磁盤緩存來避免不必要的網絡請求，之后我們再詳細的去看它的實現。內存緩存
內存緩存是 Glide 默認幫我們做了的，除非你不需要，可以調用 skipMemoryCache(true) 告訴 Glide 跳過內存緩存。這樣 Glide 就不會把這張圖片放到內存緩存中，該方法只影響內存緩存。（不要問調用skipMemoryCache(false)的問題，Glide 是默認將圖片放入內存緩存中的）磁盤緩存
磁盤緩存也是默認開啟的，當然也是可以關閉的，不過關閉的方式略微有點不一樣。Glide.with(context)
.load(url)
.skipMemoryCache(true)
.diskCacheStrategy( DiskCacheStrategy.NONE )
.into(imageView);
自定義磁盤緩存行為
使用 DiskCacheStrategy 可以為 Glide 配置磁盤緩存行為。Glide 的磁盤緩存比較復雜，這也是在圖片加載可以比 Picasso 的原因（之一）。Picasso 只緩存了全尺寸的圖片，而 Glide 的不同之處在於，Glide 不僅緩存了全尺寸的圖，還會根據 ImageView 大小所生成的圖也會緩存起來。比如，請求一個 800x600 的圖加載到一個 400x300 的 ImageView 中，Glide默認會將這原圖還有加載到 ImageView 中的 400x300 的圖也會緩存起來。DiskCacheStrategy 的枚舉意義：這只是舉個例子而已
- DiskCacheStrategy.NONE 什么都不緩存
- DiskCacheStrategy.SOURCE 只緩存全尺寸圖
- DiskCacheStrategy.RESULT 只緩存最終的加載圖
- DiskCacheStrategy.ALL 緩存所有版本圖（默認行為）
Glide.with(context)
.load(url)
.diskCacheStrategy( DiskCacheStrategy.SOURCE )
.into(imageView);
圖片請求的優先級
同一時間加載多個圖片，App 將難以避免這種情況。如果這個時候我們希望用戶的體驗更好，往往會選擇先加載對於用戶更加重要的圖片。Glide 可以調用 .priority() 方法配合 Priority 枚舉來設置圖片加載的優先級。//設置 HIGH 優先級
Glide.with( context )
.load( highPriorityImageUrl )
.priority (Priority.HIGH )
.into( imageView );
//設置 LOW 優先級
Glide.with( context )
.load( lowPriorityImageUrl )
.priority( Priority.LOW )
.into( imageView );
這里有一點需要注意，優先級並不是完全嚴格遵守的。Glide 將會用他們作為一個准則，盡可能的處理這些請求，但是不能保證所有的圖片都會按照所有要求的順序加載。
- Priority.LOW
- Priority.NORMAL
- Priority.HIGH
- Priority.IMMEDIAT
顯示 Gif 和 Video
顯示 GIf 對於 Glide 來說一個比較特別的功能（至少 Picasso 暫時還不行）而且使用起來非常簡單String gifUrl = "http://i2.mhimg.com/M00/0E/AE/CgAAilTPWJ2Aa_EIACcMxiZi5xE299.gif";
Glide.with( context )
.load( gifUrl )
.placeholder（ R.drawable.default ）
.error( R.drawable.error )
.into( imageView );
Glide.with( context )
.load( gifUrl )
.asGif()
.error( R.drawable.error )
.into( imageView );
Glide.with( context )
.load( gifUrl )
.asBitmap()
.error( R.drawable.error )
.into( imageView );
String filePath = "/storrage/emulated/0/Pictures/video.mp4";
Glide.with( context )
.load( Uri.fromFile( new File( filePath ) ) )
.into( imageView );
（三）進階使用
Target篇
到現在為止，我們所涉及到的代碼都是直接加載圖片到 ImageView 中。Glide 隱藏做了所有的網絡請求和后台的線程處理，圖片准備好之后切回到 UI 線程刷新 ImageView。也就是說 ImageView 在我們代碼的鏈式結構中成為了最后一步，但是如果我們需要獲取到 Bitmap 本身的話我們就需要用到 Target 了。Target 其實就是整個圖片的加載的生命周期，所以我們就可以通過它在圖片加載完成之后獲取到 Bitmap。
其實對於 Target 可以簡單的理解為回調，本身就是一個 interface，Glide本身也為我們提供了很多 Target
所有Targets
SimpleTarget
直接上代碼private SimpleTarget<Bitmap> mSimpleTarget = new SimpleTarget<Bitmap>() {
@Override
public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> animation) {
mImageView.setImageBitmap(resource);
}
};
private void loadImageSimpleTarget() {
Glide.with( thi s)
.load( mUrl )
.asBitmap()
.into( mSimpleTarget );
}
private SimpleTarget<Bitmap> mSimpleTarget = new SimpleTarget<Bitmap>(500,500) {
@Override
public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> animation) {
mImageView.setImageBitmap(resource);
}
};
Glide.with(mContext.getApplicationContext())
.load(mUrl)
.asBitmap()
.into(target);
ViewTarget
當我們使用 Custom View 時，Glide 並不支持加載圖片到自定義 view 中的，使用 ViewTarget 更容易實現。public class CustomView extends FrameLayout {
private ImageView mImageView;
public CustomView(Context context) {
super(context);
}
public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onFinishInflate() {
super.onFinishInflate();
mImageView = new ImageView(getContext());
addView(mImageView , LayoutParams.MATCH_PARENT , LayoutParams.MATCH_PARENT);
}
public void setImage(Drawable drawable){
mImageView.setImageDrawable(drawable);
}
}
public void loadImageTarget(Context context){
CustomView mCustomView = (CustomView) findViewById(R.id.custom_view);
ViewTarget viewTarget = new ViewTarget<CustomView,GlideDrawable>( mCustomView ) {
@Override
public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
this.view.setImage(resource);
}
};
Glide.with(context)
.load(mUrl)
.into(viewTarget);
}
Transformations篇
圖片顯示之前我們可能還需要對圖片進行處理操作，比如：圖片切圓角，灰階處理等等；這些需求我們通過 Transformations 操作 bitmap 來實現，我們可以修改圖片的任意屬性：尺寸，范圍，顏色，像素位置等等。其實我們之前已經提到過兩個 Transformation 了，即 fitCenter 和 centerCrop ，這兩個是 Glide 已經實現的。接下來就要講講怎么樣來實現自己的 Transformation ，我們需要創建一個類去實現 Transformation 接口，但是要實現這個方法還是比較復雜的，接口中 transform 方法提供的參數 Resource<T> resource 不是那么好處理的。如果你只是想要對圖片（不是 Gif 和 video）做常規的 bitmap 轉換，我們推薦你使用抽象類 BitmapTransformation。它簡化了很多的實現，這應該能覆蓋 95% 的應用場景啦。下面的代碼實現了對圖片切圓角的操作，其中 getId() 方法描述了這個 Transformation 的唯一標識，為避免意外我們需要確保它是唯一的。public class RoundTransformation extends BitmapTransformation {
private float radius = 0f;
public RoundTransformation(Context context) {
this(context, 4);
}
public RoundTransformation(Context context, int px) {
super(context);
this.radius = px;
}
@Override
protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
return roundCrop(pool, toTransform);
}
private Bitmap roundCrop(BitmapPool pool, Bitmap source) {
if (source == null)
return null;
Bitmap result = pool.get(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
if (result == null) {
result = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
}
Canvas canvas = new Canvas(result);
Paint paint = new Paint();
paint.setShader(new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
paint.setAntiAlias(true);
RectF rectF = new RectF(0f, 0f, source.getWidth(), source.getHeight());
canvas.drawRoundRect(rectF, radius, radius, paint);
return result;
}
@Override
public String getId() {
return getClass().getName() + Math.round(radius);
}
}
Glide.with(context)
.load(mUrl)
.transform(new RoundTransformation(context , 20))
//.bitmapTransform( new RoundTransformation(context , 20) )
.into(mImageView);
Glide.with(context)
.load(mUrl)
.transform(new RoundTransformation(context , 20) ， new RotateTransformation(context , 90f))
.into(mImageView);
public class RotateTransformation extends BitmapTransformation {
private float rotateRotationAngle = 0f;
public RotateTransformation(Context context, float rotateRotationAngle) {
super( context );
this.rotateRotationAngle = rotateRotationAngle;
}
@Override
protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
Matrix matrix = new Matrix();
matrix.postRotate(rotateRotationAngle);
return Bitmap.createBitmap(toTransform, 0, 0, toTransform.getWidth(), toTransform.getHeight(), matrix, true);
}
@Override
public String getId() {
return getClass().getName() + Math.round(rotateRotationAngle);
}
}
注:這里需要注意一點 .centerCrop() 和 .fitCenter() 也都是 Transformation 所以也是遵循同時使用多個 Transformation 的規則的，即：當你使用了自定義轉換后你就不能使用 .centerCrop() 或 .fitCenter() 了。這里有一個 GLide Transformations 的庫，它提供了很多 Transformation 的實現，非常值得去看，不必重復造輪子對吧！
glide-transformations
這個庫有兩個不同的版本，擴展版本包含了更多的 Transformation ，它是通過設備的 GPU 來計算處理的，需要有額外的依賴，所以這兩個版本的設置有一點不同。還是根據需要再決定使用那個版本吧！
Animate篇
從圖像到圖像的平滑過渡是非常重要，Glide 中有一個標准動畫去柔軟的在你的 UI 中改變，但是我們現在希望設置自己的動畫。<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="@android:integer/config_longAnimTime"
android:fromXScale="0.1"
android:fromYScale="0.1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1"
android:toYScale="1"/>
</set>
Glide.with(context)
.load(mUrl)
.transform(new RoundTransformation(this , 20))
.animate( R.anim.zoom_in )
.into(mImageView);
ViewPropertyAnimation.Animator animator = new ViewPropertyAnimation.Animator() {
@Override
public void animate(View view) {
view.setAlpha( 0f );
ObjectAnimator fadeAnim = ObjectAnimator.ofFloat( view, "alpha", 0f, 1f );
fadeAnim.setDuration( 2500 );
fadeAnim.start();
}
};
Glide.with(context)
.load(mUrl)
.animate( animator )
.into(viewTarget);
Modules篇
Glide 的 Module 是一個可以全局改變 Glide 的行為的東西，為了定制 Glide 的行為我們要去實現 interface GlideModule 來寫我們自己的代碼。public class ExampleModule implements GlideModule{
@Override
public void applyOptions(Context context, GlideBuilder builder) {
// todo
}
@Override
public void registerComponents(Context context, Glide glide) {
// todo
}
}
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.mrtrying.demoglide">
<application>
<meta-data
android:name="com.mrtrying.demoglide.module.ExampleModule"
android:value="GlideModule" />
...
</application>
...
</manifest>
TIPS這個過程走通了，接下來我們來看看是怎么自定義的。applyOptions(Context context, GlideBuilder builder) 中有兩個參數， 我們通過使用 GlideBuilder 來實現我們的需求。先看看 GlideBuilder 中可用的方法
- 我們需要將 android:name 屬性改成 包名+類名 的形式，這樣的引用才是正確的。如果你想刪掉 Glide Module，只需要刪除在 AndroidManifest.xml 中的聲明就可以了。Java 類可以保存，說不定以后會用呢。如果它沒有在 AndroidManifest.xml 中被引用，那它不會被加載或被使用。
- 定制 module 的話 Glide 會有這樣一個優點：你可以同時聲明多個 Glide module。Glide 將會（沒有特定順序）得到所有的聲明 module。因為你當前不能定義順序，請確保定制不會引起沖突！
- .setMemoryCache(MemoryCache memoryCache)
- .setBitmapPool(BitmapPool bitmapPool)
- .setDiskCache(DiskCache.Factory diskCacheFactory)
- .setDiskCacheService(ExecutorService service)
- .setResizeService(ExecutorService service)
- .setDecodeFormat(DecodeFormat decodeFormat)
增加 Glide 的圖片質量
在 Android 中有兩個主要的方法對圖片進行解碼：ARGB_8888 和 RGB_565 。前者為每個像素使用4個字節，后者每個像素僅使用2個字節。ARGB_8888 的有時就是圖像質量更高以及能儲存一個 alpha 通道。 Picasso 使用的就是 ARGB_8888 ， Glide 默認使用低質量的 RGB_565 ，但是現在你就可以使用 Glide module 來改變圖片解碼規則。就象這樣public class QualityModule implements GlideModule{
@Override
public void applyOptions(Context context , GlideBuilder builder){
builder.setDecodeFormat(DecodeFormat.PREFER_ARGB_8888);
}
@Override
public void registerComponents(Context context , Glide glide){
// nothing to do here
}
}
dependencies{
//...
// Glide
compile 'com.github.bumptech.glide:glide:3.7.0'
// Glide's OkHttp Integration
compile 'com.github.bumptech.glide:okhttp-integration:1.4.0@aar'
compile 'com.squareup.okhttp:okhttp:3.2.0'
}