为了账号安全,请及时绑定邮箱和手机立即绑定

Glide 占位图& 淡入淡出动画

标签:
Android

我们根本没有必要讨论或解释:空白的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体验更出色。

原文链接:http://www.apkbus.com/blog-822721-68497.html

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消