Android--Fresco的简单使用

引入Fresco:

编辑 build.gradle 文件:

dependencies {
       //Fresco,无论使用哪个模块的功能,都必须要添加的基础依赖
       compile 'com.facebook.fresco:fresco:0.14.1'

       //下面的依赖根据需求,用到哪个模块,就导入对应的依赖即可.

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

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

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

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

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

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

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

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

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

} 

想要使用Fresco还需要做一下事情:

在加载图片之前，你必须初始化Fresco类。你只需要调用Fresco.initialize一次即可完成初始化，在 Application 里面做这件事再适合不过了（如下面的代码），注意多次的调用初始化是无意义的。

[MyApp.java]
public class MyApp extends Application {
	@Override
	public void onCreate() {
		super.onCreate();
		Fresco.initialize(this);
	}
}

做完上面的工作后，你需要在 AndroidManifest.xml 中指定你的 Application 类。为了下载网络图片，请确认你声明了网络请求的权限。

    ...
    >
     android:name="android.permission.INTERNET" />
    
      ...
      android:label="@string/app_name"
      android:name=".MyApp"
      >
      ...
    
    ...

在xml布局文件中, 加入命名空间：

    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">

加入 SimpleDraweeView:

    android:id="@+id/my_image_view"
    android:layout_width="130dp"
    android:layout_height="130dp"
    fresco:placeholderImage="@drawable/my_drawable" />

注意：这里必须要设置layout_width和layout_height属性，否则不展示图 片，而且不是将属性值设置为wrap_content（因为我们使用Fresco加载图片是可以添加多个图层的，如果设置为wrap_content，但是不同图层的图片像素大小不同的话就会造成重绘的问题，用户体验特别差）

开始加载图片:

Uri uri = Uri.parse("图片地址");
SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
draweeView.setImageURI(uri);

剩下的，Fresco会替你完成:

• 显示占位图直到加载完成；
• 下载图片；
• 缓存图片；
• 图片不再显示时，从内存中移除；

等等等等。

一、Fresco主要包括两方面：

1. Image Pipeline模块：负责从网络，从本地系统文件，本地资源加载图片，为了最大限度节省空间和CPU时间，它含有三级缓存（2ji级内存，1级磁盘）。

2. Fresco中设计有一个叫做Drawees模块，它会再图片加载完成之前显示占位图，加载完成后，自动释放未目标图片， 并且会及时的释放内存和空间占用，我们实现基本功能一般使用Drawees就可以了，Drawees主要包括下面几个部分： 
   a. DraweeView:继承于View,我们一般展示图片使用的是DraweeView的子类SimpleDraweeView,我们可以在XML和Java代码中使用，具体使用方式如模块三中介绍所示： 
   b. DraweeController：负责和Fresco中的 image pipeline交互，我们可以创建一个这个类的实例，来对加载的图片进行更多的控制。 
   c. DraweeHierarchy：可以通过它来在Java代码中自定义图片的展示，当然也可以在XML布局中定义，我们在模块三中会介绍XML中的属性设置。 
   d. Listeners：监听图片下载，如果你想在图片下载成功或者失败之后做操作的话，可以监听这个Listeners。

二、SimpleDraweeView在XML中的属性设置：

在XML布局中可以设置很多属性:

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的图片，要显示retryImage还必须在代码中设置.setTapToRetryEnabled(true)

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" //边框颜色

上面的ImageScaleType有下面一些缩放类型：

类型 描述

三、DraweeHierarchy使用

我们上面了解了在XML中设置图片的属性，一般情况下在XML中设置就可以了，但是如果想在java代码中设置更多的定制化，我们就需要使用DraweeHierarchy，如下所示：创建一个Builder然后传递给draweeView就可以了：

GenericDraweeHierarchyBuilder builder = new GenericDraweeHierarchyBuilder(getResources());
GenericDraweeHierarchy hierarchy = builder
       .setProgressBarImage(new ProgressBarDrawable())
       .build();
draweeView.setHierarchy(hierarchy);

下面为facebook官方给出的方法:

当然，相应的set方法也会对应相应的get方法，我们这里就只贴出了常用的方法，由于篇幅原因，其他方法我们就不贴出了，大家可以自己查看API。

我们这里只针对几个比较常用的方法进行介绍：

RoundingParams params = new RoundingParams();

params.setCornersRadius((float) 50.0);

GenericDraweeHierarchyBuilder builder = new GenericDraweeHierarchyBuilder(getResources());

GenericDraweeHierarchy hierarchy = builder
     .setProgressBarImage(new ProgressBarDrawable())// 设置进度条
     .setProgressBarImageScaleType(ScalingUtils.ScaleType.CENTER)// 设置进度条缩放类型 
     .setActualImageScaleType(ScalingUtils.ScaleType.FOCUS_CROP)// 设置实际图像的缩放类型
     .setActualImageFocusPoint(new PointF(0,0))// 设置缩放类型为focusCrop时,需要设置一个FocusPoint坐标
     .setBackground(getResources().getDrawable(R.mipmap.ic_launcher))// 设置背景
     .setFadeDuration(5000)// 设置图片从渐变色的持续时间
     .setFailureImage(getResources().getDrawable(R.drawable.fail))// 失败时显示的图片
     .setOverlay(getResources().getDrawable(R.color.overlay))// 覆盖层
     .setPlaceholderImage(getResources().getDrawable(R.drawable.place))// 设置占位图 
     .setPlaceholderImageScaleType(ScalingUtils.ScaleType.CENTER_INSIDE)// 设置占位图的缩放类型
     .setPressedStateOverlay(getResources().getDrawable(R.drawable.overlay))// 点击时候的覆盖层  
     .setRetryImage(getResources().getDrawable(R.drawable.retry))//图片加载失败时显示，提示用户点击重新加载，重复加载4次还是没有加载出来的时候才会显示failureImage的图片
     .setRetryImageScaleType(ScalingUtils.ScaleType.FIT_END)// 设置圆角参数
     .setRoundingParams(params)
     .build();
simpleDraweeView.setHierarchy(hierarchy);

四、DraweeController

针对Fresco来说，DrawwController是负责和image loader进行交互的，我们如果需要对Uri加载到的图片做一些额外的处理，我们可以使用这个类。 
SimpleDraweeView有两种设置所要加载显示图片，简单的方式就是上面介绍的setImageUI，但是如果要对加载的图片进行更多的定制，我们就需要使用到DraweeController类。 
我们需要创建一个DraweeController类，然后添加自己需要的设置，添加传递给SimpleDraweeView就可以了，下面给我简单的代码示例：

DraweeController draweeController = Fresco.newDraweeControllerBuilder()
                .setUri(uri)
                .setControllerListener(controllerListener)
                .setOldController(simpleDraweeView.getController()) 
                .build()
                ;

simpleDraweeView.setController(draweeController);

大家还可以根据自己的需要设置不同的属性，下面贴出了facebook官方给出的部分方法 API地址 ：

setOldController(simpleDraweeView.getController())，在创建新的controller的时候，指定此属性，可以节省不必要的内存分配。

setControllerListener()，设置此属性，可以添加对图片下载情况的监听。

setImageRequest()，定制ImageRequest,可以对图片添加更多的处理

ImageRequest的创建和使用，这里先不进行详细的讲解，大家可以查看一下官方的API。

五、Listener

我们在加载图片的时候，可能会有一些定制的需求，例如我们想在图片加载完成或者失败之后添加Log日志，那我们就可以使用ControllerListener 实现事件的监听。

ControllerListener controllerListener = new BaseControllerListener(){

            @Override
            public void onFailure(String id, Throwable throwable) {
                super.onFailure(id, throwable);
                // fail
            }


            @Override
            public void onFinalImageSet(String id, ImageInfo imageInfo, Animatable animatable) {
                super.onFinalImageSet(id, imageInfo, animatable);
                // success
            }


            @Override
            public void onIntermediateImageSet(String id, ImageInfo imageInfo) {
                super.onIntermediateImageSet(id, imageInfo);

            }

            @Override
            public void onIntermediateImageFailed(String id, Throwable throwable) {
                super.onIntermediateImageFailed(id, throwable);
            }
        };

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

onFinalImageSet 会在图片加载成功之后被调用。

onFailure会在图片加载失败时候被调用。

六、配置Image Pipeline

在大多数情况下，Fresco的初始化只是需要进行Fresco.initialize(this)就可以了，但是我们也可以添加更多的的配置，我们需要使用我们提供了ImagePipelineConfig。

ImagePipelineConfig config = ImagePipelineConfig.newBuilder(context)
    .setBitmapMemoryCacheParamsSupplier(bitmapCacheParamsSupplier)
    .setCacheKeyFactory(cacheKeyFactory)
    .setDownsampleEnabled(true)
    .setWebpSupportEnabled(true)
    .setEncodedMemoryCacheParamsSupplier(encodedCacheParamsSupplier)
    .setExecutorSupplier(executorSupplier)
    .setImageCacheStatsTracker(imageCacheStatsTracker)
    .setMainDiskCacheConfig(mainDiskCacheConfig)
    .setMemoryTrimmableRegistry(memoryTrimmableRegistry)
    .setNetworkFetchProducer(networkFetchProducer)
    .setPoolFactory(poolFactory)
    .setProgressiveJpegConfig(progressiveJpegConfig)
    .setRequestListeners(requestListeners)
    .setSmallImageDiskCacheConfig(smallImageDiskCacheConfig)
    .build();
Fresco.initialize(context, config);

以上是官方给出的所有配置选项，但是我们肯定用不到这么多，只是选择自己需要的就可以了eg:我们要设置磁盘存储的存储大小：

DiskCacheConfig diskCacheConfig = DiskCacheConfig.newBuilder(this)
                .setBaseDirectoryPath(new File(Environment.getExternalStorageDirectory().getAbsoluteFile(),"Moe Studio"))
                .setBaseDirectoryName("fresco_sample")
                .setMaxCacheSize(200*1024*1024)//200MB
                .build();
ImagePipelineConfig imagePipelineConfig = ImagePipelineConfig.newBuilder(this)  // 配置ImagePipeline
                .setMainDiskCacheConfig(diskCacheConfig)
                .build();
Fresco.initialize(this,imagePipelineConfig);

一定要记住将配置好的ImagePipelineConfig 传递给 Fresco.initialize! 否则仍旧是默认配置。

注：使用fresco加载gif图片： 
主要查看导入frsco的library的版本号，如果版本号是0.08.0，此时我们不需要单独添加gif图的依赖包，但是如果是0.11.0包及以上，我们就需要单独的添加依赖包进行gif图的加载。

参考文档：
http://www.fresco-cn.org/