Glide入门教程——9. 缩略图

Glide — 缩略图

原文：Thumbnails
作者：Norman Peitek
翻译：Dexter0218

上篇博客，我们已经学习了如何在加载和显示图片时候优化用户体验。缓存和优先级处理大大提升了用户体验的流畅性。然而，如果图片相当大，会花费很长时间才能图片完全加载。这篇文章，我们将介绍另一个优化方法：缩略图。

Glide 系列概览

缩略图的优点

在使用缩略图进行优化之前，确保你已经明白了之前介绍的缓存和请求优先级。如果你已经尝试了之前介绍的所有方法，现在来看看缩略图能否帮助你进一步提升你的app。

缩略图不同于前面文章中提到的占位图。占位图应当是跟app绑定在一起的资源。缩略图是一个动态的占位图，可以从网络加载。缩略图也会被先加载，直到实际图片请求加载完毕。如果因为某些原因，缩略图获得的时间晚于原始图片，它并不会替代原始图片，而是简单地被忽略掉。

提示：另外一个非常棒的平滑图片显示的方法，通过加载图片主色调的占位图。我们也会为那个写一篇介绍。

简单的缩略图

Glide提供了2个不同的方法产生缩略图。第一种，是通过在加载的时候指定一个小的分辨率，产生一个缩略图。这个方法在ListView和详细视图的组合中非常有用。如果你已经在ListView中用到了250x250像素的图片，那么在在详细视图中会需要一个更大分辨率的图片。然而从用户的角度，我们已经看见了一个小版本的图片，为什么需要好几秒，同样的图片（高分辨率的）才能被再次加载出来呢？

在这种情况下，从显示250x250像素版本的图片平滑过渡到详细视图里查看大图更有意义。Glide里的.thumbnail()方法让这个变为可能。这里，.thumbnal()的参数是一个浮点乘法运算：

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

例如，如果你传递一个0.1f作为参数，Glide会加载原始图片大小的10%的图片。如果原始图片有1000x1000像素，缩略图的分辨率为100x100像素。由于图片将会比ImageView小，你需要确保缩放类型是否正确。

注意到你所有的请求设置都会影响到你的缩略图。例如，如果你使用了一个变换让你的图片变为灰度图，缩略图也同样将会是灰度图。

高级缩略图请求：原图与缩略图完全不同

为.thumbnail()传入一个浮点类型的参数，非常简单有效，但并不是总是有意义。如果缩略图需要从网络加载同样全分辨率图片，可能根本都不快。这样，Glide提供了另一个方法去加载和显示缩略图。

第二个方法是传递一个新的Glide请求作为参数，我们看看例子：

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 );
}

区别在于第一个缩略图请求是完全独立于第二个原始请求的。缩略图可以来自不同资源或者图片URL，你可以在它上面应用不同的变换。

提示：如果你够疯狂，你可以递归这样的操作，为你的缩略图添加额外的缩略图请求...

展望

这篇文章展示了Glide用2个不同的方法加载缩略图，不要忘了为你的app添加这个方法！这会极大减少你的app清空ImageView的次数。如果你有问题，在评论中提出。

后面我们将介绍展示图片的目标不是ImageView的加载图片方法，敬请期待！

最后编辑于：2017.12.03 05:24:08