Fresco简单使用

1.入门介绍

1.添加依赖（Android Studio）

build.gradle 文件:

dependencies {
    compile 'com.facebook.fresco:fresco:0.13.0'
}

下面的依赖需要根据需求添加：

dependencies {
  // 在 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'
}

2.使用

1）.在使用之前必须初始化：

只需调用Fresco.initialize(this)一次即可完成初始化，因此放在Application中最合适

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

同时不要忘了在 AndroidManifest.xml 中指定你的 Application 类，并配置网络权限

<manifest
    ...
    >
    <uses-permission android:name="android.permission.INTERNET" />
    <application
      ...
      android:label="@string/app_name"
      android:name=".MyApplication"
      >
      ...
    </application>
    ...
  </manifest>

2）.在xml布局文件中, 加入命名空间

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

3）.加入SimpleDraweeView

<com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        fresco:placeholderImage="@mipmap/bg"
        />

4).加载图片

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

剩下的，Fresco会替你完成:
显示占位图直到加载完成；
下载图片；
缓存图片；
图片不再显示时，从内存中移除；

2.Drawees

1.在XML中使用Drawees

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

需要注意的点：

1. 必须设置android:layout_width 和 android:layout_height。如果没有在XML中声明这两个属性，将无法正确加载图像。
2. Drawees 不支持 wrap_content 属性。
3. 固定宽高比
   只有希望显示固定的宽高比时，可以使用wrap_content。如果希望图片以特定的宽高比例显示，例如 4:3，可以在XML中指定:

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view"
    android:layout_width="20dp"
    android:layout_height="wrap_content"
    fresco:viewAspectRatio="1.33"
    <!-- other attributes -->

也可以在代码中设置宽高比：

mSimpleDraweeView.setAspectRatio(1.33f);

2.在JAVA代码中使用Drawees

1.自定义DraweeHierarchy

一般情况下，在XML设置显示效果即可, 如果想更多定制化，可以这样:
创建一个 builder 然后设置给 DraweeView:

List<Drawable> backgroundsList;
List<Drawable> overlaysList;
GenericDraweeHierarchyBuilder builder =
    new GenericDraweeHierarchyBuilder(getResources());
GenericDraweeHierarchy hierarchy = builder
    .setFadeDuration(300)
    .setPlaceholderImage(new MyCustomDrawable())
    .setBackgrounds(backgroundList)
    .setOverlays(overlaysList)
    .build();
mSimpleDraweeView.setHierarchy(hierarchy);

对于同一个View，请不要多次调用setHierarchy，即使这个View是可回收的。创建 DraweeHierarchy 的较为耗时的一个过程，应该多次利用。

注意：一个DraweeHierarchy 是不可以被多个 View 共用的！

2.运行时修改 DraweeHierarchy

要改变这些属性，首先获取一个引用:

GenericDraweeHierarchy hierarchy = mSimpleDraweeView.getHierarchy();

1）.修改占位图

修改占位图为资源id:

hierarchy.setPlaceholderImage(R.drawable.placeholderId);

你也可以将它修改为一个 Drawable:

Drawable placeholderImage = ...;
hierarchy.setPlaceholderImage(placeholderImage);

其他图层也可以修改：

Drawable failureImage = ...;
hierarchy.setFailureImage(failureImage, ScaleType.CENTER);

2）.改变图像的显示

修改缩放类型:

hierarchy.setActualImageScaleType(ScalingUtils.ScaleType.CENTER_INSIDE);

如果你选择缩放类型为 focusCrop，需要指定一个居中点:

hierarchy.setActualImageFocusPoint(point);

你可以为图像添加一个 color filter:

ColorFilter filter;
// 创建filter
hierarchy.setActualImageColorFilter(filter);

3）.圆角

原来为圆角的不能修改为圆圈，反之亦然

RoundingParams roundingParams = hierarchy.getRoundingParams();
        roundingParams.setCornersRadius(30);
        hierarchy.setRoundingParams(roundingParams);

3.圆角

圆角实际有2种呈现方式:
1. 圆圈 - 设置roundAsCircle为true
2. 圆角 - 设置roundedCornerRadius
置圆角时，支持4个角不同的半径。XML中无法配置，但可在Java代码中配置。
设置圆角
1. 默认使用一个 shader 绘制圆角，但是仅仅占位图和所要显示的图有圆角效果。失败示意图和重下载示意图无圆角效果，且这种圆角方式不支持动画。
2. 叠加一个solid color来绘制圆角。但是背景需要固定成指定的颜色。
在XML中指定 roundWithOverlayColor, 或者通过调用setOverlayColor来完成此设定。

XML中配置

<com.facebook.drawee.view.SimpleDraweeView
   ...
   fresco:roundedCornerRadius="5dp"
   fresco:roundBottomLeft="false"
   fresco:roundBottomRight="false"
   fresco:roundWithOverlayColor="@color/blue"
   fresco:roundingBorderWidth="1dp"
   fresco:roundingBorderColor="@color/red"

代码中配置

在创建 DraweeHierarchy 时，可以给 GenericDraweeHierarchyBuilder 指定一个RoundingParams 用来绘制圆角效果。

RoundingParams roundingParams = RoundingParams.fromCornersRadius(7f);
// alternatively use fromCornersRadii or asCircle
roundingParams.setOverlayColor(R.color.green);
genericDraweeHierarchyBuilder
    .setRoundingParams(roundingParams);

你也可以在运行时，改变圆角效果

RoundingParams roundingParams = RoundingParams.fromCornersRadius(5f);
roundingParams.setBorder(R.color.red, 1.0);
roundingParams.setRoundAsCircle(true);
mSimpleDraweeView.getHierarchy().setRoundingParams(roundingParams);