Glide 一個專注於平滑滾動的圖片加載和緩存庫

這篇文章解決了Glide使用中的很多實際問題,原文出處:http://www.jianshu.com/p/4a3177b57949 

在圖片加載庫爛大街的今天,選擇一個適合自己使用的圖片加載庫已經成爲了每一個Android開發者的必經之路。現在市面上知名的圖片加載庫有UIL,Picasso,Volley ImageLoader,Fresco以及我們今天的主角Glide。它們各有千秋,不能評定誰一定比誰好,只能說哪一個更適合你。

我的理解

下面我來談一下個人對這些圖片加載庫的理解,如有錯誤,還望指教。

Universal Image Loader:一個強大的圖片加載庫,包含各種各樣的配置,最老牌,使用也最廣泛。

Picasso: Square出品,必屬精品。和OkHttp搭配起來更配呦!

Volley ImageLoader:Google官方出品,可惜不能加載本地圖片~

Fresco:Facebook出的,天生驕傲!不是一般的強大。

Glide:Google推薦的圖片加載庫,專注於流暢的滾動。

更多詳情請看stackoverflow上這個問題

Glide使用詳解--集成、配置、使用、特性:http://blog.csdn.net/qq_19711823/article/details/51243918

Picasso和Glide的比較:http://blog.csdn.net/u014651216/article/details/50780416

初試Glide

下面進入今天的主題,相信之前很多同學都看到過這篇介紹Glide的文章,中文版在這裏。文中從各個方面介紹和比較了Glide與Picasso,總體來說二者極爲相似,有着近乎相同的API的使用風格。但Glide在緩存策略和加載GIF方面略勝一籌。最後作者也極力推薦了這個庫。

而且據說在Google新出的Photos應用中,到處可見Glide的蹤跡。看到這裏,你是不是已經迫不及待的想試一試這個庫呢?就在你下定決心嘗試一記的時候,你又聽說Yelp app(據說是美國的大衆點評)也在使用這個吊炸天的庫。你的心中激動萬分,發四一定要使用這個庫。說幹就幹,打開Android Studio,在builde.gradle裏面添加上

compile 'com.github.bumptech.glide:glide:3.6.1'

然後全局搜索圖片加載的地方,全部換成了下面的代碼:

    Glide.with(mContext)
            .load(url)
            .placeholder(R.drawable.loading_spinner)
            .crossFade()
            .into(myImageView);

在經過漫長的編譯過程之後,再次打開APP,看到有着漸現效果的圖片呈現在你的面前,你不禁叫道:“wocao,真TM帥!爲什麼我以前沒有發現呢?”。

不過在你使用了幾天之後你會發現一些問題:

爲什麼 有的圖片第一次加載的時候只顯示佔位圖,第二次才顯示正常的圖片呢?

爲什麼 我總會得到類似You cannot start a load for a destroyed activity這樣的異常呢?

爲什麼 我不能給加載的圖片setTag()呢?

爲什麼?爲什麼?這麼NB的庫竟然會有這麼多的問題。沒錯,這就是我今天要講的重點。怎麼避免上面的問題發生。

一些解決方案

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 
            } 
        };

2.至於第二個問題,請記住一句話:不要再非主線程裏面使用Glide加載圖片,如果真的使用了,請把context參數換成getApplicationContext。更多的細節請參考這個issue

3.爲什麼不能設置Tag,是因爲你使用的姿勢不對哦。如何爲ImageView設置Tag呢?且聽我細細道來。
方案一:使用setTag(int,object)方法設置tag,具體用法如下:
Java代碼是醬紫的:

    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();
                }
   });

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

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

大功告成!

方案二:從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) {
     
        }
    }

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

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

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

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

又可以愉快的玩耍了,嘻嘻`(∩_∩)′。

方案三:寫一個繼承自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();
                }
   });

當你想清除掉所有的圖片加載請求時,這個方法可以幫助到你。

3.ListPreloader

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

一些基於Glide的優秀庫

1.glide-transformations

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

2.GlidePalette

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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章