文章目錄

一、前言
二、簡介
三、基本用法
- 第一步：調用 Glide.with() 方法創建加載圖片的實例
- 第二步：調用 load() 方法指定待加載的圖片資源
- 第三步：調用 into() 方法綁定顯示控件
- 總結
四、擴展用法
- 1、占位圖
- 2、指定圖片格式
- 3、指定圖片大小

Android Glide圖片加載框架系列文章

Android Glide圖片加載框架（一）基本用法

Android Glide圖片加載框架（二）源碼解析之with()

Android Glide圖片加載框架（二）源碼解析之load()

Android Glide圖片加載框架（二）源碼解析之into()

Android Glide圖片加載框架（三）緩存機制

一、前言

現在Android上的圖片加載框架非常成熟，像UniversalImageLoader、Glide、Picasso、Fresco等等，每一個功能都十分強大，他們使用場景有重合的，也有不同的地方，從框架的易用性、功能以及包的大小多方面考慮，還是選擇Glide來進行深入的研究，這也是Google官方推薦使用的圖片加載框架。

下面我們通過一系列文章，由淺入深來了解Glide的用法。

二、簡介

Glide是Google推薦的用于Android平臺上的圖片加載和緩存函數庫。這個庫被廣泛應用在Google的開源項目中，Glide為包含圖片的滾動列表做了盡可能流暢的優化。除了靜態圖片，Glide也支持GIF格式圖片的顯示。Glide提供了靈活的API可以讓開發者方便地替換下載圖片所用的網絡函數庫，默認情況下，它使用HttpUrlConnection作為網絡請求模塊，開發者也可以根據自己項目的實際需求靈活使用Google的Volley或者Square的OkHttp等函數庫進行替換。

目前Glide最新版本是4.11.0，但是我們下面以4.8.0版本為例進行講解，首先在項目的build.gradle文件中添加如下依賴：

dependencies {implementation 'com.github.bumptech.glide:glide:4.8.0'
}

另外，Glide中需要用到網絡功能，因此你還得在AndroidManifest.xml中聲明一下網絡權限才行：

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

就是這么簡單，然后我們就可以自由地使用Glide中的任意功能了。

三、基本用法

首先打開項目的布局文件，在布局當中加入一個Button和一個ImageView，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><Buttonandroid:layout_width="match_parent"android:layout_height="50dp"android:id="@+id/btn_load"android:layout_margin="10dp"android:text="Load Image"/><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_margin="10dp"android:id="@+id/img"/>
</LinearLayout>

為了讓用戶點擊Button的時候能夠將剛才的圖片顯示在ImageView上，我們需要修改MainActivity中的代碼，如下所示：

public class MainActivity extends AppCompatActivity {Button btn;ImageView img;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);init();}private void init(){btn = (Button)findViewById(R.id.btn_load);img = (ImageView)findViewById(R.id.img);btn.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {btnLoad();}});}private void btnLoad(){String url = "http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg";Glide.with(this).load(url).into(img);}
}

沒錯，就是這么簡單。現在我們來運行一下程序，效果如下圖所示：

在這里插入圖片描述
可以看到，一張網絡上的圖片已經被成功下載，并且展示到ImageView上了。

而我們到底做了什么？實際上核心的代碼就只有這一行而已：

Glide.with(this).load(url).into(img);

千萬不要小看這一行代碼，實際上僅僅就這一行代碼，你已經可以做非常非常多的事情了，包括加載網絡上的圖片、加載手機本地的圖片、加載應用資源中的圖片等等。

下面我們就來詳細解析一下這行代碼。

第一步：調用 Glide.with() 方法創建加載圖片的實例

with()方法可以接收 Context、Activity或者Fragment類型的參數 。也就是說我們選擇的范圍非常廣，不管是在Activity還是Fragment中調用with()方法，都可以直接傳this。那如果調用的地方既不在Activity中也不在Fragment中呢？也沒關系，我們可以獲取當前應用程序的 ApplicationContext ，傳入到with()方法當中。

注意： with()方法中傳入的實例會決定Glide加載圖片的生命周期 ，如果傳入的是Activity或者Fragment的實例，那么當這個Activity或Fragment被銷毀的時候，圖片加載也會停止。如果傳入的是ApplicationContext，那么只有當應用程序被殺掉的時候，圖片加載才會停止。

在這里插入圖片描述

第二步：調用 load() 方法指定待加載的圖片資源

Glide支持加載各種各樣的圖片資源，包括 網絡圖片、本地圖片、應用資源、二進制流、Uri對象 等等。因此load()方法也有很多個方法重載，除了我們剛才使用的加載一個字符串網址之外，你還可以這樣使用load()方法：

在這里插入圖片描述

第三步：調用 into() 方法綁定顯示控件

這個方法就很簡單了，我們希望讓圖片顯示在哪個ImageView上，把這個ImageView的實例傳進去就可以了。當然，into()方法不僅僅是只能接收ImageView類型的參數，還支持很多更豐富的用法，不過那個屬于高級技巧，我們會在后面的文章當中學習。

在這里插入圖片描述

總結

那么回顧一下Glide最基本的使用方式，其實就是關鍵的三步走：

with() -> load() -> into()

熟記這三步，你就已經入門Glide了。

四、擴展用法

現在我們來學一些Glide的擴展內容。其實剛才所學的三步走就是Glide最核心的東西，而我們后面所要學習的所有東西都是在這個三步走的基礎上不斷進行擴展而已。

1、占位圖

觀察剛才加載網絡圖片的效果，你會發現，點擊了Load Image按鈕之后，要稍微等一會圖片才會顯示出來。這其實很容易理解，因為從網絡上下載圖片本來就是需要時間的。那么我們有沒有辦法再優化一下用戶體驗呢？當然可以，Glide提供了各種各樣非常豐富的API支持，其中就包括了 占位圖功能 。

顧名思義，占位圖就是指在圖片的加載過程中，我們先顯示一張臨時的圖片，等圖片加載出來了再替換成要加載的圖片。

下面我們就來學習一下Glide占位圖功能的使用方法，首先我事先準備好了一張default_image.png圖片，用來作為占位圖顯示。然后修改Glide加載部分的代碼，如下所示：

String url = "http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg";RequestOptions options = new RequestOptions();
options.placeholder(R.mipmap.default_image);Glide.with(this).load(url).apply(options).into(img);

沒錯，就是這么簡單。首先我們初始化RequestOptions對象，調用該對象的placeholder()方法，然后將占位圖片的資源id傳入到這個方法中，最后在load()方法之后調用apply()方法，將RequestOptions實例化對象傳進來即可。

不過如果你現在重新運行一下代碼并點擊Load Image，很可能是根本看不到占位圖效果的。因為Glide有非常強大的緩存機制，我們剛才加載那張必應美圖的時候Glide自動就已經將它緩存下來了，下次加載的時候將會直接從緩存中讀取，不會再去網絡下載了，因而加載的速度非常快，所以占位圖可能根本來不及顯示。

因此這里我們還需要稍微做一點修改，來讓占位圖能有機會顯示出來，修改代碼如下所示：

String url = "http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg";RequestOptions options = new RequestOptions();
options.placeholder(R.mipmap.default_image);
options.diskCacheStrategy(DiskCacheStrategy.NONE);Glide.with(this).load(url).apply(options).into(img);

可以看到，我們調用了RequestOptions對象的diskCacheStrategy()方法，并傳入DiskCacheStrategy.NONE參數，這樣就可以禁用掉Glide的緩存功能。

關于Glide緩存方面的內容我們將會在后面的文章進行詳細的講解，這里只是為了測試占位圖功能而加的一個額外配置，暫時你只需要知道禁用緩存必須這么寫就可以了。

現在重新運行一下代碼，效果如下圖所示：

在這里插入圖片描述
可以看到，當點擊Load Image按鈕之后會立即顯示一張占位圖，然后等真正的圖片加載完成之后會將占位圖替換掉。

當然，這只是占位圖的一種，除了這種加載占位圖之外，還有一種異常占位圖。異常占位圖就是指，如果因為某些異常情況導致圖片加載失敗，比如說手機網絡信號不好，這個時候就顯示這張異常占位圖。

異常占位圖的用法相信你已經可以猜到了，首先準備一張error.jpg圖片，然后修改Glide加載部分的代碼，如下所示：

String url = "http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg";RequestOptions options = new RequestOptions();
options.placeholder(R.mipmap.default_image);
options.error(R.mipmap.error);
options.diskCacheStrategy(DiskCacheStrategy.NONE);Glide.with(this).load(url).apply(options).into(img);

很簡單，我們調用了RequestOptions對象的error()方法就可以指定異常占位圖了。

現在你可以將圖片的url地址修改成一個不存在的圖片地址，或者干脆直接將手機的網絡給關了，然后重新運行程序，效果如下圖所示：

在這里插入圖片描述
這樣我們就把Glide提供的占位圖功能都掌握了。

2、指定圖片格式

我們還需要再了解一下Glide另外一個強大的功能，那就是 Glide是支持加載GIF圖片 的。這一點確實非常牛逼，因為相比之下Jake Warton曾經明確表示過，Picasso是不會支持加載GIF圖片的。

而使用 Glide加載GIF圖并不需要編寫什么額外的代碼，Glide內部會自動判斷圖片格式 。比如這是一張GIF圖片的URL地址：

http://p1.pstatp.com/large/166200019850062839d3

我們只需要將剛才那段加載圖片代碼中的URL地址替換成上面的地址就可以了，現在重新運行一下代碼，效果如下圖所示：

在這里插入圖片描述
也就是說， 不管我們傳入的是一張普通圖片，還是一張GIF圖片，Glide都會自動進行判斷，并且可以正確地把它解析并展示出來 。

如果我想指定圖片的格式該怎么辦呢？

就比如說，我希望加載的這張圖必須是一張靜態圖片，我不需要Glide自動幫我判斷它到底是靜圖還是GIF圖。

想實現這個功能仍然非常簡單，我們只需在with()方法后再串接一個新的方法就可以了，如下所示：

String url = "http://p1.pstatp.com/large/166200019850062839d3";RequestOptions options = new RequestOptions();
options.placeholder(R.mipmap.default_image);
options.error(R.mipmap.error);
options.diskCacheStrategy(DiskCacheStrategy.NONE);Glide.with(this).asBitmap().load(url).apply(options).into(img);

在這里插入圖片描述
可以看到，這里在with()方法的后面加入了一個asBitmap()方法，這個方法的意思就是說這里只允許加載靜態圖片，不需要Glide去幫我們自動進行圖片格式的判斷了。

現在重新運行一下程序，效果如下圖所示：

在這里插入圖片描述
由于調用了asBitmap()方法，現在GIF圖就無法正常播放了，而是會在界面上顯示第一幀的圖片。

那么類似地，既然我們能強制指定加載靜態圖片，就也能強制指定加載動態圖片。比如說我們想要實現必須加載動態圖片的功能，就可以這樣寫：

String url = "http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg";RequestOptions options = new RequestOptions();
options.placeholder(R.mipmap.default_image);
options.error(R.mipmap.error);
options.diskCacheStrategy(DiskCacheStrategy.NONE);Glide.with(this).asGif().load(url).apply(options).into(img);

這里調用了asGif()方法替代了asBitmap()方法，很好理解，相信不用我多做什么解釋了。

那么既然指定了只允許加載動態圖片，如果我們傳入了一張靜態圖片的URL地址又會怎么樣呢？

試一下就知道了，將圖片的URL地址改成剛才的必應美圖，然后重新運行代碼，效果如下圖所示。

在這里插入圖片描述
沒錯， 如果指定了只能加載動態圖片，而傳入的圖片卻是一張靜圖的話，那么結果自然就只有加載失敗嘍 。

3、指定圖片大小

實際上，使用Glide在絕大多數情況下我們都是不需要指定圖片大小的。

在學習本節內容之前，你可能還需要先了解一個概念，就是我們平時在加載圖片的時候很容易會造成內存浪費。什么叫內存浪費呢？比如說一張圖片的尺寸是1000 x 1000像素，但是我們界面上的ImageView可能只有200 x 200像素，這個時候如果你不對圖片進行任何壓縮就直接讀取到內存中，這就屬于內存浪費了，因為程序中根本就用不到這么高像素的圖片。

而使用Glide，我們就完全不用擔心圖片內存浪費，甚至是內存溢出的問題。因為Glide從來都不會直接將圖片的完整尺寸全部加載到內存中，而是用多少加載多少。Glide會自動判斷ImageView的大小，然后只將這么大的圖片像素加載到內存當中，幫助我們節省內存開支。

當然，Glide也并沒有使用什么神奇的魔法，它內部的實現原理其實就是上面那篇文章當中介紹的技術，因此掌握了最基本的實現原理，你也可以自己實現一套這樣的圖片壓縮機制。

也正是因為Glide是如此的智能，所以剛才在開始的時候我就說了，在絕大多數情況下我們都是不需要指定圖片大小的，因為 Glide會自動根據ImageView的大小來決定圖片的大小 。

不過，如果你真的有這樣的需求，必須給圖片指定一個固定的大小，Glide仍然是支持這個功能的。修改Glide加載部分的代碼，如下所示：

String url = "http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg";RequestOptions options = new RequestOptions();
options.placeholder(R.mipmap.default_image);
options.error(R.mipmap.error);
options.diskCacheStrategy(DiskCacheStrategy.NONE);
options.override(100, 100);Glide.with(this).load(url).apply(options).into(img);