图片缓存--Fresco

Fresco中文文档

 

本文完全从官网中摘录，用于自身学习时简单记录，详细可查看官文

关于Android图片缓存，这是一个android程序员必须了解的。关于四大图片缓存框架的特性与对比，请移步MDCC传送门

关于Fresco的介绍，请查看链接 

• Fresco是一个强大的图片加载组件
• Fresco中设计有一个叫做image pipeline 的模块。他负责从网络，从本地文件系统，本地资源加载图片。为了最大限度上节省空间和CPU时间，它 含有3级缓存的设计(额，没三级能拿出手？)
• Fresco中设计有一个叫做Drawees模块，方便地显示loading图，当图片不再显示在屏幕上时，及时地释放内存和空间占用。
• Fresco支持Android2.3及以上系统

1、简单实用：

 

 

1.1 引入Fresco

在Module的build.gradle中添加

 

 

 

dependencies {
		...
		compile 'com.facebook.fresco:fresco:0.13.0'
	}

 

 

 

 

1.2 activity代码

 

 

 

 

 

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Fresco.initialize(this);
        setContentView(R.layout.activity_fresco);
        ButterKnife.bind(this);
        simpleDraweeView.setImageURI(Uri.parse("http://scimg.jb51.net/allimg/160815/103-160Q509544OC.jpg"));
    }

Fresco.initialize(this);
通常这一句将在Application的onCreate中是比较合适的，如果只有一个Activity，那么加在Activity里也可以，但要在setContentView之前，也就是要先初始化库，才能完成布局文件的加载。


Uri支持格式：
远程图片 http:// 或者 https：//
本地文件 file：//
Content Provider content：//
asset目录下的资源 asset：//
res目录下的资源 res：//包名/+R……

 

 

 

1.3 对应的xml

 

 

 

 <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/simpledraweeview"
        android:layout_width="300dp"
        android:layout_height="300dp"
        fresco:actualImageScaleType="fitCenter"
        fresco:fadeDuration="300"
        fresco:failureImage="@mipmap/ic_launcher"
        fresco:failureImageScaleType="fitCenter"
        fresco:placeholderImage="@mipmap/ic_launcher"
        fresco:placeholderImageScaleType="fitCenter" />

Drawees 不支持 wrap_content 属性。
所下载的图像可能和占位图尺寸不一致，如果设置出错图或者重试图的话，这些图的尺寸也可能和所下载的图尺寸不一致。
如果大小不一致，假设使用的是 wrap_content，图像下载完之后，View将会重新layout，改变大小和位置。这将会导致界面跳跃。关于它的更多信息，请参考wrap_content


只有希望显示固定的宽高比时，可以使用wrap_content。
如果希望图片以特定的宽高比例显示，例如 4:3，可以在XML中指定:
fresco:viewAspectRatio="1.33"
或者在代码中设置：
mSimpleDraweeView.setAspectRatio(1.33f);

 

 

 

2、Drawee指南

 

 

 

 

 

 

 

2.1  在XML中使用Drawees

 

 

 

 

<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"
  />

 

 

属性意思


layout_width和layout_height 不支持warp_content，但是可以通过setAspectRetio()；来设置宽高比
fadeDuration() 淡..时间
actualImageScaleType 设置图片缩放，通常使用foucsCrop,该属性值会通过算法把人头像放在中间，关于缩放，请移步黑洞
placeholderImage 下载成功之前显示的图片
placeholderImageScaleType
failureImage 加载失败时显示的图片
failureImageScaleType
retryImage 加载失败，提示用户点击重新加载的图片
retryImageScaleType
progressBarImage 提示 用户正在加载，和进度无关
progressBarImageScaleType
progressBarAutoRotateInterval 图片自动旋转的时间间隔
backgroundImage 背景
overlayImage 叠加图
pressedStateOverlayImage 按下时候的叠加图
图片圆角或圆形显示，并不复制和修改Bitmap对象，那样太耗费内存。
roundAsCircle 是否涉及圆圈
roundedCornerRadius 圆角
roundTopLeft、roundTopRight….. 分别设置4个角不同半径，设置为true以后可以再代码中设置角度。通过RoundingParams的setConnersRadii()方法
roundWithOverlayColor，边框的叠加颜色
roundingBorderWidth 边框宽度
roundingBorderColor 边框颜色

 

 

 

 

 

 

 

2.2  在java代码中使用Drawees

 

 

 

 

 

 

2.2.1 设置或更改要显示的图片

SimpleDraweeView 有两个方法可以设置所要加载显示图片，简单的方法就是setImageURI。如果你需要对加载显示的图片做更多的控制和定制，那就需要用到DraweeController。
首先，创建一个DraweeController, 然后传递图片加载请求给PipelineDraweeControllerBuilder.

 

 

随后，你可以控制controller的其他选项了:

 

 

ControllerListener listener = new BaseControllerListener() {...}


DraweeController controller = Fresco.newDraweeControllerBuilder()
    .setUri(uri)
    .setTapToRetryEnabled(true)
    .setOldController(mSimpleDraweeView.getController())
    .setControllerListener(listener)
    .build();


mSimpleDraweeView.setController(controller);

在指定一个新的controller的时候，使用setOldController，这可节省不必要的内存分配。


在更进一步的用法中，自定义图片请求，你需要给Image pipeline 发送一个ImageRequest。下面是一个图片加载后，使用后处理器(postprocessor) 进行图片后处理的例子.

 

 

 

 

 

Uri uri;
Postprocessor myPostprocessor = new Postprocessor() { ... }
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
    .setPostprocessor(myPostprocessor)
    .build();


DraweeController controller = Fresco.newDraweeControllerBuilder()
    .setImageRequest(request)
    .setOldController(mSimpleDraweeView.getController())
    // 其他设置
    .build();

 

 

渐进式jpeg图

 

 

 

	 Uri uri;
        ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
                .setProgressiveRenderingEnabled(true)
                .build();
        DraweeController controller = Fresco.newDraweeControllerBuilder()
                .setImageRequest(request)
                .setOldController(simpleDraweeView.getController())
                .build();
        simpleDraweeView.setController(controller);

动画(gif和webp) 

 

Fresco库到'com.facebook.fresco:fresco:0.10.0'后，出现无法显示GIF图像的问题，

 

把跟GIF相关的库从Fresco中分离出来了，需要引入'com.facebook.fresco:animated-gif:0.10.0'才能加载GIF图像

 

 

 

 Uri uri;
        DraweeController controller = Fresco.newDraweeControllerBuilder()
                .setUri(uri)
                .setAutoPlayAnimations(true)
                .build();
        simpleDraweeView.setController(controller);

 

其他应用很多，不一一介绍，官网介绍很详细