一、Fresco的簡介
Fresco是目前最強大的圖片加載組件。以前我們常用的比較火的是: Android圖片異步加載框架Android-Universal-Image-Loader。 Fresco中設(shè)計有一個叫做imagepipeline的模塊。它負責(zé)從網(wǎng)絡(luò),從本地文件系統(tǒng),本地資源加載圖片。 為了最大限度節(jié)省空間和CPU時間,它含有3級緩存設(shè)計(2級內(nèi)存,1級文件)。 Fresco中設(shè)計有一個叫做Drawees模塊,方便地顯示loading圖,當(dāng)圖片不再顯示在屏幕上時,及時地釋放內(nèi)存和空間占用。 Fresco支持Android2.3(APIlevel 9)及其以上系統(tǒng)。
感覺好叼用木有,下面給出Fresco的GitHub地址:
https://github.com/facebook/fresco
這是它的官方的中文使用文檔介紹:
http://fresco-cn.org/docs/index.html
這是它的官方Logo:
二、Fresco的重要特點 特點1-內(nèi)存管理 一個沒有未壓縮的圖片,即Android中的Bitmap,占用大量的內(nèi)存。大的內(nèi)存占用勢必引發(fā)更加頻繁的GC。 在5.0以下,GC將會顯著地引發(fā)界面卡頓。
在5.0以下系統(tǒng),Fresco將圖片放到一個特別的內(nèi)存區(qū)域。當(dāng)然,在圖片不顯示的時候,占用的內(nèi)存會自動被釋放。 這會使得APP更加流暢,減少因圖片內(nèi)存占用而引發(fā)的OOM。
給圖片分配內(nèi)存的方式:
Fresco:Ashmem(系統(tǒng)匿名共享內(nèi)存)
其他:Java Heap
特點2-漸進式呈現(xiàn)圖片 漸進式的JPEG圖片格式已經(jīng)流行數(shù)年了,漸進式圖片格式先呈現(xiàn)大致的圖片輪廓,然后隨著圖片下載的繼續(xù), 呈現(xiàn)逐漸清晰的圖片,這對于移動設(shè)備,尤其是慢網(wǎng)絡(luò)有極大的利好,可帶來更好的用戶體驗。
特點3-Gif圖和WebP格式 支持加載Gif圖,支持WebP格式。
特點4-圖像的呈現(xiàn) 自定義居中焦點(對人臉等圖片顯示非常有幫助)。
圓角圖,當(dāng)然圓圈也行。
下載失敗之后,點擊重現(xiàn)下載。
自定義占位圖,自定義overlay, 或者進度條。
指定用戶按壓時的overlay。
特點5-圖像的加載
為同一個圖片指定不同的遠程路徑,或者使用已經(jīng)存在本地緩存中的圖片。
先顯示一個低解析度的圖片,等高清圖下載完之后再顯示高清圖。
加載完成回調(diào)通知。
對于本地圖,如有EXIF縮略圖,在大圖加載完成之前,可先顯示縮略圖。
縮放或者旋轉(zhuǎn)圖片。
處理已下載的圖片。
WebP支持。
三、Fresco的基本使用 1、在Gradle中引入Fresco的依賴庫,這些相信大家都熟悉了,不再啰嗦了。 compile 'com.facebook.fresco:fresco:0.9.0' 2、配置自己的Application,并且在onCreate的時候調(diào)用 Fresco.initialize(this); 在清單文件中添加網(wǎng)絡(luò)權(quán)限 <uses-permission android:name="android.permission.INTERNET"/> 配置Application不要忘了 android:name=".MyApplication" Application的使用介紹: http://www.cnblogs.com/renqingping/archive/2012/10/24/Application.html 3、在布局文件當(dāng)中放置我們的Fresco的常用控件。以SimpleDraweeView為例,用于放置圖片。 <?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" android:layout_width="match_parent" android:layout_height="match_parent"> <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/my_image_view" android:layout_width="200dp" android:layout_height="200dp" fresco:placeholderImage="@mipmap/before" /> </LinearLayout>
下面對常用屬性進行說明:
android:layout_width="20dp"
// 不支持wrap_content, 如果要設(shè)置寬高比, 需要在Java代碼中指定setAspectRatio(floatratio);
android:layout_height="20dp"
// 不支持wrap_content
fresco:placeholderImage="@color/wait_color"
// 下載成功之前顯示的圖片
fresco:placeholderImageScaleType="fitCenter"
// 設(shè)置圖片縮放. 通常使用focusCrop,該屬性值會通過算法把人頭像放在中間
fresco:failureImage="@drawable/error"
// 加載失敗的時候顯示的圖片
fresco:failureImageScaleType=“centerInside"
// 設(shè)置圖片縮放
fresco:retryImage="@drawable/retrying"
// 加載失敗,提示用戶點擊重新加載的圖片(會覆蓋failureImage的圖片)
fresco:retryImageScaleType="centerCrop"
// 是不是設(shè)置圓形方式顯示圖片
fresco:roundAsCircle="false"
// 圓角設(shè)置
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"
4、代碼中,只要配置一個圖片對應(yīng)的Uri就可以了,剩下的,F(xiàn)resco會替你完成: · 顯示占位圖直到加載完成; · 下載圖片; · 緩存圖片; · 圖片不再顯示時,從內(nèi)存中移除; 等等等等。
三、Fresco的漸進式顯示網(wǎng)絡(luò)圖片
下面開始,楠妹妹要給大家介紹Fresco的一些比較叼的而且常用到的一些功能,先從漸進式顯示網(wǎng)絡(luò)圖片開始吧,至于其他功能自行去查看API文檔。先聲明,這個功能只能用于請求網(wǎng)絡(luò)圖片。
這是官方的描述:
Fresco 支持漸進式的網(wǎng)絡(luò)JPEG圖。在開始加載之后,圖會從模糊到清晰漸漸呈現(xiàn)。
你可以設(shè)置一個清晰度標(biāo)準(zhǔn),在未達到這個清晰度之前,會一直顯示占位圖。
漸進式JPEG圖僅僅支持網(wǎng)絡(luò)圖
核心的代碼就是給draweeView配置一個可以顯示漸進式JPEG的控制器。由于網(wǎng)絡(luò)太快的原因,效果不會很明顯,不過我們的目的已經(jīng)達到了。
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(Uri.parse("圖片網(wǎng)址"))
.setProgressiveRenderingEnabled(true) .build(); PipelineDraweeControllercontroller = (PipelineDraweeController) Fresco.newDraweeControllerBuilder() .setImageRequest(request) .build(); draweeView.setController(controller);
四、多圖請求
多圖請求就是先顯示模糊的圖片,等到大圖加載成功之后再顯示大圖。
核心代碼也是通過控制器實現(xiàn),并沒有什么技術(shù)含量。
DraweeControllercontroller = Fresco.newDraweeControllerBuilder() .setLowResImageRequest(ImageRequest.fromUri("低分辨率")) .setImageRequest(ImageRequest.fromUri("高分辨率")) .build(); draweeView.setController(controller);
五、事件監(jiān)聽
1、首先新建一個監(jiān)聽器。至于回調(diào)何時調(diào)用,不再贅述。
ControllerListener<ImageInfo> listener = new ControllerListener<ImageInfo>() { @Override public void onSubmit(String id, Object callerContext) { } //圖片加載成功的時候 @Override public void onFinalImageSet(String id, ImageInfo imageInfo, Animatableanimatable) { } @Override public void onIntermediateImageSet(String id, ImageInfo imageInfo) { } @Override public void onIntermediateImageFailed(String id, Throwable throwable) { } //圖片加載失敗 @Override public void onFailure(String id, Throwable throwable) { } @Override public void onRelease(String id) { } };
2、注意下面紅色代碼,controller設(shè)置控制器就可以了。
DraweeControllercontroller = Fresco.newDraweeControllerBuilder() .setLowResImageRequest(ImageRequest.fromUri("低分辨率")) .setImageRequest(ImageRequest.fromUri("高分辨率")) .setControllerListener(listener)
.build(); draweeView.setController(controller);
|