圖片緩存--Fresco

Fresco中文文檔

 

本文完全從官網中摘錄，用於自身學習時簡單記錄，詳細可查看官文

關於Android圖片緩存，這是一個android程序員必須瞭解的。關於四大圖片緩存框架的特性與對比，請移步MDCC傳送門

關於Fresco的介紹，請查看鏈接 

• Fresco是一個強大的圖片加載組件
• Fresco中設計有一個叫做image pipeline 的模塊。他負責從網絡，從本地文件系統，本地資源加載圖片。爲了最大限度上節省空間和CPU時間，它 含有3級緩存的設計(額，沒三級能拿出手？)
• Fresco中設計有一個叫做Drawees模塊，方便地顯示loading圖，當圖片不再顯示在屏幕上時，及時地釋放內存和空間佔用。
• Fresco支持Android2.3及以上系統

1、簡單實用：

 

 

1.1 引入Fresco

在Module的build.gradle中添加

 

 

 

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

 

 

 

 

1.2 activity代碼

 

 

 

 

 

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Fresco.initialize(this);
        setContentView(R.layout.activity_fresco);
        ButterKnife.bind(this);
        simpleDraweeView.setImageURI(Uri.parse("http://scimg.jb51.net/allimg/160815/103-160Q509544OC.jpg"));
    }

Fresco.initialize(this);
通常這一句將在Application的onCreate中是比較合適的，如果只有一個Activity，那麼加在Activity裏也可以，但要在setContentView之前，也就是要先初始化庫，才能完成佈局文件的加載。


Uri支持格式：
遠程圖片 http:// 或者 https：//
本地文件 file：//
Content Provider content：//
asset目錄下的資源 asset：//
res目錄下的資源 res：//包名/+R……

 

 

 

1.3 對應的xml

 

 

 

 <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/simpledraweeview"
        android:layout_width="300dp"
        android:layout_height="300dp"
        fresco:actualImageScaleType="fitCenter"
        fresco:fadeDuration="300"
        fresco:failureImage="@mipmap/ic_launcher"
        fresco:failureImageScaleType="fitCenter"
        fresco:placeholderImage="@mipmap/ic_launcher"
        fresco:placeholderImageScaleType="fitCenter" />

Drawees 不支持 wrap_content 屬性。
所下載的圖像可能和佔位圖尺寸不一致，如果設置出錯圖或者重試圖的話，這些圖的尺寸也可能和所下載的圖尺寸不一致。
如果大小不一致，假設使用的是 wrap_content，圖像下載完之後，View將會重新layout，改變大小和位置。這將會導致界面跳躍。關於它的更多信息，請參考wrap_content


只有希望顯示固定的寬高比時，可以使用wrap_content。
如果希望圖片以特定的寬高比例顯示，例如 4:3，可以在XML中指定:
fresco:viewAspectRatio="1.33"
或者在代碼中設置：
mSimpleDraweeView.setAspectRatio(1.33f);

 

 

 

2、Drawee指南

 

 

 

 

 

 

 

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

 

 

屬性意思


layout_width和layout_height 不支持warp_content，但是可以通過setAspectRetio()；來設置寬高比
fadeDuration() 淡..時間
actualImageScaleType 設置圖片縮放，通常使用foucsCrop,該屬性值會通過算法把人頭像放在中間，關於縮放，請移步黑洞
placeholderImage 下載成功之前顯示的圖片
placeholderImageScaleType
failureImage 加載失敗時顯示的圖片
failureImageScaleType
retryImage 加載失敗，提示用戶點擊重新加載的圖片
retryImageScaleType
progressBarImage 提示 用戶正在加載，和進度無關
progressBarImageScaleType
progressBarAutoRotateInterval 圖片自動旋轉的時間間隔
backgroundImage 背景
overlayImage 疊加圖
pressedStateOverlayImage 按下時候的疊加圖
圖片圓角或圓形顯示，並不複製和修改Bitmap對象，那樣太耗費內存。
roundAsCircle 是否涉及圓圈
roundedCornerRadius 圓角
roundTopLeft、roundTopRight….. 分別設置4個角不同半徑，設置爲true以後可以再代碼中設置角度。通過RoundingParams的setConnersRadii()方法
roundWithOverlayColor，邊框的疊加顏色
roundingBorderWidth 邊框寬度
roundingBorderColor 邊框顏色

 

 

 

 

 

 

 

2.2  在java代碼中使用Drawees

 

 

 

 

 

 

2.2.1 設置或更改要顯示的圖片

SimpleDraweeView 有兩個方法可以設置所要加載顯示圖片，簡單的方法就是setImageURI。如果你需要對加載顯示的圖片做更多的控制和定製，那就需要用到DraweeController。
首先，創建一個DraweeController, 然後傳遞圖片加載請求給PipelineDraweeControllerBuilder.

 

 

隨後，你可以控制controller的其他選項了:

 

 

ControllerListener listener = new BaseControllerListener() {...}


DraweeController controller = Fresco.newDraweeControllerBuilder()
    .setUri(uri)
    .setTapToRetryEnabled(true)
    .setOldController(mSimpleDraweeView.getController())
    .setControllerListener(listener)
    .build();


mSimpleDraweeView.setController(controller);

在指定一個新的controller的時候，使用setOldController，這可節省不必要的內存分配。


在更進一步的用法中，自定義圖片請求，你需要給Image pipeline 發送一個ImageRequest。下面是一個圖片加載後，使用後處理器(postprocessor) 進行圖片後處理的例子.

 

 

 

 

 

Uri uri;
Postprocessor myPostprocessor = new Postprocessor() { ... }
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
    .setPostprocessor(myPostprocessor)
    .build();


DraweeController controller = Fresco.newDraweeControllerBuilder()
    .setImageRequest(request)
    .setOldController(mSimpleDraweeView.getController())
    // 其他設置
    .build();

 

 

漸進式jpeg圖

 

 

 

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

動畫(gif和webp) 

 

Fresco庫到'com.facebook.fresco:fresco:0.10.0'後，出現無法顯示GIF圖像的問題，

 

把跟GIF相關的庫從Fresco中分離出來了，需要引入'com.facebook.fresco:animated-gif:0.10.0'才能加載GIF圖像

 

 

 

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

 

其他應用很多，不一一介紹，官網介紹很詳細