转载自:http://blog.csdn.net/wyb112233/article/details/49637685

Fresco简单的使用—SimpleDraweeView

百学须先立志—学前须知:

在我们平时加载图片(不管是下载还是加载本地图片…..)的时候,我们经常会遇到这样一个需求,那就是当图片正在加载时应该呈现正在加载时的图像,当图片加载失败时应该呈现图片加载时的图像,当我们重新加载这张图片时,应该呈现重试时图像,直到这张图片加载完成。这些繁琐并且重复的如果得不到简化的话,那将是一个开发人员的噩梦,现在好了,我们用 Facebook 出品的一个强大的图片加载组件 Fresco 几行代码就可以搞定以上问题了。

尽信书,不如无书—能学到什么?

1、SimpleDraweeView最基本的使用
2、SimpleDraweeView的圆形图
3、SimpleDraweeView的圆角图
4、SimpleDraweeView的缩放类型

工欲善其事必先利其器—下载Fresco并导入到项目

Fresco中文说明:http://www.fresco-cn.org/

Fresco项目GitHub地址:https://github.com/facebook/fresco

第一步进入 Fresco项目GitHub地址 :

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

第二步添加Fresco到项目工程:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

第三步服务及权限:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

代码分析:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

简单的书写完布局和实现代码之后我们来运行一下。

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

运行报错了!怎么回事呢?这里啊,是因为我们没有在应用调用 setContentView() 之前进行初始化Fresco造成的;解决办法:

修改我们的 MainActivity 里代码:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

再运行就没有错误发生了。

占位图—placeholderImage:

在此之前我们需要一张占位图 icon_placeholder.png 大家右键另存为即可:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

修改我们的 activity_main.xml :
代码说明:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

MainActivity 无需修改,运行一下:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

正在加载图—progressBarImage:

在此之前我们需要一张正在加载图 icon_progress_bar.png 大家右键另存为即可:
Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

修改我们刚刚书写的 activity_main.xml :

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

更改我们的 MainActivity 里代码:

代码分析:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

运行效果图:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

正在加载图本身是不可以转的,但是呢,加上了 fresco:progressBarAutoRotateInterval=”5000” 属性,那么它就可以旋转了;可以看到,正在加载图一闪而过,这是因为我们加载的图片很小,网络也很好。

失败图—failureImage:

在此之前我们需要一张正在加载图 icon_failure.png 大家右键另存为即可:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

修改我们刚刚书写的 activity_main.xml :

代码分析:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

修改我们的 MainActivity 里代码:

代码说明:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

运行效果:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

重试图—retryImage:

在此之前我们需要一张正在加载图 icon_retry.png 大家右键另存为即可:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

修改我们刚刚书写的 activity_main.xml :
代码分析:
Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

修改我们的 MainActivity 里代码:

代码说明:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

运行效果:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

注意:

重复加载4次还是没有加载出来的时候才会显示 failureImage(失败图) 的图片

淡入淡出动画—fadeDuration:

修改我们刚刚书写的 activity_main.xml :

代码说明:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

MainActivity 中的代码无需修改。

运行效果:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

背景图—backgroundImage:

这里呢,我们的背景图采用的是一个系统所提供的颜色中的一种。

修改我们刚刚书写的 activity_main.xml :

代码说明:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

MainActivity 中的代码无需修改,运行效果:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

叠加图—overlayImage:

这里呢,我们的背景图采用的是一个系统所提供的颜色中的一种。

修改我们刚刚书写的 activity_main.xml :

代码说明:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

从运行效果来看,叠加图在最上面,覆盖了下面的图。

圆形图—roundAsCircle:

一行代码搞定圆形图:设置roundAsCircle为true;

修改我们刚刚书写的 activity_main.xml :

代码说明:
Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

MainActivity 中的代码无需修改。

运行效果:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

可以看到,从图片开始加载一直到图片下载完毕,整个图像都是圆形的。

圆角图—roundedCornerRadius:

修改我们刚刚书写的 activity_main.xml :
代码说明:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

MainActivity 中的代码无需修改。

运行效果:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

当我们同时设置图像显示为圆形图像和圆角图像时,只会显示为圆形图像。

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

圆形圆角边框宽度及颜色—roundingBorder:

修改我们刚刚书写的 activity_main.xml :

代码说明:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

MainActivity 中的代码无需修改。

运行效果(左边显示的是带边框的圆形图像,右边显示的是带边框的圆角图像):

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

圆形或圆角图像底下的叠加颜色—roundWithOverlayColor:

修改我们刚刚书写的 activity_main.xml :

代码说明:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

MainActivity 中的代码无需修改。

运行效果(左边为圆形效果,右边为圆角效果):

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

缩放类型—ScaleType:

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

总结

Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用
Android中级篇之Fresco-加载图片基础[详细图解Fresco的使用

相关文章: