Glide4.9圖片框架(一)之加載圖片的常規(guī)使用方式

從接觸應(yīng)用層開發(fā)開始，圖片相關(guān)的功能一直都是Android開發(fā)人員比較關(guān)注的問題，從最開始的ImageLoader，到Square公司開發(fā)的Picasso圖片加載框架，再到如今的主流圖片加載框架Glide，其實我們都知道這幾個圖片框架的核心都離不開緩存，內(nèi)存緩存和磁盤緩存，兩者結(jié)合極大程度的提高了圖片的加載效率。但是我們從框架中學(xué)到遠不止這些，接下來我會分幾篇來分析下Glide框架到底為何能成為主流的圖片加載框架呢，首先看看它的一些常用的使用方式。

基本使用

本次我們使用glide4.9.0版本來講述功能和代碼，首先需要在gradle中配置：

repositories {
  mavenCentral()
  maven { url 'https://maven.google.com' }
}

dependencies {
  implementation 'com.github.bumptech.glide:glide:4.9.0'
  annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'
}

不要忘記了添加權(quán)限~

  <uses-permission android:name="android.permission.INTERNET"/>
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

混淆文件：

-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public class * extends com.bumptech.glide.module.AppGlideModule
-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}
# target API 低于 Android API 27
-dontwarn com.bumptech.glide.load.resource.bitmap.VideoDecoder
# for DexGuard only
-keepresourcexmlelements manifest/application/meta-data@value=GlideModule

常規(guī)加載圖片

Glide.with(this)
  .load(imgUrl)
  .into(imageView);

絕大多數(shù)加載圖片的功能都能用上面一行代碼解決，除了部分需要特定場景的需求，則需要用到Glide的其他功能，我們來看下加載的效果圖

加載圖片.gif

加載占位圖

Glide官方提供的占位圖有三種，分別是Placeholder，Error，F(xiàn)allBack。

  • Placeholder主要用于當(dāng)前我們加載的圖片還未成功顯示的時候作為當(dāng)前圖片的臨時顯示，如果請求圖片一直沒有成功，并且沒有設(shè)置Error和FallBack占位圖，那么Placeholder占位圖則會一直顯示。
  • Error則是用于當(dāng)我們的圖片加載失敗了會顯示，當(dāng)沒有設(shè)置FallBack的時候，那么Error占位圖則會一直顯示。
  • FallBack則是表示如果所加載的圖片文件或者URL為空，那么這個時候加載的就是FallBack占位圖，相當(dāng)于是view加載沒有獲取到圖片的url時候加載的默認圖。

Placeholder占位圖的使用

Glide.with(this)
  .load(url)
  .placeholder(new ColorDrawable(Color.GREEN))
  .into(view);

這里我們給Placeholder設(shè)置本地drawable資源和設(shè)置背景色都行，為了省時間我設(shè)置的背景色，我們來看看添加背景色占位圖后的效果，這里為了能夠清晰的看出效果，選擇了比較明亮的原諒色，正常的開發(fā)中使用較多的還是灰白色的占位圖。


Animation_palceholder.gif

Error占位圖的使用

Glide.with(this)
  .load(url)
  .error(new ColorDrawable(Color.RED))
  .into(view);

這里給Error設(shè)置的紅色，功能和Placeholder一樣，我關(guān)閉了網(wǎng)絡(luò)請求權(quán)限，顯示的則是一直請求出錯的占位圖。

Animation_error.gif

FallBack占位圖的使用

Glide.with(this)
  .load(url)
  .fallback(new ColorDrawable(Color.BLUE))
  .into(view);

RequestOptions

通常情況下，一般的鏈?zhǔn)秸{(diào)用能滿足我們的需求，但是glide也提供了這樣的功能，當(dāng)我們加載多個img時，必定需要多次去使用glide和設(shè)置加載的選項，那么如果這些選項存在公共的設(shè)置，應(yīng)該可以提取出來，那么這是options的作用了，單獨提取出來也使代碼更簡潔，我們來看看使用方式：

RequestOptions requestOptions = new RequestOptions()
                .error(new ColorDrawable(Color.RED))
                .centerCrop();

Glide.with(this)
  .load(url)
   .apply(requestOptions)
  .into(view);

TransitionOptions

TransitionOptions一般用于當(dāng)圖片加載完成后，如果設(shè)置了占位圖，那么是獲取到的圖片替換掉占位圖的一個過度動畫，例如淡入淡出，羨慕就嘗試使用淡入的效果設(shè)置加載完成后TransitionOptions的設(shè)置；看運行結(jié)果和Placeholder占位圖的綠色背景比較，明顯在設(shè)置圖片的時候有了 一個緩慢的過渡，這樣避免了圖片閃過的場景。

Glide.with(this)
    .load(url)
    .placeholder(new ColorDrawable(Color.GREEN))
    .transition(withCrossFade())
    .into(view);
Animation_Transition.gif

RequestBuilder

RequestBuilder相對比較靈活，它攜帶了一個圖片加載的幾個重要元素，包括請求的rul和常規(guī)的設(shè)置（占位圖，Options，縮略圖等），針對不同的需求，我們同樣也能單獨先創(chuàng)建RequestBuilder，然后再去load(url)和into(view)，看看下面的例子：

RequestBuilder<Drawable> requestBuilder = Glide.with(this).asDrawable();
requestBuilder.load(url).into(view);

Thumbnail

Thumbnail表示縮略圖，當(dāng)我們請求圖片還未能加載的時候，可以選擇優(yōu)先展示另一個縮略圖的圖片url，直到原圖片展示成功，這樣對于用戶來說是友好的。

Glide.with(this)
  .load(url)
  .thumbnail(Glide.with(this)
    .load(thumbnailUrl))
  .into(imageView);

如果加載的圖片只有一個url，而沒有縮略圖的url，那么你可以像下面這么做，在thumbnail里面設(shè)置圖片的寬高，則執(zhí)行加載指定寬高的縮略圖，最終效果如下，可以清晰的看到在顯示原圖之前有一個縮略圖的過渡，這樣看起來效果是不是比最初的直接load好多了呢？

   Glide.with(this)
            .load(url)
            .placeholder(new ColorDrawable(Color.GREEN))
            .transition(withCrossFade())
            .thumbnail(Glide.with(this).load(url).override(60))
            .into(imageView);
Animation_thumbnail.gif

SizeMultiplier

如果你想加載一張圖片的縮略圖，那么sizeMultiplier表示為這張圖縮小多少比例，如下設(shè)置為縮小四分之一

Glide.with(this)
  .load(url)
  .thumbnail(/*sizeMultiplier*/ 0.25f)
  .into(imageView);

請求失敗后再次請求

這種做法類似于thumbnail，當(dāng)mainurl請求失敗后，則會去請求twourl，當(dāng)我們同時設(shè)置了thumbnail請求，那么它只會在mainurl請求失敗后去再次請求；

Glide.with(this)
  .load(mainurl)
  .error(Glide.with(this)
      .load(twourl))
  .into(imageView);

Transformations

通常Transformations 用來對獲取的圖片資源進行裁剪、縮放、GIF動畫轉(zhuǎn)換等操作，一般情況下Glide提供了CenterCrop、FitCenter、CircleCrop的內(nèi)置轉(zhuǎn)換，單獨使用或者結(jié)合RequestOptions使用，如下使用：

Glide.with(this)
  .load(mainurl)
  .centerCrop()
  .into(imageView);

如果使用多個轉(zhuǎn)換，MultiTransformation可以省略，CustomTransformation為自定義的Transformation，MultiTransformation構(gòu)造函數(shù)的傳入?yún)?shù)的順序，決定了這些轉(zhuǎn)換的實現(xiàn)順序，如果效果重合，那么后面的參數(shù)效果會覆蓋前面的效果，那么需要如下使用方式：

Glide.with(fragment)
  .load(url)
  .transform(new MultiTransformation(new centerCrop(), new CustomTransformation())
  .into(imageView);

如果對圖片有特定的轉(zhuǎn)換需求，那么需要定制化transformation，Glide為我們提供了許多Transformation，假如我們需要對bitmap特定轉(zhuǎn)化，那么可以使用BitmapTransformation，使用方法如下：

public class CustomTrans extends BitmapTransformation {

    private static final String ID = "com.glide.demo.CustomTrans";
    private static String ID_BYTES = null;

    static {
        try {
            ID_BYTES = String.valueOf(ID.getBytes(STRING_CHARSET_NAME));
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
    }

    @Override
    public Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        if (toTransform.getWidth() == outWidth && toTransform.getHeight() == outHeight) {
            return toTransform;
        }
        //操作圖片，得到新的bitmap
        return Bitmap.createScaledBitmap(toTransform, outWidth, outHeight, /*filter=*/ true);
    }

    /**
     * 下面三個方法必須重寫,將當(dāng)前類的hashcode作為當(dāng)前轉(zhuǎn)換的bitmap的key
     * 便于存儲到磁盤和內(nèi)存，那么下次獲取則通過當(dāng)前key獲取緩存
     * @param
     */
    @Override
    public boolean equals(Object o) {
        return o instanceof CustomTrans;
    }

    @Override
    public int hashCode() {
        return ID.hashCode();
    }

    @Override
    public void updateDiskCacheKey(MessageDigest messageDigest) {
        messageDigest.update(Byte.parseByte(ID_BYTES));
    }
}

緩存設(shè)置

Glide.with(this)
  .load(mainurl)
  //跳過內(nèi)存緩存
  .skipMemoryCache(true)
  //緩存所有版本的圖像
  .diskCacheStrategy(DiskCacheStrategy.ALL)
  //跳過磁盤緩存
  .diskCacheStrategy(DiskCacheStrategy.NONE)
   //只緩存原來分辨率的圖片
  .diskCacheStrategy(DiskCacheStrategy.DATA)
  //只緩存最終的圖片
  .diskCacheStrategy(DiskCacheStrategy.RESOURCE)
  .into(imageView);

總結(jié)

關(guān)于一些常規(guī)的Glide使用方法暫時總結(jié)到這里，后面會陸續(xù)再補充的更全面，本篇文章也會陸續(xù)更新，下一章我們一起看下Glide源碼，一共會分幾個層面來解析，如有什么疑問也能提出，隨時修正和改進。最后放出官方文檔和源碼地址：

Github地址：https://github.com/bumptech/glide
官方文檔：http://bumptech.github.io/glide/
官方文檔中文版：https://muyangmin.github.io/glide-docs-cn/

Glide源碼之如何綁Activity的生命周期的

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容