Glide — 縮略圖
原文：Thumbnails
作者：Norman Peitek
翻譯：Dexter0218
上篇博客，我們已經(jīng)學(xué)習(xí)了如何在加載和顯示圖片時(shí)候優(yōu)化用戶(hù)體驗(yàn)。緩存和優(yōu)先級(jí)處理大大提升了用戶(hù)體驗(yàn)的流暢性。然而，如果圖片相當(dāng)大，會(huì)花費(fèi)很長(zhǎng)時(shí)間才能圖片完全加載。這篇文章，我們將介紹另一個(gè)優(yōu)化方法：縮略圖。
Glide 系列概覽
- 入門(mén)簡(jiǎn)介
- 高級(jí)加載
- 適配器(ListView, GridView)
- 占位圖& 淡入淡出動(dòng)畫(huà)
- 圖片大小 & 縮放
- 播放GIF & 視頻
- 緩存基礎(chǔ)
- 請(qǐng)求優(yōu)先級(jí)
- 縮略圖
- 回調(diào)：定制view中使用SimpleTarget和ViewTarget
- 通知欄和桌面小控件的圖片加載
- 異常: 調(diào)試和報(bào)錯(cuò)處理
- 自定義變換
- 用animate()定制動(dòng)畫(huà)
- 整合網(wǎng)絡(luò)協(xié)議棧
- 用Modules定制Glide
- Glide Module 案例: 接受自簽名HTTPS證書(shū)
- Glide Module 案例: 自定義緩存
- Glide Module 案例: 通過(guò)加載自定義大小圖片優(yōu)化
- 動(dòng)態(tài)使用 Model Loaders
- 如何旋轉(zhuǎn)圖片
- 系列綜述
縮略圖的優(yōu)點(diǎn)
在使用縮略圖進(jìn)行優(yōu)化之前，確保你已經(jīng)明白了之前介紹的緩存和請(qǐng)求優(yōu)先級(jí)。如果你已經(jīng)嘗試了之前介紹的所有方法，現(xiàn)在來(lái)看看縮略圖能否幫助你進(jìn)一步提升你的app。
縮略圖不同于前面文章中提到的占位圖。占位圖應(yīng)當(dāng)是跟app綁定在一起的資源?？s略圖是一個(gè)動(dòng)態(tài)的占位圖，可以從網(wǎng)絡(luò)加載?？s略圖也會(huì)被先加載，直到實(shí)際圖片請(qǐng)求加載完畢。如果因?yàn)槟承┰?，縮略圖獲得的時(shí)間晚于原始圖片，它并不會(huì)替代原始圖片，而是簡(jiǎn)單地被忽略掉。
提示：另外一個(gè)非常棒的平滑圖片顯示的方法，通過(guò)加載圖片主色調(diào)的占位圖。我們也會(huì)為那個(gè)寫(xiě)一篇介紹。
簡(jiǎn)單的縮略圖
Glide提供了2個(gè)不同的方法產(chǎn)生縮略圖。第一種，是通過(guò)在加載的時(shí)候指定一個(gè)小的分辨率，產(chǎn)生一個(gè)縮略圖。這個(gè)方法在ListView和詳細(xì)視圖的組合中非常有用。如果你已經(jīng)在ListView中用到了250x250像素的圖片，那么在在詳細(xì)視圖中會(huì)需要一個(gè)更大分辨率的圖片。然而從用戶(hù)的角度，我們已經(jīng)看見(jiàn)了一個(gè)小版本的圖片，為什么需要好幾秒，同樣的圖片（高分辨率的）才能被再次加載出來(lái)呢？
在這種情況下，從顯示250x250像素版本的圖片平滑過(guò)渡到詳細(xì)視圖里查看大圖更有意義。Glide里的.thumbnail()方法讓這個(gè)變?yōu)榭赡堋＿@里，.thumbnal()的參數(shù)是一個(gè)浮點(diǎn)乘法運(yùn)算：
Glide
.with( context )
.load( UsageExampleGifAndVideos.gifUrl )
.thumbnail( 0.1f )
.into( imageView2 );
例如，如果你傳遞一個(gè)0.1f作為參數(shù)，Glide會(huì)加載原始圖片大小的10%的圖片。如果原始圖片有1000x1000像素，縮略圖的分辨率為100x100像素。由于圖片將會(huì)比ImageView小，你需要確保縮放類(lèi)型是否正確。
注意到你所有的請(qǐng)求設(shè)置都會(huì)影響到你的縮略圖。例如，如果你使用了一個(gè)變換讓你的圖片變?yōu)榛叶葓D，縮略圖也同樣將會(huì)是灰度圖。
高級(jí)縮略圖請(qǐng)求：原圖與縮略圖完全不同
為.thumbnail()傳入一個(gè)浮點(diǎn)類(lèi)型的參數(shù)，非常簡(jiǎn)單有效，但并不是總是有意義。如果縮略圖需要從網(wǎng)絡(luò)加載同樣全分辨率圖片，可能根本都不快。這樣，Glide提供了另一個(gè)方法去加載和顯示縮略圖。
第二個(gè)方法是傳遞一個(gè)新的Glide請(qǐng)求作為參數(shù)，我們看看例子：
private void loadImageThumbnailRequest() {
// setup Glide request without the into() method
DrawableRequestBuilder<String> thumbnailRequest = Glide
.with( context )
.load( eatFoodyImages[2] );
// pass the request as a a parameter to the thumbnail request
Glide
.with( context )
.load( UsageExampleGifAndVideos.gifUrl )
.thumbnail( thumbnailRequest )
.into( imageView3 );
}
區(qū)別在于第一個(gè)縮略圖請(qǐng)求是完全獨(dú)立于第二個(gè)原始請(qǐng)求的?？s略圖可以來(lái)自不同資源或者圖片URL，你可以在它上面應(yīng)用不同的變換。
提示：如果你夠瘋狂，你可以遞歸這樣的操作，為你的縮略圖添加額外的縮略圖請(qǐng)求...
展望
這篇文章展示了Glide用2個(gè)不同的方法加載縮略圖，不要忘了為你的app添加這個(gè)方法！這會(huì)極大減少你的app清空ImageView的次數(shù)。如果你有問(wèn)題，在評(píng)論中提出。
后面我們將介紹展示圖片的目標(biāo)不是ImageView的加載圖片方法，敬請(qǐng)期待！
