Glide入门教程（2）适配器、占位图与渐变动画

发表于 | 分类于 ， ， ， ， | 阅读次数
字数统计 | 阅读时长
Glide在Adapter中的使用、占位图和渐变动画

适配器 (ListView, GridView)

       在ListView中使用Glide，与在ImageView中使用是一样的。当你不断向上向下滑动多次后，会发现图片比之前加载得更快。在新手机上，可能需要稍微多等一会。可以很容易想到，这些图片由于被缓存到磁盘上，用的时候不必再从网络获取。Glide的缓存实现是基于Picasso的一个方法，让你可以更简单地使用。具体可以缓存的大小取决于设备磁盘的大小。

       当加载一张图片时，Glide使用这些资源：内存、磁盘和网络（由快到慢）。第二次加载的时候，什么都不需要做，Glide智能地创建了合适大小的图片缓存，它将为你分担所有复杂工作。

       GridView加载图片的使用跟ListView加载没有任何区别，可以使用一样的adapter，只要切换Activity的布局到GridView即可。

占位图

占位图

       如果使用Glide，你很可能正在从网络上加载图片。假如网络环境不好，加载过程可能需要花费大量的时间。这时候就需要一个占位图先显示出来，直到实际的图片加载并处理完毕。Glide的流接口让这个工作变得很简单。只要调用.placeHolder() ，并传递进去一个图片资源，Glide会显示那个占位图，直到实际图片准备完毕。

1
2
3
4
5
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()：

1
2
3
4
5
6
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.)。

渐变动画

crossFade()的使用

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

1
2
3
4
5
6
7
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()：

1
2
3
4
5
6
7
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入门教程——3.适配器(ListView, GridView)、Glide入门教程——4. 占位图& 淡入淡出动画

Fork me on GitHub