概述
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);
監聽下載事件
有時候我們需要監聽圖片顯示的過程,比如在失敗,中間過程,成功時做一些事情。我們可以這么做:
-
為SimpleDraweeView 指定一個 DraweeController
-
為DraweeController 指定一個 ControllerListener
-
在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。