Android使用Fresco加载图片的用法

在Android的App开发中，延时加载图片是硬需求。有好几个开源的项目也提供了延时加载图片的功能，常用的有：Fresco，Glide和Universal Image Loader。这里主要简单介绍下Fresco。

添加依赖

在build.gradle添加依赖如下：

dependencies {
  ... 
  compile 'com.facebook.fresco:fresco:0.12.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'
}

初始化Fresco

在使用Fresco之前需要初始化Fresco。因为Fresco只需要初始化一次，如果需要在多个地方使用Fresco加载图片，建议在Application里初始化Fresco。

import android.app.Application;
import com.facebook.drawee.backends.pipeline.Fresco;
 
public class MyApplication extends Application {
    @Override
  public void onCreate() {
      super.onCreate();
      Fresco.initialize(this);
    }
}

在AndroidManifest.xml声明网络请求的权限

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

使用Fresco

开始使用Fresco之前，需要理解Fresco的三个基本概念。Fresco加载图片类似于MVC模式，对应的三个组件如下：

DraweeView：表示MVC里的View。它继承于View，负责显示图片。其中SimpleDraweeView是它的一个简单的实现。
DraweeHierarchy：表示MVC里的Model。用于组织和维护最终绘制和呈现的 Drawable 对象
DraweeController：表示MVC里的Controller。它负责图片的加载。

如果是简单的加载图，可以直接使用SimpleDraweeView。

XML

为了在XML里使用com.facebook.drawee.view.SimpleDraweeView，需要天津啊fresco的xml命名空间

xmlns:fresco="http://schemas.android.com/apk/res-auto"

示例如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.MainActivity">
 
    <com.facebook.drawee.view.SimpleDraweeView
        android:layout_width="400dp"
        android:layout_height="match_parent"
        android:id="@+id/main_simple_drawee_view"
        fresco:placeholderImage="@mipmap/ic_launcher"/>
</RelativeLayout>

SimpleDraweeView的相关属性如下

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

需要注意：

必须设置android:layout_width 和 android:layout_height，否则不显示图片
不支持android:layout_width 和 android:layout_height同时设置为wrap_content
wrap_content只有在固定宽高的情况下可以使用

固定宽高

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

在Activity调用

import android.net.Uri;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
 
import com.facebook.drawee.backends.pipeline.Fresco;
import com.facebook.drawee.interfaces.DraweeController;
import com.facebook.drawee.view.SimpleDraweeView;
 
public class MainActivity extends AppCompatActivity {
 
    private SimpleDraweeView mSimpleDraweeView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        mSimpleDraweeView = (SimpleDraweeView) findViewById(R.id.main_simple_drawee_view);
        Uri uri = Uri.parse("http://example.com/mypic.png");
                mSimpleDraweeView .setImageURI(uri);
    }
}

最简单的使用时直接使用setImageURI设置uri。

如果在加载图片时需要更多的效果可以使用DraweeController

import android.net.Uri;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
 
import com.facebook.drawee.backends.pipeline.Fresco;
import com.facebook.drawee.interfaces.DraweeController;
import com.facebook.drawee.view.SimpleDraweeView;
 
public class MainActivity extends AppCompatActivity {
 
    private SimpleDraweeView mSimpleDraweeView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        mSimpleDraweeView = (SimpleDraweeView) findViewById(R.id.main_simple_drawee_view);
        Uri uri = Uri.parse("http://example.com/mypic.png");
                DraweeController controller = Fresco.newDraweeControllerBuilder()
                        .setUri(uri)
                        .setAutoPlayAnimations(true)
                        .build();
        mSimpleDraweeView .setController(controller);
    }
}

更多可以参考：https://www.fresco-cn.org/docs/