glide入門(轉自郭霖大神的微信公眾號)

最近在做群聊功能,使用了環信的SDK,在環信demo中無意之中看到了glide框架,簡單了解后,發現這個框架很強(強到沒朋友),不光可以加載本地,網絡靜態圖片,還可以加載gif動態圖片.今天就轉載一篇郭霖(第一行android代碼的作者)大神介紹的glide入門文章.

現在Android上的圖片加載框架非常成熟,從最早的老牌圖片加載框架UniversalImageLoader,到后來Google推出的Volley,再到后來的新興軍Glide和Picasso,當然還有Facebook的Fresco。每一個都非常穩定,功能也都十分強大。但是它們的使用場景基本都是重合的,也就是說我們基本只需要選擇其中一個來進行學習和使用就足夠了,每一個框架都嘗試去掌握的話則有些浪費時間。

在這幾個框架當中,我對Volley和Glide研究得比較深入,對UniversalImageLoader、Picasso和Fresco都只是有一些基本的了解。從易用性上來講,Glide和Picasso應該都是完勝其他框架的,這兩個框架都實在是太簡單好用了,大多數情況下加載圖片都是一行代碼就能解決的,而UniversalImageLoader和Fresco則在這方面略遜一些。

總之,沒有最好的框架,只有最適合自己的框架。經過多方面對比之后,我還是決定選擇了Glide來進行研究,并且這也是Google官方推薦的圖片加載框架。

說實話,關于Glide的文章我已經籌備了好久,去年這個時候本來就打算要寫了,但是一直都沒有動筆。因為去年我的大部分時間都放在了寫《第二行代碼》上面,只能用碎片時間來寫寫博客,但是Glide的難度遠超出了我用碎片時間所能掌握的難度。當然,這里我說的是對它的源碼進行解析的難度,不是使用上的難度,Glide的用法是很簡單的。所以,我覺得去年我寫不好Glide這個題材的文章,也就一直拖到了今年。

而現在,我花費了大量的精力去研究Glide的源碼和各種用法,相信現在已經可以將它非常好地掌握了,因此我準備將我掌握的這些知識整理成一個新的系列,幫忙大家更好地學習Glide。這個Glide系列大概會有8篇左右文章,預計花半年時間寫完,將會包括Glide的基本用法、源碼解析、高級用法、功能擴展等內容,可能會是目前互聯網上最詳盡的Glide教程。

那么本篇文章是這個系列的第一篇文章,我們先來了解一下Glide的基本用法吧。

開始

Glide是一款由Bump Technologies開發的圖片加載框架,使得我們可以在Android平臺上以極度簡單的方式加載和展示圖片。

目前,Glide最新的穩定版本是3.7.0,雖然3.8.0已經推出預覽版了,但是暫時問題還比較多。因此,我們這個系列的博客都會使用Glide 3.7.0版本來進行講解,這個版本的Glide相當成熟和穩定。

要想使用Glide,首先需要將這個庫引入到我們的項目當中。新建一個GlideTest項目,然后在app/build.gradle文件當中添加如下依賴:

dependencies { ? ?compile'com.github.bumptech.glide:glide:3.7.0'}

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

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

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

加載圖片

現在我們就來嘗試一下如何使用Glide來加載圖片吧。比如這是必應上一張首頁美圖的地址:

http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg

然后我們想要在程序當中去加載這張圖片。

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

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

publicclassMainActivityextendsAppCompatActivity{

?????? ImageViewimageView;

@OverrideprotectedvoidonCreate(BundlesavedInstanceState) {

??????? super.onCreate(savedInstanceState);

??????? setContentView(R.layout.activity_main);

??????? imageView=(ImageView) findViewById(R.id.image); ?}

???????? public void loadImage(Viewview) {

???????????????????? Stringurl="http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg";

???????????????????? Glide.with(this).load(url).into(imageView);

? ? ? ?? }

}

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

可以看到,一張網絡上的圖片已經被成功下載,并且展示到ImageView上了。

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

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

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

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

首先,調用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()方法:

//加載本地圖片

Filefile=getImagePath();

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

//加載應用資源

intresource=R.drawable.image;

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

//加載二進制流

byte[] image=getImageBytes();

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

//加載Uri對象

UriimageUri=getImageUri();

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

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

那么回顧一下Glide最基本的使用方式,其實就是關鍵的三步走:先with(),再load(),最后into()。熟記這三步,你就已經入門Glide了。

占位圖

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

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

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

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

Glide.with(this).load(url).placeholder(R.drawable.loading).into(imageView);

沒錯,就是這么簡單。我們只是在剛才的三步走之間插入了一個placeholder()方法,然后將占位圖片的資源id傳入到這個方法中即可。另外,這個占位圖的用法其實也演示了Glide當中絕大多數API的用法,其實就是在load()和into()方法之間串接任意想添加的功能就可以了。

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

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

Glide.with(this).load(url).placeholder(R.drawable.loading).diskCacheStrategy(DiskCacheStrategy.NONE).into(imageView);

可以看到,這里串接了一個diskCacheStrategy()方法,并傳入DiskCacheStrategy.NONE參數,這樣就可以禁用掉Glide的緩存功能。

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

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


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

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

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

Glide.with(this).load(url).placeholder(R.drawable.loading).error(R.drawable.error).diskCacheStrategy(DiskCacheStrategy.NONE).into(imageView);

很簡單,這里又串接了一個error()方法就可以指定異常占位圖了。

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


這樣我們就把Glide提供的占位圖功能都掌握了。

指定圖片格式

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

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

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

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


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

但是如果我想指定圖片的格式該怎么辦呢?就比如說,我希望加載的這張圖必須是一張靜態圖片,我不需要Glide自動幫我判斷它到底是靜圖還是GIF圖。

想實現這個功能仍然非常簡單,我們只需要再串接一個新的方法就可以了,如下所示:

Glide.with(this).load(url).asBitmap().placeholder(R.drawable.loading).error(R.drawable.error).diskCacheStrategy(DiskCacheStrategy.NONE).into(imageView);

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

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


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

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

Glide.with(this).load(url).asGif().placeholder(R.drawable.loading).error(R.drawable.error).diskCacheStrategy(DiskCacheStrategy.NONE).into(imageView);

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

那么既然指定了只允許加載動態圖片,如果我們傳入了一張靜態圖片的URL地址又會怎么樣呢?試一下就知道了,將圖片的URL地址改成剛才的必應美圖,然后重新運行代碼,效果如下圖所示。

動圖


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

指定圖片大小

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

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

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

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

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

Glide.with(this).load(url).placeholder(R.drawable.loading).error(R.drawable.error).diskCacheStrategy(DiskCacheStrategy.NONE).override(100,100).into(imageView);

仍然非常簡單,這里使用override()方法指定了一個圖片的尺寸,也就是說,Glide現在只會將圖片加載成100*100像素的尺寸,而不會管你的ImageView的大小是多少了。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,739評論 6 534
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,634評論 3 419
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,653評論 0 377
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,063評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,835評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,235評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,315評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,459評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,000評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,819評論 3 355
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,004評論 1 370
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,560評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,257評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,676評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,937評論 1 288
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,717評論 3 393
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,003評論 2 374

推薦閱讀更多精彩內容