Fresco基本使用

fresco先包括两个大板块:Image Pipeline和Drawees.

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

环境搭建


dependencies {
  //fresco
  compile 'com.facebook.fresco:fresco:0.12.0'
  // 在 API < 14 上的机器支持 WebP 时,需要添加
  compile 'com.facebook.fresco:animated-base-support:0.12.0'

  // 支持 GIF 动图,需要添加
  compile 'com.facebook.fresco:animated-gif:0.12.0'

  // 支持 WebP (静态图+动图),需要添加
  compile 'com.facebook.fresco:animated-webp:0.12.0'
  compile 'com.facebook.fresco:webpsupport:0.12.0'

  // 仅支持 WebP 静态图,需要添加
  compile 'com.facebook.fresco:webpsupport:0.12.0'
}


在activity的setContentView()之前初始化Fresco.initialize(this);
-------------------------------------------------------

基本概念

我们先简单了解下fresco中的重要类

DraweeView:继承自View,一般情况下我们使用SimpleDraweeView类进行图片加载。关于其自定义属性稍后我们介绍

DraweeHierarchy:渲染图片内容的类,我们可以通过它在java代码里设置DraweeView的属性

DraweeController:负责框架底层的图片加载的类

Image Pipeline:(图形管道)完成图片的获取。不管是通过网络、本地文件、content provider还是本地资源,它都把图片压缩并缓存到磁盘,并且把内存作为第二缓存存储着解码后的图片

特性介绍

  1. Image Pipeline

Fresco 中设计有一个叫做 Image Pipeline 的模块。它负责从网络,从本地文件系统,本地资源加载图片。为了最大限度节省空间和CPU时间,它含有3级缓存设计(2级内存,1级磁盘)。

  1. Drawees

Fresco 中设计有一个叫做 Drawees 模块,它会在图片加载完成前显示占位图,加载成功后自动替换为目标图片。当图片不再显示在屏幕上时,它会及时地释放内存和空间占用。

  1. 内存管理

解压后的图片,即Android中的Bitmap,占用大量的内存。大的内存占用势必引发更加频繁的GC。在5.0以下,GC将会显著地引发界面卡顿。

在5.0以下系统,Fresco将图片放到一个特别的内存区域。当然,在图片不显示的时候,占用的内存会自动被释放。这会使得APP更加流畅,减少因图片内存占用而引发的OOM。

  1. 图片加载

Fresco的Image Pipeline允许你用很多种方式来自定义图片加载过程,比如:

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

● 先显示一个低清晰度的图片,等高清图下载完之后再显示高清图

● 加载完成回调通知

● 对于本地图,如有EXIF缩略图,在大图加载完成之前,可先显示缩略图

● 缩放或者旋转图片

● 对已下载的图片再次处理

  1. 图片绘制

Fresco 的 Drawees 设计,带来一些有用的特性:

● 自定义居中焦点

● 圆角图,当然圆圈也行

● 下载失败之后,点击重现下载

● 自定义占位图,自定义overlay, 或者进度条

● 指定用户按压时的overlay

  1. 图片的渐进式呈现

渐进式的JPEG图片格式已经流行数年了,渐进式图片格式先呈现大致的图片轮廓,然后随着图片下载的继续,呈现逐渐清晰的图片,这对于移动设备,尤其是慢网络有极大的利好,可带来更好的用户体验。

Android 本身的图片库不支持此格式,但是Fresco支持。使用时,和往常一样,仅仅需要提供一个图片的URI即可,剩下的事情,Fresco会处理。

  1. Gif和Webp格式图片的强大支持

    ● 加载Gif图和WebP动图在任何一个Android开发者眼里看来都是一件非常头疼的事情。每一帧都是一张很大的Bitmap,每一个动画都有很多帧。Fresco让你没有这些烦恼,它处理好每一帧并管理好你的内存。

    ● 支持WebP解码,即使在早先对WebP支持不完善的Android系统上也能正常使用!
    8.可用的缩放类型
    类型 描述
    center 居中,无缩放。
    centerCrop 保持宽高比缩小或放大,使得两边都大于或等于显示边界,且宽或高契合显示边界。居中显示。
    focusCrop 同centerCrop, 但居中点不是中点,而是指定的某个点。
    centerInside 缩放图片使两边都在显示边界内,居中显示。和 fitCenter 不同,不会对图片进行放大。如果图尺寸大于显示边界,则保持长宽比缩小图片。
    fitCenter 保持宽高比,缩小或者放大,使得图片完全显示在显示边界内,且宽或高契合显示边界。居中显示。
    fitStart 同上。但不居中,和显示边界左上对齐。
    fitEnd 同fitCenter, 但不居中,和显示边界右下对齐。
    fitXY 不保存宽高比,填充满显示边界。
    none 如要使用tile mode显示, 需要设置为none
    围绕着这6个图层,我们的SimpleDraweeView布局一般包含如下主要元素

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"
//图片加载失败时显示,提示用户点击重新加载,重复加载4次还是没有加载出来的时候才会显示failureImage的图片
fresco:retryImageScaleType="centerCrop" //重新加载的图片缩放类型
fresco:progressBarImage="@drawable/progress_bar" //进度条图片
fresco:progressBarImageScaleType="centerInside"
fresco:progressBarAutoRotateInterval="1000"
//进度图自动旋转间隔时间(单位:毫秒ms)
fresco:backgroundImage="@color/blue"
//背景图片,这里的背景图片首先被绘制
fresco:overlayImage="@drawable/watermark"
// 设置叠加图,在xml中只能设置一张叠加图片,如果需要多张图片的话,需要在java代码中设置哦
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" //边框颜色
actualImageScaleType                    加载完成的图片的缩放样式

fadeDuration                            由进度条和占位符图片渐变过渡到加载完成的图片所使用的时间间隔

failureImage                            加载失败所使用的图片

failureImageScaleType                   加载失败所使用的图片的缩放样式

placeholderImage                        占位符图片

placeholderImageScaleType               占位符图片的缩放样式

progressBarAutoRotateInterval           旋转进度条旋转1圈所需要的时间

progressBarImage                        旋转进度条所使用的图片

progressBarImageScaleType               旋转进度条所使用的图片的缩放样式

retryImage                              重试所使用的图片

retryImageScaleType                     重试所使用的图片的缩放样式

backgroundImage                         背景图片

overlayImage                            覆盖在加载完成后图片上的叠加图片

pressedStateOverlayImage                按压状态下的叠加图片

roundAsCircle                           是否将图片剪切为圆形

roundedCornerRadius                     圆角图片时候,圆角的半径大小

roundTopLeft                            左上角是否为圆角

roundTopRight                           右上角是否为圆角

roundBottomLeft                         左下角是否为圆角

roundBottomRight                        右下角是否为圆角

roundWithOverlayColor                   圆角或圆形图叠加的颜色,只能是颜色

roundingBorderWidth                     圆角或圆形图边框的宽度

roundingBorderColor                     圆角或圆形图边框的颜色

viewAspectRatio                         设置宽高比

支持图片类型

类型 SCHEME
远程图片 http://, https://
本地文件 file://
Content provider content://
asset目录下的资源 asset://
res目录下的资源 res://
Uri中指定图片数据 data:mime/type;base64,数据类型必须符合 rfc2397规定 (仅支持 UTF-8)

重试机制

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

simpleDraweeView.setController(controller);

代码实现:

simpleDraweeView = findViewById(R.id.iv);
RoundingParams roundingParams = new RoundingParams();
roundingParams.setRoundAsCircle(true);

GenericDraweeHierarchy hierarchy = GenericDraweeHierarchyBuilder.newInstance(getResources())
        .setRoundingParams(roundingParams)
        .setFadeDuration(5000)
        .build();
simpleDraweeView.setHierarchy(hierarchy);

例子

图片记载失败,重写加载,图片加载进度动画

    <com.facebook.drawee.view.SimpleDraweeView
        app:actualImageScaleType="focusCrop"
        app:progressBarImage="@drawable/aa"
        app:progressBarImageScaleType="centerInside"
        app:progressBarAutoRotateInterval="5000"
        app:failureImage="@drawable/bb"
        app:failureImageScaleType="centerInside"
        app:retryImage="@drawable/cc"
        app:retryImageScaleType="centerInside"
        app:fadeDuration="5000"
        android:id="@+id/sdv"
        android:layout_width="200px"
        android:layout_height="500px" />
Uri uri=Uri.parse("http://2312img.sc115.com/mm/mm3/mm112013852nhei3knpfbu.jpg");
        DraweeController controller = Fresco.newDraweeControllerBuilder()
                .setUri(uri)
                .setTapToRetryEnabled(true)
                .setOldController(sdv.getController())
                .build();
        sdv.setController(controller);

图片加载进度动画,图片加载失败,重试,圆形

<com.facebook.drawee.view.SimpleDraweeView
        android:layout_gravity="center"
        android:layout_margin="50px"
        app:actualImageScaleType="focusCrop"
        app:progressBarImage="@drawable/aa"
        app:progressBarImageScaleType="centerInside"
        app:progressBarAutoRotateInterval="5000"


        app:failureImage="@drawable/bb"
        app:failureImageScaleType="centerInside"

        app:retryImage="@drawable/cc"
        app:retryImageScaleType="centerInside"
        app:fadeDuration="5000"
        android:id="@+id/sdv"

        app:roundAsCircle="true"

        android:layout_width="200px"
        android:layout_height="200px" />
 uri = Uri.parse("http://image.tianjimedia.com/uploadImages/2015/215/42/87G1MW8O7C34.jpg");
        controller = Fresco.newDraweeControllerBuilder()
                .setUri(uri)
                .setTapToRetryEnabled(true)
                .setOldController(sdv.getController())
                .build();
        sdv.setController(controller);

点击圆形图片设为圆角图片

 GenericDraweeHierarchy hierarchy= GenericDraweeHierarchyBuilder.newInstance(getResources())
                        .setRoundingParams(RoundingParams.fromCornersRadius(20))
                        .build();
                sdv.setHierarchy(hierarchy);
                sdv.setController(controller);

加载gif

DraweeController mDraweeController = Fresco.newDraweeControllerBuilder()
                //gif图重复播放
                .setAutoPlayAnimations(true)
                //设置uri,加载本地的gif资源
                .setUri(Uri.parse("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516942329520&di=1664f92153843c8e0d1b354127d81c28&imgtype=0&src=http%3A%2F%2Fww2.sinaimg.cn%2Flarge%2F85cccab3gw1etdl9hcqocg20dw07tb2a.jpg"))//设置uri
                .build();
        //设置Controller
        sim_fre.setController(mDraweeController);

gif动画的播放,与停止

Animatable animatableStart = sim_fre.getController().getAnimatable();
                //进行非空及是否动画在播放判断
                if(animatableStart != null && !animatableStart.isRunning()) {
                    //动画停止播放,播放动画
                    animatableStart.start();
                    //动画在播放,停止动画播放
                    animatableStop.stop();

                }

你可能感兴趣的:(Fresco基本使用)