1. 程式人生 > >Android之Fresco(facebook的強大Android圖片載入的框架)

Android之Fresco(facebook的強大Android圖片載入的框架)

Fresco是Facebook最新推出的一款用於Android應用中展示圖片的強大圖片庫,可以從網路、本地儲存和本地資源中載入圖片。其中的Drawees可以顯示佔位符,直到圖片載入完成。而當圖片從螢幕上消失時,會自動釋放記憶體。

Fresco是Facebook開源Android平臺上一個強大的圖片載入庫,也是迄今為止Android平臺上最強大的圖片載入庫。

Fresco 是一個強大的圖片載入元件。使用它之後,你不需要再去關心圖片的載入和顯示這些繁瑣的事情! 支援 Android 2.3 及以後的版本。

Fresco原始碼:https://github.com/facebook/fresco

Fresco官方文件(中文):https://www.fresco-cn.org/

Fresco原始碼線上檢視:http://frescolib.org/javadoc/reference/packages.html

gradle引入(當然你也可以引入 高版本)

   compile 'com.facebook.fresco:fresco:0.12.0'
// 支援 GIF 動圖,需要新增
   compile 'com.facebook.fresco:animated-gif:0.12.0'

執行效果圖:(注:此案例只完成了圖中相應功能,Fresco更多功能去官方檢視,講解詳細)

      

特性

1:記憶體管理

解壓後的圖片,即Android中的Bitmap,佔用大量的記憶體。大的記憶體佔用勢必引發更加頻繁的GC。在5.0以下,GC將會顯著地引發介面卡頓。

在5.0以下系統,Fresco將圖片放到一個特別的記憶體區域。當然,在圖片不顯示的時候,佔用的記憶體會自動被釋放。這會使得APP更加流暢,減少因圖片記憶體佔用而引發的OOM。

Fresco 在低端機器上表現一樣出色,你再也不用因圖片記憶體佔用而思前想後。

2:圖片載入

Fresco的Image Pipeline允許你用很多種方式來自定義圖片載入過程,比如:

  • 為同一個圖片指定不同的遠端路徑,或者使用已經存在本地快取中的圖片
  • 先顯示一個低清晰度的圖片,等高清圖下載完之後再顯示高清圖
  • 載入完成回撥通知
  • 對於本地圖,如有EXIF縮圖,在大圖載入完成之前,可先顯示縮圖
  • 縮放或者旋轉圖片
  • 對已下載的圖片再次處理
  • 支援WebP解碼,即使在早先對WebP支援不完善的Android系統上也能正常使用!

3:圖片繪製

Fresco 的 Drawees 設計,帶來一些有用的特性:

  • 自定義居中焦點
  • 圓角圖,當然圓圈也行
  • 下載失敗之後,點選重現下載
  • 自定義佔點陣圖,自定義overlay, 或者進度條
  • 指定使用者按壓時的overlay

4:圖片的漸進式呈現

漸進式的JPEG圖片格式已經流行數年了,漸進式圖片格式先呈現大致的圖片輪廓,然後隨著圖片下載的繼續,呈現逐漸清晰的圖片,這對於移動裝置,尤其是慢網路有極大的利好,可帶來更好的使用者體驗。

Android 本身的圖片庫不支援此格式,但是Fresco支援。使用時,和往常一樣,僅僅需要提供一個圖片的URI即可,剩下的事情,Fresco會處理

5:動圖載入

載入Gif圖和WebP動圖在任何一個Android開發者眼裡看來都是一件非常頭疼的事情。每一幀都是一張很大的Bitmap,每一個動畫都有很多幀。Fresco讓你沒有這些煩惱,它處理好每一幀並管理好你的記憶體。

程式碼:(屬性可根據需要設定  注:android:layout_height="200dp" 的屬性值不能為:wrap_content)


<!--  fresco:actualImageScaleType:實際載入的圖片的伸縮樣式
        fresco:backgroundImage:底層圖片資源
        fresco:fadeDuration:進度條和佔位符圖片逐漸消失、載入的圖片逐漸顯示的時間間隔
        fresco:failureImage:載入失敗時顯示的圖片資源
        fresco:failureImageScaleType:載入失敗時載入的圖片的伸縮樣式
        fresco:overlayImage:在顯示的圖片表層覆蓋一張圖片的圖片資源
        fresco:placeholderImage:佔位符圖片資源
        fresco:placeholderImageScaleType:佔位符圖片的伸縮樣式
        fresco:progressBarAutoRotateInterval:進度條圖片轉動週期
        fresco:progressBarImage:進度條圖片資源
        fresco:progressBarImageScaleType:進度條圖片的伸縮樣式
        fresco:retryImage:提示重新載入的圖片資源
        fresco:retryImageScaleType:提示重新載入的圖片的伸縮樣式
        fresco:roundAsCircle:將圖片剪下成圓形
        fresco:viewAspectRatio:圖片寬高比-->

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/id_main_sdv_sdv"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        fresco:actualImageScaleType="focusCrop"
        fresco:fadeDuration="3000"
        fresco:failureImage="@mipmap/ic_launcher"
        fresco:failureImageScaleType="centerInside"
        fresco:placeholderImage="@mipmap/ic_launcher"
        fresco:placeholderImageScaleType="fitCenter"
        fresco:progressBarAutoRotateInterval="1000"
        fresco:progressBarImage="@drawable/aa"
        fresco:progressBarImageScaleType="centerInside"
        fresco:retryImage="@mipmap/ic_launcher"
        fresco:retryImageScaleType="centerCrop"
        fresco:roundAsCircle="false"
        fresco:viewAspectRatio="1.6" />


載入方式1:
 SimpleDraweeView sdv = (SimpleDraweeView) findViewById(R.id.id_main_sdv_sdv);
  Uri uri = Uri.parse("http://image5.tuku.cn/pic/wallpaper/fengjing/menghuandaziranmeijingbizhi/009.jpg");
                sdv.setImageURI(uri);

載入方式2:

 SimpleDraweeView sdv2 = (SimpleDraweeView) findViewById(R.id.id_main_sdv_sdv2);
 sdv2.setImageURI("http://img.my.csdn.net/uploads/201407/26/1406383243_5120.jpg");

載入方式3:

 simpleDraweeView1 = (SimpleDraweeView) findViewById(R.id.user_avator);
 simpleDraweeView1.setController(Fresco.newDraweeControllerBuilder()
                 .setImageRequest(
                  ImageRequestBuilder.newBuilderWithSource(
                  Uri.parse("http://avatar.csdn.net/8/6/0/1_dickyqie.jpg"))
                  .setProgressiveRenderingEnabled(true)
                  .build())
                 .setOldController(simpleDraweeView1.getController())
                 .build());

載入方式gif圖片:
Uri uri = Uri.parse("http://ww1.sinaimg.cn/mw600/6345d84ejw1dvxp9dioykg.gif");
        simpleDraweeView2 = (SimpleDraweeView) findViewById(R.id.user_avator2);
        DraweeController draweeController1 = Fresco.newDraweeControllerBuilder()
.setUri(uri).setAutoPlayAnimations(true).build();
        simpleDraweeView2.setController(draweeController1);
        simpleDraweeView2.setOnTouchListener(this);

程式碼設定屬性:
 // 程式碼設定SimpleDraweeView的屬性(會覆蓋XML設定的所有屬性,即在XML中有在這裡沒有的屬性都會失效)
        // 注意:一個GenericDraweeHierarchy是不能被多個SimpleDraweeView共用的
 SimpleDraweeView sdv = (SimpleDraweeView) findViewById(R.id.id_main_sdv_sdv);        
 GenericDraweeHierarchy hierarchy = new GenericDraweeHierarchyBuilder(getResources())
                .setFadeDuration(3000)
                .setPlaceholderImage(R.mipmap.ic_launcher)
                .setPlaceholderImageScaleType(ScalingUtils.ScaleType.FIT_XY)
                .setProgressBarImage(new ProgressBarDrawable()) // 顯示進度條(Fresco自帶的進度條)
                .build();
        // 設定圖片圓角
 RoundingParams roundingParams = new RoundingParams();
 roundingParams.setRoundAsCircle(false); // 不將圖片剪下成圓形
 roundingParams.setCornersRadius(200);
 hierarchy.setRoundingParams(roundingParams);
 sdv.setHierarchy(hierarchy);

其他網路圖片載入方式,請看

        Android之Glide(非常好用的圖片載入框架)