1. 程式人生 > >Fresco網路圖片載入

Fresco網路圖片載入

Fresco

記憶體管理

Fresco 的最大亮點在於它的記憶體管理。解壓後的圖片,即 Android 中的 Bitmap ,佔用大量的記憶體,在 Android 5.0以下系統中,這會顯著地引發介面卡頓。而使用 Fresco 將很好地解決這個問題,Fresco 會將圖片放到一個特別的記憶體區域,當圖片不再顯示的時候,佔用的記憶體會自動被釋放,這會使得 APP 更流暢,減少因圖片記憶體佔用而引發的 OOM。當 APP 包含的圖片較多時,這個效果尤其明顯。

影象

Fresco 支援影象的漸進式呈現,漸進式的圖片格式先呈現大致的圖片輪廓,然後隨著圖片下載的繼續,逐漸呈現清晰的圖片,這在低網速情況下瀏覽圖片十分有幫助,可以帶來更好地使用者體驗。另外,Fresco 支援載入 gif 圖,支援 WebP 格式。    

如果瞭解更多: Fresco官方文件 ; 同時, 建議在看文件的時候優先選擇閱讀英文文件, 因為中文版文件可能有滯後的情況,這樣會避免很多不必要的麻煩。另外,當有問題產生時, 建議去其Fresco Github Issues去進行翻閱查詢, 此處匯聚了許多Fresco使用和問題的反饋及解答,往往可能會解決你的一些基本疑惑,甚至,你自己Open New Issue亦無不可。

中文文件

    http://www.fresco-cn.org/ ; 如果真心讀不懂英文或者不想讀, 那麼這裡,你可以去看看。

匯入官方示例

    http://www.cnblogs.com/stay/p/4398432.html; 簡單看了下,還不錯, 講的相對詳細,我並未細看。因為其實匯入和編譯專案該是開發的基本功吧,(*^__^*) 嘻嘻……

簡單使用

    http://blog.csdn.net/y1scp/article/details/49245535; 非常詳細的使用教程了吧,作者還是比較有心的,點個贊。

 下面簡單使用:

1、配置環境

        使用Fresco需要先在build.gradle中匯入依賴:

  // Fresco所需依賴     compile 'com.facebook.fresco:fresco:0.12.0'     // 在 API < 14 上的機器支援 WebP 時,需要新增     compile 'com.facebook.fresco:animated-base-support:0.12.0'     // 支援 GIF 動圖,需要新增     compile 'com.facebook.fresco:animated-gif:0.12.0'     // 支援 WebP (靜態圖+動圖),需要新增     compile 'com.facebook.fresco:animated-webp:0.12.0'     compile 'com.facebook.fresco:webps

      2、在專案的Application中初始化Fresco:

public class MyApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        // 初始化Fresco
        Fresco.initialize(this);
    }
}

      最後別忘了在AndroidManifest.xml檔案中為Application新增name屬性:

    <application
        android:name=".MyApplication"
        ......
    </application>

2、SimpleDraweeView

2.1、XML屬性

        Fresco為我們提供了一個SimpleDraweeView控制元件,我們可以直接在這個控制元件中載入圖片。Fresco在這個控制元件中集成了很多屬性,簡單實用。以下是SimpleDraweeView中的常用屬性:

總結:

XML屬性    意義 fadeDuration    淡入淡出動畫持續時間(單位:毫秒ms) actualImageScaleType    實際影象的縮放型別 placeholderImage    佔位圖 placeholderImageScaleType    佔位圖的縮放型別 progressBarImage    進度圖 progressBarImageScaleType    進度圖的縮放型別 progressBarAutoRotateInterval    進度圖自動旋轉間隔時間(單位:毫秒ms) failureImage    失敗圖 failureImageScaleType    失敗圖的縮放型別 retryImage    重試圖 retryImageScaleType    重試圖的縮放型別 backgroundImage    背景圖 overlayImage    疊加圖 pressedStateOverlayImage    按壓狀態下所顯示的疊加圖 roundAsCircle    設定為圓形圖 roundedCornerRadius    圓角半徑 roundTopLeft    左上角是否為圓角 roundTopRight    右上角是否為圓角 roundBottomLeft    左下角是否為圓角 roundBottomRight    右下角是否為圓角 roundingBorderWidth    圓形或者圓角圖邊框的寬度 roundingBorderColor    圓形或者圓角圖邊框的顏色 roundWithOverlayColor    圓形或者圓角圖底下的疊加顏色(只能設定顏色) viewAspectRatio    控制元件縱橫比

XML 例如:

  <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/id_main_sdv_sdv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        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="@mipmap/ic_launcher"
        fresco:progressBarImageScaleType="centerInside"
        fresco:retryImage="@mipmap/ic_launcher"
        fresco:retryImageScaleType="centerCrop"
        fresco:roundAsCircle="false"
        fresco:viewAspectRatio="1.6" />

2.2、注意事項

(1)SimpleDraweeView控制元件的寬高不能設定為wrap_content,只能是match_parent、具體值或使用viewAspectRatio屬性設定寬高比。

(2)如果在一個頁面中載入多張圖片,不要將SimpleDraweeView直接放在ScollView中,建議使用RecyclerView、ListView或GridView,因為ScrollView中的SimpleDraweeView會持有記憶體直到Activity或Fragment銷燬。

(3)使用SimpleDraweeView時,不要使用imageView中有、View中沒有的屬性。  

3、框架使用

3.1、簡單使用

        像TextView、Button等其他控制元件一樣後去到SimpleDraweeView,然後呼叫如下程式碼即可載入網路圖片:

SimpleDraweeView sdv = (SimpleDraweeView) findViewById(R.id.id_main_sdv_sdv);
sdv.setImageURI("http://xxxx.jpg");

3.2、JAVA程式碼設定屬性

        我們可以通過GenericDraweeHierarchy,在JAVA程式碼中動態的設定SimpleDraweeView控制元件的屬性。需要注意的是,如果在JAVA程式碼中設定了屬性,那麼XML檔案中設定的屬性就都無效了。一個例項程式碼如下:

        // 程式碼設定SimpleDraweeView的屬性(會覆蓋XML設定的所有屬性,即在XML中有在這裡沒有的屬性都會失效)
        // 注意:一個GenericDraweeHierarchy是不能被多個SimpleDraweeView共用的
        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);
        // 為SimpleDraweeView設定屬性
        sdv.setHierarchy(hierarchy);

        注意:不能把同一個GenericDraweeHierarchy物件設定給多個SimpleDraweeView!

3.3、設定下載事件

        sdv.setController(Fresco.newDraweeControllerBuilder()
                .setControllerListener(new BaseControllerListener<ImageInfo>() {
                    @Override
                    public void onFinalImageSet(String id, ImageInfo imageInfo, Animatable animatable) {
                        // 所有圖片都載入成功時觸發的方法
                        int width = imageInfo.getWidth();
                        int height = imageInfo.getHeight();
                        QualityInfo qualityInfo = imageInfo.getQualityInfo();
                        int quality = qualityInfo.getQuality();
                        boolean isOfFullQuality = qualityInfo.isOfFullQuality();
                        boolean isOfGoodEnoughQuality = qualityInfo.isOfGoodEnoughQuality();
                    }

                    @Override
                    public void onIntermediateImageSet(String id, ImageInfo imageInfo) {
                        // 載入漸進式圖片時回撥的方法
                    }

                    @Override
                    public void onFailure(String id, Throwable throwable) {
                        // 載入圖片失敗時回撥的方法
                    }
                })
                .setUri("http://xxx.jpg")
                .build());

3.4、漸進式圖片

        漸進式圖片是一種支援圖片從模糊到清晰的載入模式。程式碼如下:

                sdv.setController(Fresco.newDraweeControllerBuilder()
                        .setImageRequest(
                                ImageRequestBuilder.newBuilderWithSource(
                                                  Uri.parse("http://XXXX .jpg"))
                                        .setProgressiveRenderingEnabled(true)
                                        .build())
                        .setOldController(sdv.getController())
                        .build());