Fresco的使用(一):在XML中使用Drawees

简单使用

如果你仅仅是想简单下载一张网络图片，在下载完成之前，显示一张占位图，那么简单使用 SimpleDraweeView 即可。

为了下载网络图片，请确保在 AndroidManifest.xml 中有以下权限：

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

注意：在 Application 初始化时，在应用调用 setContentView() 之前，进行初始化：

Fresco.initialize(context);

xml布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.fresco.MainActivity">
<com.facebook.drawee.view.SimpleDraweeView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/my_imageview"
    fresco:placeholderImage="@drawable/canvas5"
   />
</LinearLayout>

onCreate(Bundle savedInstanceState) 函数

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //初始化
        Fresco.initialize(MainActivity.this);
        setContentView(R.layout.activity_main);
        //开始加载图片
        Uri uri=Uri.parse("http://img2.duitang.com/uploads/item/201202/24/20120224232537_8PNVV.jpg");
        SimpleDraweeView draweeView= (SimpleDraweeView) findViewById(R.id.my_imageview);
        draweeView.setImageURI(uri);
    }

未加载显示的是@drawable/canvas5：

加载完成后：

可见，Fresco会自动完成:

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

等等等等。

Drawees的可定制性

配置的各种选项

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_imageview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    fresco:fadeDuration="300"
    fresco:placeholderImage="@drawable/canvas5"
    fresco:actualImageScaleType="focusCrop"
    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"
  />

强制性的宽高

你必须声明 android:layout_width 和 android:layout_height。如果没有在XML中声明这两个属性，将无法正确加载图像。
wrap_content

Drawees 不支持 wrap_content 属性。
原因：
所下载的图像可能和占位图尺寸不一致，如果设置出错图或者重试图的话，这些图的尺寸也可能和所下载的图尺寸不一致。

如果大小不一致，假设使用的是 wrap_content，图像下载完之后，View将会重新layout，改变大小和位置。这将会导致界面跳跃。
固定宽高比

只有希望显示固定的宽高比时，可以使用wrap_content。

如果希望图片以特定的宽高比例显示，例如 4:3，可以在XML中指定:

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

也可以在代码中指定显示比例：

draweeView.setAspectRatio(1.33f);

这时候宽高大小具体计算为：

android:layout_width="a dp"
android:layout_height="wrap_content"
fresco:viewAspectRatio="1.33"

layout_height=Math.min(“a/1.33”, “match_parent”);
总而言之，图片加载前后，尺寸不能发生变化

Drawee的各种效果配置

定义
除了要加载的图片，其他各个设置都可以在 xml 中指定。在 xml 中指 定的时候，可以是Android drawable ，也可以是颜色。
设置要加载的图片
除了需要加载的图片是真正必须的，其他的都是可选的。
占位图
在调用setImageURI 之后，占位图开始显示，直到图片加载完成。
对于渐进式格式的JPEG图片，占位图会显示直到满足已加载的图片解析度到达设定值。
XML 中属性值: placeholderImage
默认值: a transparent ColorDrawable
默认缩放类型: centerInside
加载失败时的占位图
如果URI是无效的，或者下载过程中网络不可用，将会导致加载失败。当加载图片出错时，你可以设置一个出错提示图片。
XML 中属性值: failureImage
默认值: The placeholder image
默认缩放类型: centerInside
点击重新加载
在加载失败时，可以设置点击重新加载。这时提供一个图片，加载失败时，会显示这个图片（而不是失败提示图片），提示用户点击重试。
XML 中属性值: retryImage
默认值: The placeholder image
默认缩放类型: centerInside
显示一个进度条
如果设置一个进度条图片，提示用户正在加载。该图片会覆盖在 Drawee 上直到图片加载完成。
XML 中属性值: progressBarImage
默认值: None
默认缩放类型: centerInside
背景
背景图会最先绘制，在XML中只可以指定一个背景图，但是在JAVA代码中，可以指定多个背景图。
当指定一个背景图列表的时候，列表中的第一项会被首先绘制，绘制在最下层，然后依次往上绘制。
背景图片不支持缩放类型，会被强制到Drawee尺寸大小。
XML 中属性值: backgroundImage
默认值: None
默认缩放类型: N/A
叠加图
叠加图会最后被绘制。
和背景图一样，XML中只可以指定一个，如果想指定多个，可以通过JAVA代码实现。
当指定的叠加图是一个列表的时候，列表第一个元素会被先绘制，最后一个元素最后被绘制到最上层。
同样的，不支持各种缩放类型。
XML 中属性值: overlayImage
默认值: None
默认缩放类型: N/A
按压状态下的叠加图**
同样不支持缩放，用户按压DraweeView时呈现
XML 中属性值: pressedStateOverlayImage
默认值: None
默认缩放类型: N/A

缩放

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

这些缩放类型和Android ImageView 支持的缩放类型几乎一样.

唯一不支持的缩放类型是 matrix。Fresco 提供了 focusCrop 作为补充，通常这个使用效果更佳。
怎样设置

实际图片，占位图，重试图和失败图都可以在 xml 中进行设置，用 fresco:actualImageScaleType 这样的属性。你也可以使用 GenericDraweeHierarchyBuilder 类在代码中进行设置。 即使显示效果已经构建完成，实际图片的缩放类型仍然可以通过 GenericDraweeHierarchy 类在运行中进行修改。 不要使用 android:scaleType 属性，也不要使用 setScaleType() 方法，它们对 Drawees 无效。
focusCrop

centerCrop缩放模式会保持长宽比，放大或缩小图片，填充满显示边界，居中显示。这个缩放模式在通常情况下很有用。

但是对于人脸等图片时，一味地居中显示，这个模式可能会裁剪掉一些有用的信息。

以人脸图片为例，借助一些类库，我们可以识别出人脸所在位置。如果可以设置以人脸位置居中裁剪显示，那么效果会好很多。

Fresco的focusCrop缩放模式正是为此而设计。只要提供一个居中聚焦点，显示时就会尽量以此点为中心。

居中点是以相对方式给出的，比如 (0f, 0f) 是左上对齐显示，(1f, 1f) 是右下角对齐。相对坐标使得居中点位置和具体尺寸无关，这是非常实用的。

(0.5f, 0.5f) 的居中点位置和缩放类型 centerCrop 是等价的。

如果要使用此缩放模式，首先在 XML 中指定缩放模式:

fresco:actualImageScaleType=”focusCrop”

在Java代码中，给你的图片指定居中点：

PointF focusPoint;
// your app populates the focus point
mSimpleDraweeView
    .getHierarchy()
    .setActualImageFocusPoint(focusPoint);

none

如果你要使用tile mode进行显示，那么需要将scale type 设置为none.