Fresco前传(1)：一句话搞定图片显示（同时还可以满足各种小需求哦）

写在前边

N久没写博客了，最近公司项目的图片处理框架换成了Fresco，我被派去负责这块的公共方法的处理。最近闲下来了，用了这么久的Fresco，自己也琢磨了一些小技巧，虽然比不了很多大牛，登不上大雅之堂。但是鉴于现在网络上关于Fresco的讲解和使用的文章还比较少，估计还是能够给各位看官，带来几个开胃小菜的。

结合之前使用，粗略的会分为以下这些方面来介绍和说明一下使用的心得，当然代码也会放在GitHub上的。

1. SimpleDraweeView的简易封装，显示图片只需要一句话。

2. 根据宽高比例来确定图片控件大小

3. 9Path图+Overly实现标识符效果。

4. Fresco默认没有对GIF图进行处理。如何解决，大量GIF会导致OOM的问题。

5. 结合列表使用时，重复设置图片加载导致闪烁的问题（通过设置TAG解决）。

6. 使用后处理器对下载完成后的图片进行处理-截取/缩放。

7. Fresco结合PhotoView使用，并可以使用SimpleDraweeView加载进度属性。

8. 结合RecyclerView，简单的实现延迟加载的效果。

今天就从第一个开始。

其实不用我说，Fresco官方给我提供的最简单的一句话加载的方式mSimpleDraweeView.setImageURI(uri);，虽然很简单，但是明显的不太适合日常项目开发的需求。

按照官网的提示，想实现定制化的需求，你可能需要设置Hierarchy和Controller和ImageReuqest等等。所以，你的代码可能是这样子的。

GenericDraweeHierarchy   hierarchy = new GenericDraweeHierarchyBuilder(context.getResources())
            .build();
draweeView.setHierarchy(hierarchy);
ImageRequest imageRequest = ImageRequestBuilder.newBuilderWithSource(uri)
            .build();
DraweeController controller = Fresco.newDraweeControllerBuilder()
            .setImageRequest(imageRequest)
            .setOldController(view.getController())
            .build()
draweeView.setController(controller);

这时候你是不是心中有一万个草泥马奔腾而过，你就是想显示一张图片而已，至于这么麻烦么。
你看看人家Glide：

Glide.with(context).load("http://inthecheesefactory.com/uploads/source/glidepicasso/cover.jpg").into(ivImg);

还有Picasso：

Picasso.with(context).load(url).into(view);

你是不是有点崩溃了，当当当当，这时候你一定在想怎么可以一句话实现图片加载，同时又可以简单的设置如下N多种配置的一种呢？

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view"
    android:layout_width="20dp"
    android:layout_height="20dp"
    fresco:fadeDuration="300"
    fresco:actualImageScaleType="focusCrop"
    fresco:placeholderImage="@color/wait_color"
    fresco:placeholderImageScaleType="fitCenter"
    fresco:failureImage="@drawable/error"
    fresco:failureImageScaleType="centerInside"
    fresco:retryImage="@drawable/retrying"
    fresco:retryImageScaleType="centerCrop"
    fresco:progressBarImage="@drawable/progress_bar"
    fresco:progressBarImageScaleType="centerInside"
    fresco:progressBarAutoRotateInterval="1000"
    fresco:backgroundImage="@color/blue"
    fresco:overlayImage="@drawable/watermark"
    fresco:pressedStateOverlayImage="@color/red"
    fresco:roundAsCircle="false"
    fresco:roundedCornerRadius="1dp"
    fresco:roundTopLeft="true"
    fresco:roundTopRight="false"
    fresco:roundBottomLeft="false"
    fresco:roundBottomRight="true"
    fresco:roundWithOverlayColor="@color/corner_color"
    fresco:roundingBorderWidth="2dp"
    fresco:roundingBorderColor="@color/border_color"
  />

提前声明呀，本人还是很菜滴，设计模式很多都不是太懂，但是项目要用就硬着头皮封装了一下。

我这里直接继承了SimpleDraweeView类，并在内部提供了很多设置属性的方法，同时又给出了一些默认的Hierarchy和Controller等。

就好像下面这个样子，但是这些都是私有方法，你既不需要重写，也不需要调用，内部已经做好了：

private GenericDraweeHierarchy getGenericDraweeHierarchy(Context context, MySimpleDraweeView draweeView) {
        return new GenericDraweeHierarchyBuilder(context.getResources())
                .setFadeDuration(draweeView.getFadeDuration())
                .setOverlay(draweeView.getmOverlay())
                .setActualImageScaleType(draweeView.getDraweeViewScaleType())
                .setProgressBarImage(draweeView.getProgressBar(), ScalingUtils.ScaleType.CENTER_INSIDE)
                .setPlaceholderImage(draweeView.getPlaceholderDrawable(), ScalingUtils.ScaleType.CENTER_CROP)
                .build();
    }

    private GenericDraweeHierarchy getRoundGenericDraweeHierarchy(Context context, MySimpleDraweeView draweeView) {
        return new GenericDraweeHierarchyBuilder(context.getResources())
                .setPlaceholderImage(draweeView.getPlaceholderDrawable())
                .setActualImageScaleType(ScalingUtils.ScaleType.CENTER_CROP)
//                .setProgressBarImage(draweeView.getProgressBar(), ScalingUtils.ScaleType.CENTER_INSIDE)
                .setRoundingParams(RoundingParams.asCircle())
                .build();
    }

private ImageRequest getImageRequest(MySimpleDraweeView view, Uri uri) {
        switch (mPictureType) {
            case JPEG:
            case JPG:
            case PNG:
                return ImageRequestBuilder.newBuilderWithSource(uri)
                        .setLowestPermittedRequestLevel(view.getLowestPermittedRequestLevel())
                        .setPostprocessor(view.getPostProcessor())//修改图片
                        .setResizeOptions(view.getResizeOptions())
                        .setAutoRotateEnabled(true)
                        .setLocalThumbnailPreviewsEnabled(true)
                        .setProgressiveRenderingEnabled(false)
                        .build();
            case GIF:
                // 对GIF图，Fresco没有处理，自己手动处理
                // 1，解析图片宽高，判断是否需要处理
                // 2，不需要处理，直接返回；需要处理则处理后，生成一个拷贝文件，并替换url
                if (uri.getScheme().toLowerCase().contains("file") && mPictureType.equals(PictureType.GIF) && isCutGif) {
                    uri = (new Uri.Builder()).scheme("file").path(Utils.getCopyFile(new File(uri.getPath())).getAbsolutePath()).build();
                    return ImageRequestBuilder.newBuilderWithSource(uri)
                            .setLowestPermittedRequestLevel(view.getLowestPermittedRequestLevel())
                            .setPostprocessor(view.getPostProcessor())//修改图片
                            .setResizeOptions(view.getResizeOptions())
                            .setAutoRotateEnabled(true)
                            .build();
                }
                return ImageRequestBuilder.newBuilderWithSource(uri)
                        .setLowestPermittedRequestLevel(view.getLowestPermittedRequestLevel())
                        .setAutoRotateEnabled(true)
                        .build();
        }
        throw new RuntimeException("must have a ImageRequest");
    }


    private DraweeController getDraweeController(ImageRequest imageRequest, MySimpleDraweeView view) {
        return Fresco.newDraweeControllerBuilder().setAutoPlayAnimations(view.getAutoPlayAnimations())//自动播放图片动画
                .setControllerListener(view.getControllerListener())
                .setImageRequest(imageRequest)
                .setOldController(view.getController())
                .build();
    }

当然

最关键的是提供了一些方便的设置属性的方法：

// 显示图片
public void setDraweeViewUrl(String url);
public void setDraweeViewResId(int resId);
public void setDraweeViewUri(Uri uri)'
// 显示圆形图片
public void setRoundDraweeViewUrl(String url);
public void setRoundDraweeViewResId(int resId);

// 根据比例设置控件的宽高
public void setWidthAndHeight(float width, float height);
// 缩放图片
public void setResizeOptions(ResizeOptions resizeOptions);
// 设置加载进度
public void setProgressBar(Drawable mProgressBar)
// 是否截取GIF
public void setIsCutGif(boolean isCutGif);
// 设置Hint
public void setNumberChartIdentify(int number);
// 设置Gif的Hint
public void setGifChartIdentify(boolean isShowGifIdentify);

等等一大堆的方法，当然不符合你的需求你可以随时扩展。

现在，加载一张图片就可能是这个样子。

photo_1.setWidthAndHeight(1024, 768);
photo_1.setAutoPlayAnimations(true);
photo_1.setGifChartIdentify(true);    photo_1.setDraweeViewUrl("http://git.oschina.net/biezhihua/MyResource/raw/master/25-173250_974.gif");

photo_2.setWidthAndHeight(1024, 768);
photo_2.setLongChartIdentify(true);      photo_2.setDraweeViewUrl("http://git.oschina.net/biezhihua/MyResource/raw/master/20130321151838_XQYyW.thumb.700_0.jpeg");

photo_3.setWidthAndHeight(1024, 768);
photo_3.setNumberChartIdentify(99);        photo_3.setDraweeViewUrl("http://git.oschina.net/biezhihua/MyResource/raw/master/3_1024x768.jpg");

下面是效果图。

这次基本上就这些了，东西不多，都是些小菜，欢迎各位看管拍砖～

O(∩_∩)O哈哈~。

最后

放上Github的地址： https://github.com/biezhihua/MySimpleDraweeView

各位看管，小弟我第一次上传代码给别人看，如果对你有帮助，不敢像很多大神要Fork，就给个Start鼓励一下（偷笑中），谢谢各位了。