Fresco指北

司徒钟
822 阅读2分钟

1、概述

优点：

  • Fresco是FaceBook开源的Android平台图片加载库，同时也支持ReactNative
  • 支持从网络，ContentProvider，本地存储，Asset，Resource数据源加载图片
  • 两级内存缓存，Memory&Disk
  • 支持JPEG，PNG，Progressive JPEG，Gif，WebP格式
  • 支持图片从模糊到清晰的渐进式加载
  • 采用了类似GC的引用计数机制，使不再使用的图片对象可以更早的被回收，降低内存的开销。

缺点：

  • 包很大，>= 500k
  • API不够简洁

gitHub地址: GitHub - facebook/fresco: An Android library for managing images and the memory they use.
文档地址: 引入Fresco

2、快速使用

  1. 在Application中进行初始化

    class MyApplication : Application { override fun onCreate() { super.onCreate() Fresco.initialize(this) } }

  2. 使用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" />

  3. 代码控制加载图片

    uri = Uri.parse("raw.githubusercontent.com/facebook/fr…"); my_image_view.setImageURI(uri);

剩下的，Fresco会替你完成:

  • 显示占位图直到加载完成；

  • 下载图片；

  • 缓存图片；

  • 图片不再显示时，从内存中移除；

2.1 支持的URI

1. 远程图片：

2. 本地图片：

3. Content provider

4. asset目录下的资源

5. res目录下的资源

6. Uri中指定图片数据

  • 即Fresco支持OKhttp网络库，或者自己编写的网络库

  • Fresco 不支持 相对路径的URI，所有的 URI 都必须是绝对路径，并且带上该 URI 的 scheme。

2.2 相关参数

<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"-----圆形或圆角的边框颜色
/>

3、原理简析

  • Drawees 负责图片的呈现
  • Image Pipeline 负责图片的获取和管理。

3.1 Drawees功能：

  • 设置要加载的图片
  • 设置占位图
  • 设置加载失败时的占位图
  • 点击重新加载
  • 显示一个进度条
  • 设置背景
  • 叠加图
  • 按压状态下的叠加图
  • 缩放
  • 圆角和圆圈
  • 使用ControllerBuilder
  • 渐进式JPEG图
  • 动画支持（GIF 和 WebP 格式的动画）
  • 多图请求及图片复用
  • 监听下载事件
  • 缩放和旋转图片
  • 修改图片
  • 图片请求(Image Requests)
  • 自定义View

3.2 Image Pipeline功能

  • 配置Image Pipeline
  • 缓存
  • 直接使用Image Pipeline
  • 数据源和数据订阅者
  • 可关闭的引用
  • Webp支持

3.3 Image Pipeline加载流程

  1. 检查内存缓存，如有，返回

  2. 后台线程开始后续工作

  3. 检查是否在未解码内存缓存中。如有，解码，变换，返回，然后缓存到内存缓存中。

  4. 检查是否在磁盘缓存中，如果有，变换，返回。缓存到未解码缓存和内存缓存中。

  5. 从网络或者本地加载。加载完成后，解码，变换，返回。存到各个缓存中。

3.4 三级缓存：

  • Bitmap缓存

  • 未解码图片的内存缓存

    • 原始压缩格式的图片，需要解码，如果有调整大小，旋转，或者WebP编码转换工作需要完成，这些工作会在解码之前进行

  • 磁盘缓存

    • 未解码的原始压缩格式的图片
avatar
文章
阅读
粉丝