Glide-默认图与过渡动画(Placeholders & Fade Animations)

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

如有错误欢迎指正，谢谢!

---

前几篇传送门：

• 【双语】Glide — 入门（Glide — Getting Started）
• 【双语】Glide — 高级加载（Glide — Advanced Loading）
• 【双语】Glide — 列表适配器(ListView, GridView)（Glide — ListAdapter (ListView, GridView)）

原文传送门：

• Image Resizing & Scaling
• Displaying Gifs & Videos
• Caching Basics
• Request Priorities
• Thumbnails
• 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)

---

正文：

在学习完如何从各种源加载图片后，本周将讲述占位符，也就是在图片加载出来前默认显示的东西。

毫无疑问，一个空白的 ImageView 对于任何UI来讲都不太美观，如果你使用Glide，你很可能是通过网络来加载图片。那么根据用户的网络环境，这可能需要花费较长时间。对于App来讲，一个好的做法是在图片加载出来前先显示一个默认的图片。

Glide提供了一个流畅的接口可以轻而易举的实现！只需要调用.placeHolder()并传入一个图片资源ID即可，这样Glide就会在你的图片加载出来前，显示这张默认的图片。

Glide  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .placeholder(R.mipmap.ic_launcher) // 也可以是一个drawable
    .into(imageViewPlaceholder)

很明显，你不能设置一个网络链接作为这个占位符，因为它也需要网络加载。相比之下，资源文件和drawable则可以保证可用。但是，load（）方法的参数可以是任何类型的。但有一些情况可能会加载不出来（比如 没有网络，服务器挂了，等等...），删除或者无法访问。在下一节，我们将来讲解 “异常占位符”。

异常占位符（Error Placeholder）： .error()

假设我们的app尝试从网站上加载一张图片，但是这个网站已经挂掉了。Glide提供了一个“加载错误”的回调，并且我们可以采取相应的措施。我们稍后会介绍这中情况，但对于现在而言，那么做太复杂了。大多情况下是使用一个错误占位符，这足以告诉用户图片加载出现异常了。

做法跟我们上面显示默认图片有点类似，只是调用的方法是.error():

Glide  
    .with(context)
    .load("http://futurestud.io/non_existing_image.png")
    .placeholder(R.mipmap.ic_launcher) // 也可以是一个drawable
    .error(R.mipmap.future_studio_launcher) // 一旦图片加载失败，则会显示这个资源id指定的图片
    .into(imageViewError);

就是这样，如果你load()里面指定的图片无法成功加载，那么Glide就会显示R.mipmap.future_studio_launcher来代替。同样的，.error()可以接受的参数只能是已经初始化的drawable或者指向某个资源id（R.drawable.）。

crossFade()的使用（淡入淡出）

如论你是否在图片加载前显示占位符，改变ImageView的图片对于你的界面来讲非常重要。怎样做才能看起来更流畅和简单？一个简单的做法是使用淡入淡出动画.Glide附带了标准的淡入淡入的动画，在（Glide3.6.1版本）后是默认开启的。如果你想强制Glide使用淡入淡出动画，你可以在builder中调用它：

Glide  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .placeholder(R.mipmap.ic_launcher) 
    .error(R.mipmap.future_studio_launcher) 
    .crossFade()//ps：这个
    .into(imageViewFade);

这个corssFade()方法有另一个形式：.crossFade(int duration)，如果你想减慢（或加快）动画速度，随便传一个以ms为单位的动画时长即可，默认的动画时长是300ms。

dontAnimate()的使用（不要动画）

如果你想直接显示图片，不需要动画效果，那么在builder中调用.dontAnimate()即可:

Glide  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .placeholder(R.mipmap.ic_launcher)
    .error(R.mipmap.future_studio_launcher)
    .dontAnimate()//ps：这个
    .into(imageViewFade);

这样就会直接显示图片到ImageView里面，没有任何过渡动画。请确保你这么做有充分的理由!（ps:因为那样效果不好）

值得一提的是，以上这些参数都是相互独立设置的，不需要相互依赖。例如，你可以不调用.placeholder()而只设置.error（）。你也可以在没有设置占位符的情况下设置crossFade()动画，这些参数以任何形式的组合都是可以的。

展望

真心希望你能从这个博客帖子理解并且收获许多。对于提高用户体验来说，不会突然地弹出图片是极其重要的。所以，如果出现加载异常的时候，要用明显的方式告诉用户。Glide提供了一些很容易使用的方法，它能帮你塑造一个更好的应用。

但我们目前还没有做一些优化。下一周，我们将了解图片的调整与缩放。