Glide — 占位图 & 渐变动画

原文：Placeholders & Fade Animations
作者：Norman Peitek
翻译：Dexter0218

在学习了如何从各种图片源中加载图片后，这节将要学习占位图——在实际图片加载完成前预加载的图片。

Glide 系列概览

1. 入门简介
2. 高级加载
3. 适配器(ListView, GridView)
4. 占位图& 淡入淡出动画
5. 图片大小 & 缩放
6. 播放GIF & 视频
7. 缓存基础
8. 请求优先级
9. 缩略图
10. 回调：定制view中使用SimpleTarget和ViewTarget
11. 通知栏和桌面小控件的图片加载
12. 异常: 调试和报错处理
13. 自定义变换
14. 用animate()定制动画
15. 整合网络协议栈
16. 用Modules定制Glide
17. Glide Module 案例: 接受自签名HTTPS证书
18. Glide Module 案例: 自定义缓存
19. Glide Module 案例: 通过加载自定义大小图片优化
20. 动态使用 Model Loaders
21. 如何旋转图片
22. 系列综述

我们根本没有必要讨论或解释：空白的ImageView在任何UI中看起来都是丑陋的。如果你在使用Glide，你很可能正在从网络上加载图片。假如你网络的环境不好，加载过程可能需要花费大量的时间。这时候就需要一个占位图先显示出来，直到实际的图片加载并处理完毕。

Glide的流接口让这个工作变得很简单！只要调用.placeHolder() ，并传递进去一个图片资源，Glide会显示那个占位图，直到实际图片准备完毕。

Glide
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .placeholder(R.mipmap.ic_launcher) // can also be a drawable
    .into(imageViewPlaceholder);

显然，你不能设置一个网络的url当作占位图。假如那样，占位图也需要时间去下载。App内的资源和图片毫无疑问是可以使用的。同时，由于Glide的load()可以接受各式的参数，这些参数可能是不能加载的（无网络连接，服务器挂了，等等），被删除的或者其他无法访问的。在下一节，我们会介绍出错占位图。

出错占位图: .error()

我们假设我们的app尝试从网页加载一张图片，但网页不可访问，Glide会给我们选项去进行出错的回调，并采取合适的行动。（选项问题以后再讨论，目前来说还是比较复杂的）。在大多数情况下，占位图可以完全足够用来表明图片无法加载。

跟之前栗子中预加载的占位图一样，调用Glide的流接口即可，只是有命名上有点不一样，叫error()：

Glide
    .with(context)
    .load("http://futurestud.io/non_existing_image.png")
    .placeholder(R.mipmap.ic_launcher) // can also be a drawable
    .error(R.mipmap.future_studio_launcher) // will be displayed if the image cannot be loaded
    .into(imageViewError);

上面的代码中，如果从load()里传入的图片无法被加载，Glide会显示R.mipmap.future_studio_launcher来代替。再次强调一下，error()可以接受的只能是已经被初始化的图片资源或者指向图片资源的id(R.drawable.<drawable-keyword>)。

crossFade()的使用

无论你是否使用占位图，对于UI来说，图片的改变是相当大的一个动作。一个简单的方法可以让这个变化更平滑，更让人眼接受，这就是使用crossfade动画。Glide支持标准的crossfade动画，（对于目前版本3.6.1）是默认可用的。如果你想要使用crossfade动画，你只要在在构造器里添加另外一个调用：

Glide
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .placeholder(R.mipmap.ic_launcher) // can also be a drawable
    .error(R.mipmap.future_studio_launcher) // will be displayed if the image cannot be loaded
    .crossFade()
    .into(imageViewFade);

crossFade()方法有另外一个特征：.crossFade(int duration),如果你想要减慢（或加快）动画，随便传入一个毫秒级的时间进去感受一下。默认的动画时间是300毫秒。

dontAnimate()的使用

如果你只是直接显示图片，而不需要crossfade效果，那就在Glide的请求构造里调用.dontAnimate()：

Glide
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .placeholder(R.mipmap.ic_launcher) // can also be a drawable
    .error(R.mipmap.future_studio_launcher) // will be displayed if the image cannot be loaded
    .dontAnimate()
    .into(imageViewFade);

你会直接看到图片，没有渐入的过程。请你确认你有自己的理由要这么做。

提醒你个很重要的事，这些参数都是独立的，并且设置不依赖彼此。例如，你可以只设置.error()，而不用调用.placeholder()。你可以设置crossFade()动画，而不用设置占位图。参数的任意结合都是可行的。

展望

很希望你能从这篇文章中理解并学到许多。图片的意外显示对于用户体验来说是相当糟糕的。另外，当出错的时候，用明显的方式告诉用户。Glide帮助你用简单的方法调用这些功能，让你的app体验更出色。

但是，我们还没有结束我们的优化。后续，我们会学习图片大小的调整和缩放。