Android 开发 图片网络缓存加载框架Fresco

简介

　　Fresco是一个在Android应用程序中显示图像的强大系统。

Fresco负责图像的加载和显示。它将从网络、本地存储或本地资源加载图像，图像加载完成前会显示一个占位图片。它有两个级别的缓存：一个在内存中，另一个在内部存储器中。

在android 4.x及更低版本中，Fresco将图像放在android内存的一个特殊区域。这可以让您的应用程序运行得更快，减少因为内存不足的错误。

　　github地址：https://github.com/facebook/fresco#requirements

　　Fresco还支持：

• 渐进式JPEG流
• 显示动画gif和webp
• 图像加载和显示的广泛定制（将图片变成圆形或者用有圆角的矩形）
• 图片加载中的占位图、加载失败的占位图、重新加载的占位图
  　　

主要依赖

implementation 'com.facebook.fresco:fresco:2.0.0'

其他依赖

compile 'com.facebook.fresco:animated-gif:1.5.0'//加载gif动图需添加此库
compile 'com.facebook.fresco:animated-webp:1.5.0'//加载webp动图需添加此库
compile 'com.facebook.fresco:webpsupport:1.5.0'//支持webp需添加此库
compile 'com.facebook.fresco:imagepipeline-okhttp3:1.5.0'//网络实现层使用okhttp3需添加此库
compile 'jp.wasabeef:fresco-processors:2.1.0@aar'//用于提供fresco的各种图片变换

初始化说明

//　　使用Fresco需要初始化，建议是在基类里初始化

public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Fresco.initialize(this);
    }
}

如何使用xml属性

<!-- 其他元素-->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

xmlns:fresco="http://schemas.android.com/apk/res-auto" 是关键。

使用说明

　　在官方的https://www.fresco-cn.org/docs/index.html网站中提供非常详细的使用说明，并且是中文文档，直接查看即可。下面只提供一些简单的基本属性与使用说明。

基本属性说明

<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"　　　　　　//圆形图 true圆形 false不是圆形
  fresco:roundedCornerRadius="1dp"　　　　//矩形圆角图
  fresco:roundTopLeft="true"　　　　//左上是否圆角 true是 false否
  fresco:roundTopRight="false"　　　　//右上是否圆角
  fresco:roundBottomLeft="false"　　　　//左下是否圆角
  fresco:roundBottomRight="true"　　　　//右下是否圆角
  fresco:roundWithOverlayColor="@color/corner_color"　　　　//设置圆形图或者圆角后的背景颜色（不可以使用图片）
  fresco:roundingBorderWidth="2dp"　　　　//圆形图或者圆角图边框的宽度
  fresco:roundingBorderColor="@color/border_color"　　　　//圆形图或者圆角图边框颜色
/>

图片尺寸缩放类型

• 类型描述
• center居中，无缩放
• centerCrop保持宽高比缩小或放大，使得两边都大于或等于显示边界。居中显示。
• focusCrop同centerCrop, 但居中点不是中点，而是指定的某个点
• centerInside使两边都在显示边界内，居中显示。如果图尺寸大于显示边界，则保持长宽比缩小图片。
• fitCenter保持宽高比，缩小或者放大，使得图片完全显示在显示边界内。居中显示
• fitStart同上。但不居中，和显示边界左上对齐
• fitEnd同fitCenter， 但不居中，和显示边界右下对齐
• fitXY不保存宽高比，填充满显示边界
• none如要使用tile mode显示, 需要设置为none

基本的加载网络图片

Uri uri = Uri.parse("https://raw.githubusercontent.com/facebook/fresco/gh-pages/static/logo.png");
SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
draweeView.setImageURI(uri);

先显示低分辨率的图，然后是高分辨率的图

假设你要显示一张高分辨率的图，但是这张图下载比较耗时。与其一直显示占位图，你可能想要先下载一个较小的缩略图。

这时，你可以设置两个图片的URI，一个是低分辨率的缩略图，一个是高分辨率的图。

Uri lowResUri, highResUri;
DraweeController controller = Fresco.newDraweeControllerBuilder()
    .setLowResImageRequest(ImageRequest.fromUri(lowResUri))
    .setImageRequest(ImageRequest.fromUri(highResUri))
    .setOldController(mSimpleDraweeView.getController())
    .build();
mSimpleDraweeView.setController(controller);

动图无法在低分辨率那一层显示。

SimpleDraweeView 自适应图片高度

因为SimpleDraweeView 自身不会根据实际图片改变高度或宽度，所以我们需要添加控制器监听，来监听图片返回时的图片信息重新设置view的高度或者宽度。下面的例子就是根据图片高度自适应SimpleDraweeView的高度。

/**
     * 设置图片view并且自适应高度
     */
    private void setImageView(SimpleDraweeView simpleDraweeView, String uri) {
        ControllerListener controllerListener = new ControllerListener() {
            @Override
            public void onSubmit(String id, Object callerContext) {
                //在提交图像请求之前回调

            }

            @Override
            public void onFinalImageSet(String id, @Nullable Object imageInfo, @Nullable Animatable animatable) {
                //在设置最终图像后回调
                if (imageInfo == null){
                    return;
                }
                ImageInfo info = (ImageInfo) imageInfo;
                ViewGroup.LayoutParams layoutParams = simpleDraweeView.getLayoutParams();
                layoutParams.height = info.getHeight();
                simpleDraweeView.setLayoutParams(layoutParams);

            }

            @Override
            public void onIntermediateImageSet(String id, @Nullable Object imageInfo) {
                //设置任何中间图像后回调

            }

            @Override
            public void onIntermediateImageFailed(String id, Throwable throwable) {
                //在获取中间图像失败后回调

            }

            @Override
            public void onFailure(String id, Throwable throwable) {
                //在获取最终图像失败后回调

            }

            @Override
            public void onRelease(String id) {
                //在控制器释放获取的图像后回调

            }
        };
        DraweeController draweeController = Fresco.newDraweeControllerBuilder()
                .setControllerListener(controllerListener)
                .setUri(uri)
                .build();
        simpleDraweeView.setController(draweeController);

    }

加载显示本地图片

类型	Scheme	示例
远程图片	http://, https://	HttpURLConnection 或者参考 使用其他网络加载方案
本地文件	file://	FileInputStream
Content provider	content://	ContentResolver
asset目录下的资源	asset://	AssetManager
res目录下的资源	res://	Resources.openRawResource
Uri中指定图片数据	data:mime/type;base64,	数据类型必须符合 rfc2397规定 (仅支持 UTF-8)

用法demo:

demo1:

Uri uri = Uri.parse("res://包名(实际可以是任何字符串甚至留空)/" + R.drawable.ic_launcher);

demo2:

Uri uri = Uri.parse("res://com.xxx.xxx/" + R.mipmap.photo);
userIcon.setImageURI(uri);

demo3:

Uri imageUri = Uri.parse("file://"+filePath);
image.setImageURI(imageUri);

demo4：

image.setImageURI("asset://android_asset/permissionimage/1.png");

另外,Fresco还有一个功能,它是支持自动显示视频缩略图的.只要使用直接把视频路径导入就行.

清除指定路径图片缓存

                    ImagePipeline imagePipeline = Fresco.getImagePipeline(); //因为Fresco框架对同名文件会自动使用缓存,导致图片会显示之前的图像，所以这里为了保证实时更新图片需要清除这种图片的缓存
                    Uri uri = Uri.parse("file://" + address);
                    imagePipeline.evictFromMemoryCache(uri);//从内存缓存中逐出
                    imagePipeline.evictFromDiskCache(uri);//从磁盘缓存中逐出
                    imagePipeline.evictFromCache(uri);//从缓存中逐出

设置磁盘缓存

ImagePipelineConfig.Builder imagePipelineConfigBuilder = ImagePipelineConfig.newBuilder(context);
imagePipelineConfigBuilder.setMainDiskCacheConfig(DiskCacheConfig.newBuilder(context)
.setBaseDirectoryPath(context.getExternalCacheDir())//设置磁盘缓存的路径
.setBaseDirectoryName(BaseConstants.APP_IMAGE)//设置磁盘缓存文件夹的名称
.setMaxCacheSize(MAX_DISK_CACHE_SIZE)//设置磁盘缓存的大小
.build());
ImagePipelineConfig config = imagePipelineConfigBuilder.build();
Fresco.initialize(context, config);//初始化