Fresco的使用

关于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模式

DraweeView

DraweeHierarchy

DraweeControoler

DraweeControllerBuilder

Listeners

Image Pipeline

ImageRequest