Glide裏的一些坑

最近在項目中使用了Glide作爲圖片加載的方法，這裏整理了Glide的基本使用方法，以及在使用過程中可能遇到的問題的解決方案。使用Glide加載本地圖片的縮略圖的時候明顯感覺速度非常快，以致原本打算在滾動時暫停加載的打算沒有實施，因爲加載速度跟滾動速度差不多。但在加載網絡圖片的部分總感覺加載速度不如之前使用的Universal-Image-Loader，當然沒有精確的進行對比。圖片質量低於Picasso，但一般的應用，至少我的項目是足夠了。 
MarkDown不太會用，因此格式可能不是太好。

導入Glide庫

dependencies {
    compile 'com.github.bumptech.glide:glide:3.5.2'
    compile 'com.android.support:support-v4:22.0.0'
}

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

Glide的基本使用

Glide.with(context) 
      .load(url)        
      .placeholder(ResouceId)
      .error(ResouceId)
      .override(width, height)
      .into(imageview);

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

Glide的常用方式如上圖所示。with()可以接受Context，包括Activity和Fragment，如果設置參數爲Activity和Fragment，Glide圖片加載會和Activity/Fragment的生命週期一致。例如，onPause()時暫停圖片加載，onResume()時繼續圖片加載，onDestroy()時移除該Activity/Fragment發起的圖片加載請求。因此，建議使用Activity和Fragment作爲參數。

placeholder()設置佔位圖片，error設置加載錯誤圖片，接收參數爲資源文件的ID或者Drawable對象。 
override()設置圖片的大小，如果未設置則默認爲目標ImageView的大小。

Glide加載圖片的默認格式爲RGB_565，如果對圖片質量有更高的要求，可以實現GlideModule接口修改爲RGB_8888。

public class MyGlideModule implements GlideModule {

    @Override
    public void applyOptions(Context context, GlideBuilder builder) {
        // Apply options to the builder here.
        builder.setDecodeFormat(DecodeFormat.PREFER_ARGB_8888);
    }

    @Override
    public void registerComponents(Context context, Glide glide) {
        // register ModelLoaders here.
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

使用自定義的GlideModule實現類時，需要在混淆文件中添加如下代碼。

-keepnames class com.mypackage.MyGlideModule
# or more generally:
#-keep public class * implements com.bumptech.glide.module.GlideModule

• 1
• 2
• 3

• 1
• 2
• 3

最後，在AndroidManifest.xml中配置meta-data讓Glide可以找到GlideModule實現類。

<manifest ...>
    <!-- ... permissions -->
    <application ...>
        <meta-data
            android:name="com.mypackage.MyGlideModule"
            android:value="GlideModule" />
        <!-- ... activities and other components -->
    </application>
</manifest>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

Glide的磁盤緩存

Glide對需要下載的圖片進行相應尺寸的緩存，當圖片加載請求200*200時，則緩存一張200*200的緩存圖片，如果再有同一張圖片但要求是300*300的，Glide會重新下載並緩存一張300*300的緩存圖片。 
如果不樂意，也可以使用如下方法。

Glide.with(context)
     .load(url)
     .diskCacheStrategy(DiskCacheStrategy.ALL)
     .into(imageview);

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

這個方法強行要求Glide在緩存200*200的時候順便緩存一張原圖大小的圖片。在遇到300*300的時候，就會使用全尺寸的圖片去調整爲300*300的圖片進行顯示，而不用重新下載。

Glide更厲害的地方

Glide可以加載Gif動畫，但是傳說會消耗很多內存。用法同加載普通圖片。

Glide可以自動創建本地視頻的縮略圖。Glide可以解碼Android支持的本地視頻，並生成一張靜態的圖片。

Glide縮略圖支持。可以對同一個imageview同時下載縮略圖和原圖，先加載縮略圖，再加載原圖。以原圖1/10的縮略圖爲例。

Glide.with(yourFragment).load(yourUrl).thumbnail(0.1f).into(yourView)

• 1

• 1

也可以使用縮略圖地址發起的請求作爲.thumbnail()的參數。

在ViewPager中實現先加載縮略圖再加載原圖的效果，可以在PagerAdapter的instantiateItem()方法中使用Glide加載縮略圖，此時會加載當前頁的縮略圖和前後兩頁的縮略圖，然後setPrimaryItem()中使用Glide加載原圖時會出現閃一下的問題。可以通過以下代碼進行解決。

            Glide.with(***Activity.this)
                    .load(url)
                    .placeholder(currentItem.getDrawable())
                    .dontAnimate()
                    .into(currentItem);

Glide會出一些奇怪的bug

（原文出自http://www.jianshu.com/p/4a3177b57949，感恩） 
1.有的圖片第一次加載只顯示佔位圖，第二次才顯示正常的圖片。 
如果使用圓形ImageView庫或者一些自定義的圓形ImageView，並設置佔位圖片，就會遇到該情況。 
方案一: 不設置佔位；這個方案可以解決問題，但是在加載圖片失敗的時候就比較尷尬。 
方案二：使用Glide的Transformation API自定義圓形Bitmap的轉換。 
方案三：使用下面的代碼加載圖片：

Glide.with(mContext)
    .load(url) 
    .placeholder(R.drawable.loading_spinner)
    .into(new SimpleTarget<Bitmap>(width, height) {
        @Override 
        public void onResourceReady(Bitmap bitmap, GlideAnimation anim) {
            // setImageBitmap(bitmap) on CircleImageView 
        } 
    });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

該方法在listview上覆用會導致加載錯位,如果在listview中加載CircleImageView，請不要使用該方法。

方案四：不使用Glide的默認動畫；這個方法最簡單實用。

Glide.with(mContext)
    .load(url) 
    .dontAnimate()
    .placeholder(R.drawable.loading_spinner)
.into(circleImageview);

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

2.我總會得到類似You cannot start a load for a destroyed activity這樣的異常呢？

請記住一句話：不要再非主線程裏面使用Glide加載圖片，如果真的使用了，請把context參數換成getApplicationContext。

3.爲什麼不能設置Tag， 
在Glide加載圖片的過程中會設置tag，可能有衝突。在Glide加載方法之後再進行tag的設置即可解決這個問題。Glide源碼如下。

public Request getRequest() {
        Object tag = this.getTag();
        Request request = null;
        if(tag != null) {
            if(!(tag instanceof Request)) {
                throw new IllegalArgumentException("You must not call setTag() on a view Glide is targeting");
            }

        request = (Request)tag;
    }

    return request;
}<code><pre>

方案一：使用setTag(int,object)方法設置tag,具體用法如下：

Glide.with(context).load(urls.get(i).getUrl()).fitCenter().into(imageViewHolder.image);
        imageViewHolder.image.setTag(R.id.image_tag, i);
        imageViewHolder.image.setOnClickListener(new View.OnClickListener() {
            @Override
                int position = (int) v.getTag(R.id.image_tag);
                Toast.makeText(context, urls.get(position).getWho(), Toast.LENGTH_SHORT).show();
            }
        });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

同時在values文件夾下新建ids.xml，添加

<item name="image_tag" type="id"/>

• 1

• 1

方案二：從Glide的3.6.0之後，新添加了全局設置的方法。具體方法如下： 
先實現GlideMoudle接口，全局設置ViewTaget的tagId:

public class MyGlideMoudle implements GlideModule{
    @Override
    public void applyOptions(Context context, GlideBuilder builder) {
        ViewTarget.setTagId(R.id.glide_tag_id);
    }

    @Override
    public void registerComponents(Context context, Glide glide) {

    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

同樣，也需要在ids.xml下添加id

<item name="glide_tag_id" type="id"/>

• 1

• 1

最後在AndroidManifest.xml文件裏面添加

<meta-data
    android:name="com.yourpackagename.MyGlideMoudle"
    android:value="GlideModule" />

• 1
• 2
• 3

• 1
• 2
• 3

方案三：寫一個繼承自ImageViewTaget的類，複寫它的get/setRequest方法。

Glide.with(context).load(urls.get(i).getUrl()).fitCenter().into(new ImageViewTarget<GlideDrawable>(imageViewHolder.image) {
            @Override
            protected void setResource(GlideDrawable resource) {
                imageViewHolder.image.setImageDrawable(resource);
            }

            @Override
            public void setRequest(Request request) {
                imageViewHolder.image.setTag(i);
                imageViewHolder.image.setTag(R.id.glide_tag_id,request);
            }

            @Override
            public Request getRequest() {
                return (Request) imageViewHolder.image.getTag(R.id.glide_tag_id);
            }
        });

        imageViewHolder.image.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = (int) v.getTag();
                Toast.makeText(context, urls.get(position).getWho(), Toast.LENGTH_SHORT).show();
            }
        });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

一些使用技巧

1.Glide.with(context).resumeRequests()和 Glide.with(context).pauseRequests() 
當列表在滑動的時候，調用pauseRequests()取消請求，滑動停止時，調用resumeRequests()恢復請求。這樣是不是會好些呢？

2.Glide.clear() 
當你想清除掉所有的圖片加載請求時，這個方法可以幫助到你。

3.ListPreloader 
如果你想讓列表預加載的話，不妨試一下ListPreloader這個類。

一些基於Glide的優秀庫

1.glide-transformations 
一個基於Glide的transformation庫，擁有裁剪，着色，模糊，濾鏡等多種轉換效果，讚的不行不行的~~

2.GlidePalette 
一個可以在Glide加載時很方便使用Palette的庫。