Glide-缩略图（thumbnails）

写在前面：这篇文章原著是Norman Peitek,所有著作权归原作者所有，我只是在学习Glide的时候看到有间书的作者 weiyf 写了双语的翻译，觉得非常好，但是作者只写了几篇，估计是比较忙吧。于是我就去看原博了，发现原博的英文也不会很难懂，这里只是方便学习做了翻译（顺便学英语（逃），建议英文基础还可以的同学直接看原文：https://futurestud.io/tutorials/glide-thumbnails

---

前几篇传送门：

• 【双语】Glide — 入门（Glide — Getting Started）
• 【双语】Glide — 高级加载（Glide — Advanced Loading）
• 【双语】Glide — 列表适配器(ListView, GridView)（Glide — ListAdapter (ListView, GridView)）
• Glide-默认图与过渡动画(Placeholders & Fade Animations)
• Glide-图片缩放、调整（Image Resizing & Scaling）
• Glide-显示Gif和视频（Displaying Gifs & Videos）
• Glide-缓存基础（caching-basics）
• Glide-优先请求（glide-request-priorities）

原文传送门：

• Callbacks: SimpleTarget and ViewTarget for Custom View Classes
• Loading Images into Notifications and AppWidgets
• Exceptions: Debugging and Error Handling
• Custom Transformations
• Custom Animations with animate()
• Integrating Networking Stacks
• Customize Glide with Modules
• Glide Module Example: Accepting Self-Signed HTTPS Certificates
• Glide Module Example: Customize Caching
• Glide Module Example: Optimizing By Loading Images In Custom Sizes
• Dynamically Use Model Loaders
• How to Rotate Images
• Series Roundup
• *Advanced ListViews With Images
• *App Release Preparation
• How to Choose the Best Caching Preference
• How to Ignore URL Query Parameters In Cache Lookup (soon)
• Network-Dependent Image Loading (soon)

---

正文：

上周，我们学习了一些在加载和显示图片的时候提高用户体验的方法。通过 缓存 和 设置请求优先级 已经为流畅的体验提供了关键的一步了。然而，如果你加载的图片非常大，那么会花费较长的一段时间直到它显示出来。在本博文中，我们将探索另一个优化的途径：thumbnails（缩略图，下文不译）

Thumbnails的优势

在你使用Thumbnails来优化之前，先确保你已经理解并充分利用了 缓存和优先请求。如果所有的努力都已经做了，那么试试Thumbnails是否能提升你的Android应用。

Thumbnails跟我们之前讲的占位符还不太一样，占位符在app里面是指定好的某些资源文件。Thumbnails的话则是一个动态的占位符，它也可以从网络上加载得来。
Thumbnails会在实际的请求和处理之前显示出来，不管什么原因，如果Thumbnails在原图加载后才出现，它会自动消失而不会替换原图。

提示：为了更加时更加流畅，另一个非常好的方式是用一种颜色来替换占位符的背景色，这个颜色是从目标图里提取出来的，可以看看我们写的一个文档。

ps：以下是我从作者提到的文档里面抠出来的图，来感受一下：

Simple Thumbnails：简单缩略图

Glide提供了两种不同的缩略图。第一种比较简单，就是在加载原图的时候显示一张更小尺寸的图片。这种方式尤其适用于ListView和详情页面的组合当中。 如果你早已经在ListView中加载了图片，就像我们刚才假设的，250x250像素的图片，在进入其详情页面的时候，需要一张更大尺寸的图。然而，对于用户而言。他们早早就已经看到一张图片（小图）了，为什么还会出现先显示占位符，过了几秒后显示大图的情况？

对于这种情况，我们更应该在详情页面继续显示那张250x250的图片，然后在后台加载所需要的大图。Glide使用.thumbnail()就可以做到，这是传入的参数是一个浮点数，它代表尺寸的倍数。

Glide  
    .with( context )
    .load( UsageExampleGifAndVideos.gifUrl )
    .thumbnail( 0.1f )
    .into( imageView2 );

例如，你传了0.1f作为参数，那么Glide则会显示原图大小的10%。如果原图的尺寸是1000x1000像素，那么缩略图就是100x100像素。由于缩略图会比ImageView要小许多，所以你要确保一个准确的缩放比例。

说明一下，所有图片请求的设置同样适用于缩略图。例如，你请求某张图片时做了一个灰度变换，那么对于它的缩略图也是同样会生效的。

Advanced Thumbnails with Complete Different Requests 高级缩略图，通过完成不一样的请求

虽然使用.thumbnail（）传入一个浮点数非常简单高效，但不是所有情况都使用。如果缩略图也需要从网络加载各种尺寸，那么它可能也快不了多少。因此，Glide提供了另一种加载缩略图的方法。

第二种方式就是传入一个新的图片请求作为参数,我们来看看例子：

private void loadImageThumbnailRequest() {  
    // setup Glide request without the into() method
    DrawableRequestBuilder thumbnailRequest = Glide
        .with( context )
        .load( eatFoodyImages[2] );

    // pass the request as a parameter to the thumbnail request
    Glide
        .with( context )
        .load( UsageExampleGifAndVideos.gifUrl )
        .thumbnail( thumbnailRequest )
        .into( imageView3 );
}

区别在于第一个图片请求与第二个图片请求是完全独立的，缩略图可以是其他不同的资源id或者图片链接，你可以对它做一些变换等等。

提示：如果你想更带劲一点，你可以递归地调用一些请求作为图片的缩略图请求参数

Outlook： 展望

本文介绍了Glide两种加载缩略图的方式，不要忘记在你的优雅的app上使用哦！它能极大地减少空白的ImageView出现在你的app上。如果你有什么疑问，请通过评论让我们知道！

下周，我们将学习如何在不是ImageView的控件上显示图片，敬请关注！