写在前面:这篇文章原著是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<String> 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的控件上显示图片,敬请关注!