关于Fresco
之前在公司实习的时候,我们的项目一直使用的是Fresco,用它来加载图片显示图片,而且可以显示圆角图片,非常方便,后来了解到Fresco时Facebook的一个开源项目,是关于图片的一套解决方案,在2015年非常的流行!好了,不多废话,我们进入Fresco的世界吧!
Fresco的介绍
根据官方的介绍,Fresco时一个强大的图片加载组件,专为Android加载图片,支持Android2.3(Api9)以上Android系统。大家可以区看官方文档,这里讲的更加多,更加详细 http://www.fresco-cn.org/
Fresco有什么功能
1.强悍的内存管理
Fresco将图片放在一个特别的内存区域,在图片不显示的时候会将占用的内存给释放掉,使得APP更加流畅,减少OOM的出现
2.图片的渐进式呈现
渐进式呈现即图片先显示大致的轮廓,然后随着图片下载的继续,图片逐渐清晰,直到下载完成,对于慢网络,这个特性给用户良好的使用体验。我们需要做的就是提供一个图片的url,剩下的事情就交给Fresco
3.支持Gif和WebP格式
4.呈现炫酷的图像
Fresco的Drawees设计,可以使用一些特性:比如,自定义居中焦点(对人脸识别有帮助),可以显示圆角图圆圈图,下载失败之后点击重新下载,自定义占位图等
5.图像的加载
Fresco的image pipeline设计,允许用户在多方面控制图片的加载,比如:使用图片的三级缓存,加载完成的回调通知,缩放旋转图片等
怎么使用Fresco
1.引入到工程中
dependencies
{
compile ‘com.facebook.fresco:fresco:0.8.0+’
}
2.网络权限就不用说了,同时初始化Fresco
在 Application 初始化时,在应用调用 setContentView() 之前,进行初始化:Fresco.initialize(context);
3.使用SimpleDraweeView
com.facebook.drawee.view.SimpleDraweeView
android:id=”@+id/my_image_view”
android:layout_width=”20dp”
android:layout_height=”20dp”
fresco:placeholderImage=”@drawable/my_drawable”
代码中调用:
SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
draweeView.setImageURI(uri),剩下的事情就交给Fresco了:
显示占位图直到加载完成;
下载图片;
缓存图片;
图片不再显示时,从内存中移除;
在项目中如何封装Fresco
为了让我们在项目中更好的使用Fresco,我们需要对Fresco进行进一步的封装,封装一个工具类FrescoHelper,使用Fresco的帮组类(封装的目的有两个,首先时方便我们在项目中的使用,再者就是有利于程序的解耦,当我们不再使用这一套方案的时候,我们不需要在工程使用Fresco的地方一个一个的修改,只是将封装的FrescoHelper换成另外一套方案即可,以免给自己挖坑).
下面就是FrescoHelper具体的封装:
/**
* uri对应的图片在指定宽高在simpleDraweeView上显示
* @param simpleDraweeView
* @param uri
* @return
*/
public static void setImage(SimpleDraweeView simpleDraweeView, Uri uri) {
ImageRequest request = ImageRequest.fromUri(uri);
setImage(simpleDraweeView, request);
}
/**
* uri对应的图片在指定宽高在simpleDraweeView上显示,options主要是用来设置大小,Fresco会找到最适应的图片大小
* @param simpleDraweeView
* @param uri
* @param options
*/
public static void setImage(SimpleDraweeView simpleDraweeView, Uri uri, ResizeOptions options) {
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
.setResizeOptions(options)
.setAutoRotateEnabled(true)
.build();
setImage(simpleDraweeView, request);
}
/**
* 将ImageRequest请求返回的图片显示在simpleDraweeView上
* @param simpleDraweeView
* @param request
*/
public static void setImage(SimpleDraweeView simpleDraweeView, ImageRequest request) {
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setImageRequest(request)
.setTapToRetryEnabled(true)
.setOldController(simpleDraweeView.getController())
.build();
simpleDraweeView.setController(controller);
simpleDraweeView.getHierarchy().setActualImageScaleType(ScalingUtils.ScaleType.CENTER_CROP);
}
/**
* 给simpleDraweeView设置res下的资源图片
* @param simpleDraweeView
* @param resId 图片对应的resId
*/
public static void setImageResource(SimpleDraweeView simpleDraweeView, @DrawableRes int resId) {
ImageRequestBuilder imageRequest = ImageRequestBuilder.newBuilderWithResourceId(resId);
simpleDraweeView.setImageURI(imageRequest.getSourceUri());
}
/**
* 将uri对应的图片在zoomableDraweeView上显示
* @param zoomableDraweeView
* @param uri
*/
public static void setImage(ZoomableDraweeView zoomableDraweeView, Uri uri) {
zoomableDraweeView.setController(
Fresco.newDraweeControllerBuilder()
.setUri(uri)
.build());
Resources resources = zoomableDraweeView.getResources();
GenericDraweeHierarchy hierarchy =
new GenericDraweeHierarchyBuilder(resources)
.setActualImageScaleType(ScalingUtils.ScaleType.FIT_CENTER)
.setPlaceholderImage(resources.getDrawable(R.color.black))
.setProgressBarImage(resources.getDrawable(R.drawable.loading_drawable))
.build();
zoomableDraweeView.setBackgroundColor(resources.getColor(R.color.black));
zoomableDraweeView.setHierarchy(hierarchy);
}
/**
* uri对应的图片在zoomableDraweeView上显示,部分手机在显示本地图片时必须指定大小
* @param zoomableDraweeView
* @param uri
* @param options
*/
public static void setImage(ZoomableDraweeView zoomableDraweeView, Uri uri, ResizeOptions options) {
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
.setResizeOptions(options)
.setAutoRotateEnabled(true)
.build();
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setImageRequest(request)
.setTapToRetryEnabled(true)
.setOldController(zoomableDraweeView.getController())
.build();
zoomableDraweeView.setController(controller);
Resources resources = zoomableDraweeView.getResources();
GenericDraweeHierarchy hierarchy =
new GenericDraweeHierarchyBuilder(resources)
.setActualImageScaleType(ScalingUtils.ScaleType.FIT_CENTER)
.setPlaceholderImage(resources.getDrawable(R.color.black))
.setProgressBarImage(resources.getDrawable(R.drawable.loading_drawable))
.build();
zoomableDraweeView.setBackgroundColor(resources.getColor(R.color.black));
zoomableDraweeView.setHierarchy(hierarchy);
}
/**
* 给photo的图片以半径为radius的圆角显示
* @param photoView
* @param radius
*/
public static void setCornersRadius(SimpleDraweeView photoView, int radius) {
GenericDraweeHierarchy hierarchy = photoView.getHierarchy();
RoundingParams roundingParams = hierarchy.getRoundingParams();
if (roundingParams == null) {
roundingParams = new RoundingParams();
}
roundingParams.setCornersRadius(radius);
hierarchy.setRoundingParams(roundingParams);
}
Drawees设计
Drawees负责图片的呈现,包含几个组件,有点像MVC模式