Android图片加载深度探析Fresco

来，做一个小调研，你们的项目中图片加载，使用的是什么？SmartImageView? Image-Loader？Picasso？Glide?还是一些框架中封装的？对于以上的各种图片加载方式，想必大部分人都用过，没用过也听说过，今天咱们主要说的是Fresco。

可能对于大部分开发者而言，Image-Loader是最常用的一个图片加载开源库，其欢迎程度，在Github上star截止发文前已经达到14633，其欢迎程度可见一斑，它适合于所有的ImageView,结合LruCache和DiskLurCache，简单易上手，而且能够一定程度上的节省流量和防止OOM。But,我想说的是，在开发的时候，还是遇到OOM了，这就比较尴尬了！不过，我想说的是，它仍然是比较优秀的。

Picasso是Square公司开源的一个Android图形缓存库，具体来说，我比较喜欢用它，因为什么呢？简单呗，无论是加载本地还是网络图片，一行代码搞定,除了自带内存和硬盘二级缓存功能，在使用复杂的图片压缩转换，还能减少内存消耗，总之，好用的不要不要的。

Glide，不得不细细说一番了，为啥呢？就因为它是谷歌的亲儿子，其地位当然也比其它外亲高贵了许多，优点太多了，什么自带缓存了，支持gif了，缩略图了，对Bitmap的复用和线程优化有着明显的优势。Glide也是支持“所有”的ImageView，使用过程中十分流畅；而且我还发现，很多公司已经注重在用，比如做即时通讯的环信，可见其使用范围在一步步壮大。

既然有了以上的很多开源库，为啥还要再推出Fresco，既然有Fresco的存在，想必自有它的魅力所在，而且其魅力吸引着我一步步前去探析。

来，我们一起去它的老巢去参观参观（Fresco官方网址：https://www.fresco-cn.org），打开官方网址之后，你会看到一句非常有气势的话：专为ANDROID加载图片， 你说，是有多牛才能放出这样一句话，可见其实力不容小觑。它的相关API，及github地址，官网中也给排列出来，对于开发者而言，真的是再方便不过了。

再牛的话，在这也不多闲侃，毕竟官网中的那些话，比我要权威的多的多，但是我想说的是它的不足之处，没办法，我就是这样一个鸡蛋里挑骨头的人；虽然它自带缓存，支持gif,缩略图，对图片的缓存管理对5.0以下支持更是妥妥的，功能丰富，自带神器等等，But!!!,它只支持自己的控件，对！你没有看错，它就是只支持自己的控件，还有一个比较恶心的，Fresco不支持warp_content。

关于怎么使用，怎么引入项目中，请自行去官网查看，毕竟要我写，我也不过是代码的搬运工，在这就没必要啰嗦了，在这里简单的分享一下几个比较重要的点。

引入到项目之后，如果要使用的话，第一要推荐的就是FrescoImageView，可以对其做一个简单的封装：

public static void loadFrescoImage(FrescoImageView frescoImageView, 
                                   String uri, int defaultImg, boolean pathIsLocal) {
loadFrescoImage(frescoImageView, uri, defaultImg, 0, false, pathIsLocal, true, null, null);
}

public static void loadFrescoImage(FrescoImageView frescoImageView, String uri, 
                                   int defaultImg, boolean pathIsLocal, Point showSize) {
loadFrescoImage(frescoImageView, uri, defaultImg, 0, false, pathIsLocal, true, showSize, null);
}

public static void loadFrescoImage(FrescoImageView frescoImageView, String uri, 
                                   int defaultImg, int radius, boolean pathIsLocal, Point showSize) {
loadFrescoImage(frescoImageView, uri, defaultImg, radius, false, pathIsLocal, true, showSize, null);
}

public static void loadFrescoImage(FrescoImageView frescoImageView, String uri, 
                                   int defaultImg, boolean pathIsLocal, Postprocessor postprocessor) {
loadFrescoImage(frescoImageView, uri, defaultImg, 0, false, pathIsLocal, true, null, postprocessor);
}

public static void loadFrescoImage(FrescoImageView frescoImageView, String uri, 
                                   int defaultImg, boolean pathIsLocal, Point point, Postprocessor postprocessor) {
loadFrescoImage(frescoImageView, uri, defaultImg, 0, false, pathIsLocal, true, point, postprocessor);
}

public static void loadFrescoImage(FrescoImageView frescoImageView, String uri, 
                                   int defaultImg, int radius, boolean pathIsLocal, Point point, Postprocessor postprocessor) {
loadFrescoImage(frescoImageView, uri, defaultImg, radius, false, pathIsLocal, true, point, postprocessor);
}

public static void loadFrescoImage(FrescoImageView frescoImageView, String uri, 
                                   int defaultImg, int radius, boolean pathIsLocal) {
loadFrescoImage(frescoImageView, uri, defaultImg, radius, false, pathIsLocal, true, null, null);
}

public static void loadFrescoImageCircle(FrescoImageView frescoImageView, 
                                         String uri, int defaultImg, boolean pathIsLocal) {
loadFrescoImage(frescoImageView, uri, defaultImg, 0, true, pathIsLocal, true, null, null);
}

/**
 * @param frescoImageView
 * @param uri               URL或者本地uri
 * @param defaultImg        默认资源
 * @param radius            弧形角度
 * @param showCircle        是否显示圆
 * @param pathIsLocal       是否加载的是本地资源
 * @param gifAnima          是否执行GIF动画
 * @param showSize          是否修改显示大小
 * @param postprocessor     对图像进行二次处理
 */
public static void loadFrescoImage(FrescoImageView frescoImageView, String uri, int defaultImg,
                                   int radius, boolean showCircle, boolean pathIsLocal, boolean gifAnima,
                                   Point showSize, Postprocessor postprocessor) {
init(frescoImageView, radius, showCircle, gifAnima, showSize, postprocessor);
    if (pathIsLocal) {
        frescoImageView.loadLocalImage(uri, defaultImg);
    } else {
        frescoImageView.loadView(uri, defaultImg);
    }
}

private static void init(FrescoImageView frescoImageView, int radius, boolean showCircle, boolean gifAnima,
                         Point showSize, Postprocessor postprocessor) {
    frescoImageView.setAnim(gifAnima);
    frescoImageView.setCornerRadius(radius);
    frescoImageView.setFadeTime(300);
    if (showCircle)
        frescoImageView.asCircle();
    if (postprocessor != null)
        frescoImageView.setPostProcessor(postprocessor);
    if (showSize != null) {
        frescoImageView.setResize(showSize);
    }
}

第二个要推荐的是fresco-processors，它主要是对图的二次处理，继承于Postprocessor ，让我们用图片说话：高斯模糊，改变形状、颜色、马赛克无所不能，具体用法请看官网。

第三个要推荐的厉害了，PhotoDraweeView,功能与丁丁大名的PhotoView一样，支持双击放大，单击返回，手动放大与缩小等，无缝接入Fresco,是不是很想试一下，那还等什么，demo走起吧！

第四个要推荐的和上一个很类似，SubsamplingScaleImageView这个用起来绝对让你兴奋不已，它采用的是BitmapRegionDecoder的方式，分段加载显示超长图，拒绝OOM，而且支持双击放大，单击返回，手动放大等，虽然目前只能加载本地，但我们可以缓存啊！

  final SubsamplingScaleImageView imageView = (SubsamplingScaleImageView)
final String tmpUri = list.get(position).getUri();
    final Uri uri = Uri.parse((tmpUri .startsWith("http")) ? tmpUri : (tmpUri .startsWith("file://")) ? tmpUri : "file://" + tmpUri );
if (tmpUri .startsWith("http")) {
        File file = FrescoUtil.getLocalCache(uri);//Fresco的本地缓存
        if (file != null && file.exists()) {
        imageView.setImage(ImageSource.uri(file.getAbsolutePath()));
        } else {
        FrescoUtil.loadImage(tmpUri , context, 0, 0, new LoadingListener() {
@Override
public void onSuccess(Bitmap bitmap) {
        File file = FrescoUtil.getLocalCache(uri);
        if (file != null && file.exists()) {
        imageView.setImage(ImageSource.uri(file.getAbsolutePath()));
        }
        }
@Override
public void onFail() {
        }
        });
        }
        } else {
        imageView.setImage(ImageSource.uri(tmpUri .replace("file://", "")));
        }

Fresco的初始化要写在Applicantion里，一定要打开DownsampleEnabled来让图片压缩，不然全图展示超大的图片还是会有OOM，如果用了这个，在底层Fresco就帮助你调整好了，回调给你的图片比例采样后一定不会OOM，而且因为Resizing 支持JPG，所以这一定要打开。

ImagePipelineConfig config = ImagePipelineConfig.newBuilder(this)
        .setDownsampleEnabled(true)
        .build();
Fresco.initialize(this, config);

Fresco在列表加载中一定要加上Resizing 来减少内存的开销，如果有必要，还可以在滑动的时候做优化处理。

@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
    switch (newState) {
case RecyclerView.SCROLL_STATE_IDLE://停止滑动
            if (Fresco.getImagePipeline().isPaused())
                Fresco.getImagePipeline().resume();
            break;
        case RecyclerView.SCROLL_STATE_DRAGGING:
if (preScrollState == RecyclerView.SCROLL_STATE_SETTLING) {
//触摸滑动不需要加载
                Fresco.getImagePipeline().pause();
            } else {
//触摸滑动需要加载
                if (Fresco.getImagePipeline().isPaused())
                    Fresco.getImagePipeline().resume();
            }
break;
        case RecyclerView.SCROLL_STATE_SETTLING://惯性滑动
            Fresco.getImagePipeline().pause();
            break;
    }
    preScrollState = newState;
}

不能wrap_content，5.0的过场动画需要用到下方的配置，根据你前后的跳转来设置

getWindow().setSharedElementEnterTransition(DraweeTransition.createTransitionSet(
    ScalingUtils.ScaleType.CENTER_CROP, ScalingUtils.ScaleType.CENTER_CROP));
    getWindow().setSharedElementReturnTransition(DraweeTransition.createTransitionSet(
    ScalingUtils.ScaleType.CENTER_CROP, ScalingUtils.ScaleType.CENTER_CROP));

不要向Fresco设置大量大尺寸的R.drawable.XX资源，因为这种类似的内存释放不及时，多跳转几个页面很不幸你就会有OOM的可能，这中问题主要是在于设置背景，一般的loading和fail的图片都不会很大，我们选择是把图片保存到SD卡之后，加载本地图片资源，这样可以友好的释放背景大图了。

获取本地图片和下载图片的方法:

/**
 * @param uri
 * @param context
 * @param width
 * @param height
 * @param listener
 */
public static void getImageLoading(String uri, Context context,
                                   int width, int height, final LoadingListener listener) {
    getBitmapWithProcessor(uri, context, width, height, null, listener);
}

/**
 * @param uri
 * @param context
 * @param width
 * @param height
 * @param processor 处理图片的
 * @param listener
 */
public static void getImageLoading(final String uri, Context context,
                                   final int width, final int height,
                                   BasePostprocessor processor, final LoadingListener listener) {

    ResizeOptions resizeOptions = null;
    if (width != 0 && height != 0) {
        resizeOptions = new ResizeOptions(width, height);
    }

    ImageRequest imageRequest = ImageRequestBuilder.newBuilderWithSource(Uri.parse(uri))
            .setProgressiveRenderingEnabled(false) //不渲染
            .setPostprocessor(processor)
            .setResizeOptions(resizeOptions)
            .build();

    ImagePipeline imagePipeline = Fresco.getImagePipeline();

    DataSource<CloseableReference<CloseableImage>> dataSource = 
            imagePipeline.fetchDecodedImage(imageRequest, context);
    dataSource.subscribe(new BaseBitmapDataSubscriber() {
@Override
        protected void onNewResultImpl(Bitmap bitmap) {

        }

@Override
        protected void onFailureImpl(DataSource<CloseableReference<CloseableImage>> dataSource) {
listener.onFail();
        }
    }, CallerThreadExecutor.getInstance());

}

public static boolean isLocalCached(Uri uri) {
    ImagePipeline imagePipeline = Fresco.getImagePipeline();
    DataSource<Boolean> dataSource = imagePipeline.isInDiskCache(uri);
    if (dataSource == null) {
return false;
    }
    ImageRequest imageRequest = ImageRequest.fromUri(uri);
    CacheKey cacheKey = DefaultCacheKeyFactory.getInstance()
            .getEncodedCacheKey(imageRequest, YHApplication.get());
    BinaryResource resource = ImagePipelineFactory.getInstance()
            .getMainFileCache().getResource(cacheKey);
    return resource != null && dataSource.getResult() != null && dataSource.getResult();
}

public static File getLocalCache(Uri uri) {
if (!isLocalCached(uri))
return null;
    ImageRequest imageRequest = ImageRequest.fromUri(uri);
    CacheKey cacheKey = DefaultCacheKeyFactory.getInstance()
            .getEncodedCacheKey(imageRequest, YHApplication.get());
    BinaryResource resource = ImagePipelineFactory.getInstance()
            .getMainFileCache().getResource(cacheKey);
    File file = ((FileBinaryResource) resource).getFile();
    return file;
}