Fresco简单的使用

Fresco简单的使用

1,概述:

Fresco是一个强大的图片加载组件,使用简单,无须关心加载和显示的问题,支持android2.3之后的版本.
Fresco:壁画; 温壁画技法

2,模块分类

Image Pipeline
Fresco 中设计有一个叫做 Image Pipeline 的模块。它负责从网络,从本地文件系统,本地资源加载图片。
为了最大限度节省空间和CPU时间,它含有3级缓存设计(2级内存,1级磁盘)。
Drawees
Fresco 中设计有一个叫做 Drawees 模块,它会在图片加载完成前显示占位图,加载成功后自动替换为目标图片。
当图片不再显示在屏幕上时,它会及时地释放内存和空间占用。

3,Fresco特性

内存管理
    解压后的图片,即Android中的Bitmap,占用大量的内存。大的内存占用势必引发更加频繁的GC。
    在5.0以下,GC将会显著地引发界面卡顿。
    在5.0以下系统,Fresco将图片放到一个特别的内存区域。当然,在图片不显示的时候,占用的内存会自动被释放。
    这会使得APP更加流畅,减少因图片内存占用而引发的OOM。
    Fresco 在低端机器上表现一样出色,你再也不用因图片内存占用而思前想后。
图片加载
    Fresco的Image Pipeline允许你用很多种方式来自定义图片加载过程:
    为同一个图片指定不同的远程路径,或者使用已经存在本地缓存中的图片
    先显示一个低清晰度的图片,等高清图下载完之后再显示高清图
    加载完成回调通知
    对于本地图,如有EXIF缩略图,在大图加载完成之前,可先显示缩略图
    缩放或者旋转图片
    对已下载的图片再次处理
    支持WebP解码,即使在早先对WebP支持不完善的Android系统上也能正常使用!
图片绘制
    Fresco 的 Drawees 设计,带来一些有用的特性:
    自定义居中焦点
    圆角图,当然圆圈也行
    下载失败之后,点击重现下载
    自定义占位图,自定义overlay, 或者进度条
    指定用户按压时的overlay
图片的渐进式呈现
    渐进式的JPEG图片格式已经流行数年了,渐进式图片格式先呈现大致的图片轮廓,然后随着图片下载的继续,呈现逐渐清晰的图片
    ,这对于移动设备,尤其是慢网络有极大的利好,可带来更好的用户体验。
    Android 本身的图片库不支持此格式,但是Fresco支持。使用时,和往常一样,仅仅需要提供一个图片的URI即可,剩下的事情,Fresco会处理。
动图加载
    加载Gif图和WebP动图在任何一个Android开发者眼里看来都是一件非常头疼的事情。每一帧都是一张很大的Bitmap,每一个动画都有很多帧。
    Fresco让你没有这些烦恼,它处理好每一帧并管理好你的内存。

4,使用前的配置:

app/build.gradle中添加依赖同步:

       implementation 'com.facebook.fresco:fresco:1.11.0'
        // 支持webp
        compile 'com.facebook.fresco:webpsupport:1.3.0'
        // gif加载使用
        compile 'com.facebook.fresco:animated-gif:1.3.0'
        // WebP(静态图+动图)加载使用
        compile 'com.facebook.fresco:animated-webp:1.3.0'
AndroidManifest清单文件:

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

5,SimpleDraweeView的属性

缩放类型—ScaleType:

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

自定义控件的属性大全解释:
    fadeDuration    淡入淡出动画持续时间(单位:毫秒ms)
    actualImageScaleType    实际图像的缩放类型
    placeholderImage    占位图
    placeholderImageScaleType   占位图的缩放类型
    progressBarImage    进度图
    progressBarImageScaleType   进度图的缩放类型
    progressBarAutoRotateInterval   进度图自动旋转间隔时间(单位:毫秒ms)
    failureImage    失败图
    failureImageScaleType   失败图的缩放类型
    retryImage  重试图
    retryImageScaleType 重试图的缩放类型
    backgroundImage 背景图
    overlayImage    叠加图
    pressedStateOverlayImage    按压状态下所显示的叠加图
    roundAsCircle   设置为圆形图
    roundedCornerRadius 圆角半径
    roundTopLeft    左上角是否为圆角
    roundTopRight   右上角是否为圆角
    roundBottomLeft 左下角是否为圆角
    roundBottomRight    右下角是否为圆角
    roundingBorderWidth 圆形或者圆角图边框的宽度
    roundingBorderColor 圆形或者圆角图边框的颜色
    roundWithOverlayColor   圆形或者圆角图底下的叠加颜色(只能设置颜色)
    viewAspectRatio 控件纵横比

6 SimpleDraweeView的使用注意

SimpleDraweeView的width和height属性必须是明确值,
而不能直接用wrap_content这种内容填充的数值,当然有一种情况例外,就是宽度和高度有一个是固定的,然后设置了二者的比例

app:viewAspectRatio="1.5"
mSimpleDraweeView.setAspectRatio(1.33f); // 设置宽高比为4:3

7 Fresco加载图片方式:

Fresco 只能使用绝对路径,不能使用相对路径
Fresco加载不同来源的图片:

  • 加载本地res:(res://)
  • 加载本地asset:(asset:///)
  • 加载本地文件:(file:// )
  • 加载Contentprovider图片:(content://)
  • 加载远程图片:(http://)
    ControllerListener
/**
 * Interface for {@link AbstractDraweeController} listener.
 *接口监听回调
 * <p> Controller id is passed to each of the listener methods which is useful for debugging and
 * instrumentation purposes where those events can then be associated with a sequence. Subscriber
 * is free to completely ignore this id, as late callbacks and other such correctness issues are
 * taken care of by the controller itself.
 *控制器id被传递给每个侦听器方法,这对于调试和*检测目的很有用,然后这些事件可以与序列相关联。
订阅服务器*可以完全忽略此id,因为延迟回调和其他此类正确性问题由控制器本身处理。
 * @param <INFO> image info type
 */
public interface ControllerListener<INFO> {

  /**
   * Called before the image request is submitted.
      在提交图像请求之前调用。
   * <p> IMPORTANT: It is not safe to reuse the controller from within this callback!
      重要:在此回调中重用控制器是不安全的!
   * @param id controller id
   * @param callerContext caller context
   */
  void onSubmit(String id, Object callerContext);

  /**
   * Called after the final image has been set.
      在设置了最终图像之后调用。
   * @param id controller id
   * @param imageInfo image info
   * @param animatable
   */
  void onFinalImageSet(String id, @Nullable INFO imageInfo, @Nullable Animatable animatable);

  /**
   * Called after any intermediate image has been set.
      在设置了任何中间映像之后调用。
   * @param id controller id
   * @param imageInfo image info
   */
  void onIntermediateImageSet(String id, @Nullable INFO imageInfo);

  /**
   * Called after the fetch of the intermediate image failed.
      在获取中间映像失败后调用。
   * @param id controller id
   * @param throwable failure cause
   */
  void onIntermediateImageFailed(String id, Throwable throwable);

  /**
   * Called after the fetch of the final image failed.
在获取最终图像失败后调用。
   * @param id controller id
   * @param throwable failure cause
   */
  void onFailure(String id, Throwable throwable);

  /**
   * Called after the controller released the fetched image.
在控制器释放获取的映像后调用。
   * <p> IMPORTANT: It is not safe to reuse the controller from within this callback!
   * @param id controller id
   */
  void onRelease(String id);
}

8 参看文献

https://www.jianshu.com/p/67731283788a
Fresco中文说明:http://www.fresco-cn.org/
Fresco项目GitHub地址:https://github.com/facebook/fresco

FrescoDemo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,400评论 25 707
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,680评论 2 59
  • 图片加载是Andriod开发几乎所有应用都需要用到,做Android开发的朋友或多或少都遇到过由于图片加载过多导致...
    磨砺营IT阅读 2,706评论 -1 8
  • 今天听了陈老师的分享,我觉得这三句话,归根到底都是在讲我们自己的这一颗心,你原本就有一颗充满了能量和智慧的心。 阳...
    行丹丹阅读 459评论 0 0
  • 为清冷的房子画上一扇窗 想像着打开窗子 满树的绿茵 馥郁的芬芳 早已让人迷醉 却不及远方巷口 你浅笑的容颜让人温...
    楠楠居阅读 301评论 3 4