Fresco图片框架详解

忘是亡心i 2022-06-05 02:15 192阅读 0赞

1.简介

Fresco是facebook最新推出的一款android应用中展示图片的强大图片库，

可以从网络，本地存储和本地资源中加载图片，相对于ImageLoader，拥有更快的

图片下载速度以及可以加载和显示gif图等诸多优势，是个很好的图片框架

2.特点：

1）内存管理：在5.0以下系统，Fresco将图片放到一个特别的内存区域，当然，在图片不显示

的时候，占用的内存会自动被释放，这会使得APP更加流畅，减少因图片内存占用而引发的OOM

内存分配采用：系统匿名共享内存

2）渐进式呈现图片

3）支持加载git图，支持webp格式

4）图像的呈现

1.自定义居中焦点（对人脸等图片显示非常有帮助）

2.圆角图

3.下载失败后点击重新下载、

4.自定义占位图

5.指定用户按压时的overlay

5)图像的加载

1.为同一个图片指定不同的远程路径，或者使用已经存在本地缓存中的图片

2。先显示一个低解析度的图片，等高清图片下载完之后再显示高清图

3.加载完成回调通知

4.对于本地图，如有exif缩略图，等大图加载完成之前，可先显示缩略图，

5。缩放或者旋转图片

6.处理以下载的图片

3.下载地址

[https://github.com/facebook/fresco][https_github.com_facebook_fresco]

官方使用网址：

http://fresco-cn.org/docs/index.html、

4.支持URL

1) 远程图片 http:// https://

2）本地文件 file://

3)Content provider content://

4)asset目录下的资源 asset://

5)res目录下的资源 res://

6)uri中指定图片数据 data:mime/type.base64

5、常用API

android:layout\_width="20dp"

// 不支持wrap\_content， 如果要设置宽高比, 需要在Java代码中指定setAspectRatio(float ratio);

android:layout\_height="20dp"

// 不支持wrap\_content

fresco:placeholderImage="@color/wait\_color"

// 下载成功之前显示的图片

fresco:placeholderImageScaleType="fitCenter"

// 设置图片缩放. 通常使用focusCrop,该属性值会通过算法把人头像放在中间

fresco:failureImage="@drawable/error"

// 加载失败的时候显示的图片

fresco:failureImageScaleType=“centerInside"

// 设置图片缩放

fresco:retryImage="@drawable/retrying"

// 加载失败,提示用户点击重新加载的图片(会覆盖failureImage的图片)

fresco:roundAsCircle="true"

// 设置圆形方式显示图片

// 圆角设置

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"

6.使用步骤，

1）添加依赖

dependencies \{

// 在 API < 14 上的机器支持 WebP 时，需要添加

compile 'com.facebook.fresco:animated-base-support:0.14.1'

// 支持 GIF 动图，需要添加

compile 'com.facebook.fresco:animated-gif:0.14.1'

// 支持 WebP （静态图+动图），需要添加

compile 'com.facebook.fresco:animated-webp:0.14.1'

compile 'com.facebook.fresco:webpsupport:0.14.1'

// 仅支持 WebP 静态图，需要添加

compile 'com.facebook.fresco:webpsupport:0.14.1'

compile 'com.facebook.fresco:fresco:0.14.1'

2）在application中初始化Fresco

Fresco.initialize(this);

3)配置网络权限

<uses-permission android:name="android.permission.INTERNET"/>

4)在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">

5.）在xml中引入SimpleDraweeView

<com.facebook.drawee.view.SimpleDraweeView

android:id="@+id/my\_image\_view"

android:layout\_width="130dp"

android:layout\_height="130dp"

fresco:placeholderImage="@drawable/my\_drawable"

6）在java代码中开始加载图片

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);

注意：

如果项目中使用了OkHttp需要进行替换

For OkHttp2:

compile "com.facebook.fresco:imagepipeline-okhttp:0.12.0+"

For OkHttp3:

compile "com.facebook.fresco:imagepipeline-okhttp3:0.12.0+"

7.注意事项;

1)问题事项：

1.重复的边界

这是使用圆角的一个缺陷。 参考圆角和圆圈 来获取更多信息。

2.图片没有加载

你可以从 image pipeline 打出的日志来查看原因。 这里提供一些通常会导致问题的原因:

3.文件不可用

无效的路径、链接会导致这种情况。

判断网络链接是否有效，你可以尝试在浏览器中打开它，看看是否图片会被加载。若图片依然加载不出来，那么这不是Fresco的问题。

判断本地文件是否有效，你可以通过下面这段代码来校验：

FileInputStream fis = new FileInputStream(new File(localUri.getPath()));

如果这里抛出了异常，那么这不是Fresco的问题，可能是你的其他代码导致的。有可能是没有获取到SD卡读取权限、路径不合法、文件不存在等。

4。oom无法分配图片空间、

加载特别特别大的图片时最容易导致这种情况。如果你加载的图片比承载的View明显大出太多，那你应该考虑将它Resize一下。

5.bitmap太大导致无法绘制

Android 无法绘制长或宽大于2048像素的图片。这是由OpenGL渲染系统限制的，如果它超过了这个界限，Fresco会对它进行Resize。

6.通过log来判断原因

在加载图片时会出现各种各样的原因导致加载失败。 在使用Fresco的时候，最直接的方式就是查看 image pipeline 打出的VERBOSE级别日志。

7.重启日志

默认情况下Fresco是关闭日志输出的，你可以配置image pipeline让它启动.

Set<RequestListener> requestListeners = new HashSet<>();

requestListeners.add(new RequestLoggingListener());

ImagePipelineConfig config = ImagePipelineConfig.newBuilder(context)

// other setters

.setRequestListeners(requestListeners)

.build();

Fresco.initialize(context, config);

FLog.setMinimumLoggingLevel(FLog.VERBOSE);

8.查看日志

你可以通过下面这条shell命令来查看Fresco日志：

adb logcat -v threadtime | grep -iE 'LoggingListener|AbstractDraweeController|BufferedDiskCache'

它的输出为如下格式：

08-12 09:11:14.791 6690 6690 V unknown:AbstractDraweeController: controller 28ebe0eb 0 -> 1: initialize

08-12 09:11:14.791 6690 6690 V unknown:AbstractDraweeController: controller 28ebe0eb 1: onDetach

08-12 09:11:14.791 6690 6690 V unknown:AbstractDraweeController: controller 28ebe0eb 1: setHierarchy: null

08-12 09:11:14.791 6690 6690 V unknown:AbstractDraweeController: controller 28ebe0eb 1: setHierarchy: com.facebook.drawee.generic.GenericDraweeHierarchy@2bb88e4

08-12 09:11:14.791 6690 6690 V unknown:AbstractDraweeController: controller 28ebe0eb 1: onAttach: request needs submit

08-12 09:11:14.791 6690 6690 V unknown:PipelineDraweeController: controller 28ebe0eb: getDataSource

08-12 09:11:14.791 6690 6690 V unknown:RequestLoggingListener: time 11201791: onRequestSubmit: \{requestId: 1, callerContext: null, isPrefetch: false\}

08-12 09:11:14.792 6690 6690 V unknown:RequestLoggingListener: time 11201791: onProducerStart: \{requestId: 1, producer: BitmapMemoryCacheGetProducer\}

08-12 09:11:14.792 6690 6690 V unknown:RequestLoggingListener: time 11201792: onProducerFinishWithSuccess: \{requestId: 1, producer: BitmapMemoryCacheGetProducer, elapsedTime: 1 ms, extraMap: \{cached\_value\_found=false\}\}

08-12 09:11:14.792 6690 6690 V unknown:RequestLoggingListener: time 11201792: onProducerStart: \{requestId: 1, producer: BackgroundThreadHandoffProducer\}

08-12 09:11:14.792 6690 6690 V unknown:AbstractDraweeController: controller 28ebe0eb 1: submitRequest: dataSource: 36e95857

08-12 09:11:14.792 6690 6734 V unknown:RequestLoggingListener: time 11201792: onProducerFinishWithSuccess: \{requestId: 1, producer: BackgroundThreadHandoffProducer, elapsedTime: 0 ms, extraMap: null\}

08-12 09:11:14.792 6690 6734 V unknown:RequestLoggingListener: time 11201792: onProducerStart: \{requestId: 1, producer: BitmapMemoryCacheProducer\}

08-12 09:11:14.792 6690 6734 V unknown:RequestLoggingListener: time 11201792: onProducerFinishWithSuccess: \{requestId: 1, producer: BitmapMemoryCacheProducer, elapsedTime: 0 ms, extraMap: \{cached\_value\_found=false\}\}

08-12 09:11:14.792 6690 6734 V unknown:RequestLoggingListener: time 11201792: onProducerStart: \{requestId: 1, producer: EncodedMemoryCacheProducer\}

08-12 09:11:14.792 6690 6734 V unknown:RequestLoggingListener: time 11201792: onProducerFinishWithSuccess: \{requestId: 1, producer: EncodedMemoryCacheProducer, elapsedTime: 0 ms, extraMap: \{cached\_value\_found=false\}\}

08-12 09:11:14.792 6690 6734 V unknown:RequestLoggingListener: time 11201792: onProducerStart: \{requestId: 1, producer: DiskCacheProducer\}

08-12 09:11:14.792 6690 6735 V unknown:BufferedDiskCache: Did not find image for http://www.example.com/image.jpg in staging area

08-12 09:11:14.793 6690 6735 V unknown:BufferedDiskCache: Disk cache read for http://www.example.com/image.jpg

08-12 09:11:14.793 6690 6735 V unknown:BufferedDiskCache: Disk cache miss for http://www.example.com/image.jpg

08-12 09:11:14.793 6690 6735 V unknown:RequestLoggingListener: time 11201793: onProducerFinishWithSuccess: \{requestId: 1, producer: DiskCacheProducer, elapsedTime: 1 ms, extraMap: \{cached\_value\_found=false\}\}

08-12 09:11:14.793 6690 6735 V unknown:RequestLoggingListener: time 11201793: onProducerStart: \{requestId: 1, producer: NetworkFetchProducer\}

08-12 09:11:15.161 6690 7358 V unknown:RequestLoggingListener: time 11202161: onProducerFinishWithSuccess: \{requestId: 1, producer: NetworkFetchProducer, elapsedTime: 368 ms, extraMap: null\}

08-12 09:11:15.162 6690 6742 V unknown:BufferedDiskCache: About to write to disk-cache for key http://www.example.com/image.jpg

08-12 09:11:15.162 6690 6734 V unknown:RequestLoggingListener: time 11202162: onProducerStart: \{requestId: 1, producer: DecodeProducer\}

08-12 09:11:15.163 6690 6742 V unknown:BufferedDiskCache: Successful disk-cache write for key http://www.example.com/image.jpg

08-12 09:11:15.169 6690 6734 V unknown:RequestLoggingListener: time 11202169: onProducerFinishWithSuccess: \{requestId: 1, producer: DecodeProducer, elapsedTime: 7 ms, extraMap: \{hasGoodQuality=true, queueTime=0, bitmapSize=600x400, isFinal=true\}\}

08-12 09:11:15.169 6690 6734 V unknown:RequestLoggingListener: time 11202169: onRequestSuccess: \{requestId: 1, elapsedTime: 378 ms\}

08-12 09:11:15.184 6690 6690 V unknown:AbstractDraweeController: controller 28ebe0eb 1: set\_final\_result @ onNewResult: image: CloseableReference 2fd41bb0

在这个示例中，我们发现名为28ebe0eb的 DraweeView 向名为36e95857的 DataSource 进行了图像请求。首先，图片没有在内存缓存中找到，也没有在磁盘缓存中找到，最后去网络上下载图片。下载成功后，图片被解码，之后请求结束。最后数据源通知 controller 图片就绪，显示图片(set\_final\_result）。

2）一些陷阱

1.不要使用scrollview

2.不要向下转换

3.不要使用getToplevelDrawable

4.不要复用DraweeHierarchies

5.不要在多个Draweehierarchy中使用同一个Drawable

6.不要直接控制hierarchy

7.不要直接给DraweeView设置图片

8.使用DraweeView时。请不要使用任何Imageview的属性

[https_github.com_facebook_fresco]: https://github.com/facebook/fresco