android 開發 - 網絡圖片加載庫 Fresco 的使用。

概述

Fresco 是 facebook 的開源類庫，它支持更有效的加載網絡圖片以及資源圖片。它自帶三級緩存功能，讓圖片顯示更高效。

介紹

Fresco 是一個強大的圖片加載組件。
Fresco 中設計有一個叫作 image pipeline 的模塊。它負責從網絡，從本地文件系統，本地資源加載圖片。爲了最大限度節省空間和CPU時間，它含有3級緩存設計（2級內存，1級文件）。
Fresco 中設計有一個叫作 Drawees 模塊，方便地顯示loading圖，當圖片再也不顯示在屏幕上時，及時地釋放內存和空間佔用。
Fresco 支持 Android2.3(API level 9) 及其以上系統。

簡單使用

簡單來講，只須要三步。

1. 添加依賴
    2. 初始化Fresco
    3. 編寫佈局
    4. 指定Uri

1.添加依賴

在你的 模塊級別 的gradle中寫下：

compile 'com.facebook.fresco:fresco:0.10.0'

2.初始化Fresco

在你的自定義application中，或者在Activity.onCreate方法內，setContentView以前調用：

Fresco.initialize(this);

3.編寫佈局

聲明命名空間 xmlns:fresco="http://schemas.android.com/apk/res-auto"

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

寫一個SimpleDraweeView

<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/my_image_view0"
android:layout_width="200dp"
android:layout_height="200dp"
/>

4.指定Uri

final String str2 = "http://h.hiphotos.baidu.com/zhidao/pic/item/279759ee3d6d55fb65c51e786c224f4a20a4dd69.jpg";
Uri uri = Uri.parse(str2);
my_image_view0.setImageURI(uriERR);

Fresco的一些概念

DraweeView

繼承於 View, 負責圖片的顯示。通常狀況下，使用SimpleDraweeView 便可

ImageRequest

ImageRequest存儲着Image Pipeline處理被請求圖片所須要的有用信息(Uri、是否漸進式圖片、是否返回縮略圖、縮放、是否自動旋轉等)。

Fresco的對 佈局寬高的要求

你必須聲明 android:layout_width 和 android:layout_height。
若是沒有在XML中聲明這兩個屬性，將沒法正確加載圖像。

Drawees 不支持 wrap_content 屬性。

這麼作是有理由的：

所下載的圖像可能和佔位圖尺寸不一致，若是設置出錯圖或者重試圖的話，這些圖的尺寸也可能和所下載的圖尺寸不一致。
若是大小不一致，假設使用的是 wrap_content，圖像下載完以後，View將會從新layout，改變大小和位置。這將會致使界面跳躍。

考慮到緩存的圖片會根據你的尺寸進行縮略圖，手機的屏幕會在旋轉而致使imageview大小改變等，這些都會致使圖片沒法正常顯示。

固定寬高比

只有但願顯示固定的寬高比時，可使用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);

指定佔位圖片

使用 progressBarImage 指定 加載時顯示的圖片
使用 failureImage 指定 加載失敗的顯示的圖片
使用 placeholderImage 指定佔位圖

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view0"
    android:layout_width="200dp"
    android:layout_height="200dp"
    fresco:progressBarImage="@drawable/loading"
    fresco:progressBarImageScaleType="centerInside"
    fresco:failureImage="@drawable/error2"
    fresco:failureImageScaleType="centerInside"
    fresco:actualImageScaleType="centerCrop"
    fresco:placeholderImage="@drawable/loading" />

在加載失敗時，能夠設置點擊從新加載。這時提供一個圖片，加載失敗時，會顯示這個圖片（而不是失敗提示圖片），提示用戶點擊重試。
在ControllerBuilder 中以下設置:

.setTapToRetryEnabled(true)

指定加載失敗圖片和點擊從新加載

在xml中指定加載失敗後提示重試的圖片

fresco:retryImage="@drawable/retrying"
fresco:retryImageScaleType="centerCrop"

並在ControllerBuilder 中以下設置:

.setTapToRetryEnabled(true)

加載失敗時，image pipeline 會重試四次；若是仍是加載失敗，則顯示加載失敗提示圖片。

圓角圖片

實現一個圓角圖片是這麼的容易，僅僅在xml佈局裏聲明開啓圓角，並指定 radius 便可。支持對四個角任意組合的圓角。

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_viewRound"
    android:layout_width="200dp"
    android:layout_height="200dp"
    fresco:roundedCornerRadius="30dp"
    fresco:roundTopLeft="true"
    fresco:roundTopRight="false"
    fresco:roundBottomLeft="false"
    fresco:roundBottomRight="true"
    fresco:placeholderImage="@drawable/loading" />

漸進式JPEG圖

Fresco 支持漸進式的網絡JPEG圖。在開始加載以後，圖會從模糊到清晰漸漸呈現。
你能夠設置一個清晰度標準，在未達到這個清晰度以前，會一直顯示佔位圖。
漸進式JPEG圖僅僅支持網絡圖

得到SimpleDraweeView
my_image_view0 = (SimpleDraweeView) findViewById(R.id.my_image_view0);
構建ImageRequest加載圖片

/**
     * 演示：逐漸加載的圖片，即，從模糊逐漸清晰。須要圖片自己也支持這種方式
     */
    private void showProgressiveJPEGs() {
        final String str3_progressive = "http://pooyak.com/p/progjpeg/jpegload.cgi?o=1";
        Uri uri = Uri.parse(str3_progressive);

        ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
                .setProgressiveRenderingEnabled(true)
                .build();
        DraweeController controller = Fresco.newDraweeControllerBuilder()
                .setImageRequest(request)
                .setOldController(my_image_view0.getController())
                .build();
        my_image_view0.setController(controller);
    }

動畫圖支持

Fresco 支持 GIF 和 WebP 格式的動畫圖片。對於 WebP 格式的動畫圖的支持包括擴展的 WebP 格式，即便 Android 2.3及其之後那些沒有原生 WebP 支持的系統。

設置動畫圖自動播放

若是你但願圖片下載完以後自動播放，同時，當View從屏幕移除時，中止播放，只須要在 image request 中簡單設置，以下:

Uri uri;
DraweeController controller = Fresco.newDraweeControllerBuilder()
    .setUri(uri)
    .setAutoPlayAnimations(true)
    .build();
mSimpleDraweeView.setController(controller);

監聽下載事件

有時候咱們須要監聽圖片顯示的過程，好比在失敗，中間過程，成功時作一些事情。咱們能夠這麼作：

1. 爲SimpleDraweeView 指定一個 DraweeController
   
2. 爲DraweeController 指定一個 ControllerListener
   

3. 在ControllerListener 的回調方法裏處理 失敗，中間過程，成功時的事情

   Uri uri;
   DraweeController controller = Fresco.newControllerBuilder()
   .setControllerListener(controllerListener)
   .setUri(uri);
   .build();
   mSimpleDraweeView.setController(controller);

上面的代碼指定了一個 ControllerListener ，它包含一些回調方法：

onFinalImageSet         加載完成
onIntermediateImageSet  加載中間過程
onFailure               加載失敗

Fresco 提供了一個 推薦繼承BaseControllerListener ，繼承自 推薦繼承BaseControllerListener 更方便，示例代碼：

ControllerListener controllerListener = new BaseControllerListener<ImageInfo>() {
@Override
public void onFinalImageSet(
    String id,
    @Nullable ImageInfo imageInfo,
    @Nullable Animatable anim) {
  if (imageInfo == null) {
    return;
  }
  QualityInfo qualityInfo = imageInfo.getQualityInfo();
  FLog.d("Final image received! " + 
      "Size %d x %d",
      "Quality level %d, good enough: %s, full quality: %s",
      imageInfo.getWidth(),
      imageInfo.getHeight(),
      qualityInfo.getQuality(),
      qualityInfo.isOfGoodEnoughQuality(),
      qualityInfo.isOfFullQuality());
}

@Override 
public void onIntermediateImageSet(String id, @Nullable ImageInfo imageInfo) {
  FLog.d("Intermediate image received");
}

@Override
public void onFailure(String id, Throwable throwable) {
  FLog.e(getClass(), throwable, "Error loading %s", id)
}
};

Fresco對各類Uri類型的資源的支持

Fresco使用 Uri 對象指定要顯示的圖片
res 示例:

Uri uri = Uri.parse("res://包名(實際能夠是任何字符串甚至留空)/" + R.drawable.ic

Fresco 支持許多URI格式。見下表：

類型                    Scheme                   示例
遠程圖片:                http://, https://      HttpURLConnection 或者參考 使用其餘網絡加載方案
本地文件:              file://                FileInputStream
Content provider:       content://            ContentResolver
asset目錄下的資源:        asset://                AssetManager
res目錄下的資源:          res://                Resources.openRawResource

特別注意：Fresco 不支持 相對路徑的URI. 全部的URI都必須是絕對路徑，而且帶上該URI的scheme。

擴展資源

• 我寫的demo: https://github.com/vir56k/demo/tree/master/frescoDemo
• Github: https://github.com/facebook/fresco
  
• 中文文檔： http://www.fresco-cn.org/