标签:
本文出处:http://blog.csdn.net/u011164565/article/details/51330778
在我们平时加载图片(不管是下载还是加载本地图片…..)的时候,我们经常会遇到这样一个需求,那就是当图片正在加载时应该呈现正在加载时的图像,当图片加载失败时应该呈现图片加载时的图像,当我们重新加载这张图片时,应该呈现重试时图像,直到这张图片加载完成。这些繁琐并且重复的如果得不到简化的话,那将是一个开发人员的噩梦,现在好了,我们用 Facebook 出品的一个强大的图片加载组件 Fresco 几行代码就可以搞定以上问题了。
1、SimpleDraweeView最基本的使用
2、SimpleDraweeView的圆形图
3、SimpleDraweeView的圆角图
4、SimpleDraweeView的缩放类型
Fresco中文说明:http://www.fresco-cn.org/
Fresco项目GitHub地址:https://github.com/facebook/fresco
第一步进入 Fresco项目GitHub地址 :
第二步添加Fresco到项目工程:
第三步服务及权限:
初次使用,我们就先简单书写我们的 activity_main.xml :
代码分析:
MainActivity 实现代码:
简单的书写完布局和实现代码之后我们来运行一下。
运行报错了!怎么回事呢?这里啊,是因为我们没有在应用调用 setContentView() 之前进行初始化Fresco造成的;解决办法:
修改我们的 MainActivity 里代码:
再运行就没有错误发生了。
在此之前我们需要一张占位图 icon_placeholder.png 大家右键另存为即可:
修改我们的 activity_main.xml :
代码说明:
MainActivity 无需修改,运行一下:
在此之前我们需要一张正在加载图 icon_progress_bar.png 大家右键另存为即可:
修改我们刚刚书写的 activity_main.xml :
代码说明:
更改我们的 MainActivity 里代码:
代码分析:
运行效果图:
正在加载图本身是不可以转的,但是呢,加上了 fresco:progressBarAutoRotateInterval="5000"
属性,那么它就可以旋转了;可以看到,正在加载图一闪而过,这是因为我们加载的图片很小,网络也很好。
在此之前我们需要一张正在加载图 icon_failure.png 大家右键另存为即可:
修改我们刚刚书写的 activity_main.xml :
代码分析:
修改我们的 MainActivity 里代码:
代码说明:
运行效果:
在此之前我们需要一张正在加载图 icon_retry.png 大家右键另存为即可:
修改我们刚刚书写的 activity_main.xml :
代码分析:
修改我们的 MainActivity 里代码:
代码说明:
运行效果:
注意:
重复加载4次还是没有加载出来的时候才会显示 failureImage(失败图) 的图片
修改我们刚刚书写的 activity_main.xml :
代码说明:
MainActivity 中的代码无需修改。
运行效果:
重试+进度图+失败图 | 进度图+正确图 |
---|---|
这里呢,我们的背景图采用的是一个系统所提供的颜色中的一种。
修改我们刚刚书写的 activity_main.xml :
代码说明:
MainActivity 中的代码无需修改,运行效果:
这里呢,我们的背景图采用的是一个系统所提供的颜色中的一种。
修改我们刚刚书写的 activity_main.xml :
代码说明:
MainActivity 中的代码无需修改。
运行效果:
从运行效果来看,叠加图在最上面,覆盖了下面的图。
一行代码搞定圆形图:设置roundAsCircle为true;
修改我们刚刚书写的 activity_main.xml :
代码说明:
MainActivity 中的代码无需修改。
运行效果:
可以看到,从图片开始加载一直到图片下载完毕,整个图像都是圆形的。
修改我们刚刚书写的 activity_main.xml :
代码说明:
MainActivity 中的代码无需修改。
运行效果:
可以看到,从图片开始加载一直到图片下载完毕,整个图像都是圆角的。
圆角属性 | 圆角属性 |
---|---|
左上角是否为圆角fresco:roundTopLeft="false" |
右上角是否为圆角fresco:roundTopRight="false" |
左下角是否为圆角fresco:roundBottomLeft="false" |
右下角是否为圆角fresco:roundBottomRight="false" |
注意:
当我们同时设置图像显示为圆形图像和圆角图像时,只会显示为圆形图像。
修改我们刚刚书写的 activity_main.xml :
代码说明:
MainActivity 中的代码无需修改。
运行效果(左边显示的是带边框的圆形图像,右边显示的是带边框的圆角图像):
修改我们刚刚书写的 activity_main.xml :
代码说明:
MainActivity 中的代码无需修改。
运行效果(左边为圆形效果,右边为圆角效果):
类型 | 描述 |
---|---|
center | 居中,无缩放 |
centerCrop | 保持宽高比缩小或放大,使得两边都大于或等于显示边界。居中显示。 |
focusCrop | 同centerCrop, 但居中点不是中点,而是指定的某个点 |
centerInside | 使两边都在显示边界内,居中显示。如果图尺寸大于显示边界,则保持长宽比缩小图片。 |
fitCenter | 保持宽高比,缩小或者放大,使得图片完全显示在显示边界内。居中显示 |
fitStart | 同上。但不居中,和显示边界左上对齐 |
fitEnd | 同fitCenter, 但不居中,和显示边界右下对齐 |
fitXY | 不保存宽高比,填充满显示边界 |
none | 如要使用tile mode显示, 需要设置为none |
推荐使用:focusCrop 类型 Fresco中文说明对这一点也有详情的说明: 缩放
XML属性 | 意义 |
---|---|
fadeDuration | 淡入淡出动画持续时间(单位:毫秒ms) |
actualImageScaleType | 实际图像的缩放类型 |
placeholderImage | 占位图 |
placeholderImageScaleType | 占位图的缩放类型 |
progressBarImage | 进度图 |
progressBarImageScaleType | 进度图的缩放类型 |
progressBarAutoRotateInterval | 进度图自动旋转间隔时间(单位:毫秒ms) |
failureImage | 失败图 |
failureImageScaleType | 失败图的缩放类型 |
retryImage | 重试图 |
retryImageScaleType | 重试图的缩放类型 |
backgroundImage | 背景图 |
overlayImage | 叠加图 |
pressedStateOverlayImage | 按压状态下所显示的叠加图 |
roundAsCircle | 设置为圆形图 |
roundedCornerRadius | 圆角半径 |
roundTopLeft | 左上角是否为圆角 |
roundTopRight | 右上角是否为圆角 |
roundBottomLeft | 左下角是否为圆角 |
roundBottomRight | 右下角是否为圆角 |
roundingBorderWidth | 圆形或者圆角图边框的宽度 |
roundingBorderColor | 圆形或者圆角图边框的颜色 |
roundWithOverlayColor | 圆形或者圆角图底下的叠加颜色(只能设置颜色) |
viewAspectRatio | 控件纵横比 |
本教程最终项目GitHub地址:https://github.com/scp504677840/Fresco
标签:
原文地址:http://www.cnblogs.com/a446276468/p/5741314.html