Android強大的圖片加載框架Fresco簡單用法

Android關於加載圖片的框架有Universal-Image-Loader、Picasso、Volley、Fresco,這篇文章主要簡單的分析一下Fresco的用法,Fresco是Facebook發佈的一款開源框架,在內存方面的表現極爲優秀。

Fresco中文說明:http://www.fresco-cn.org/

Fresco項目GitHub地址:https://github.com/facebook/fresco

假如有這樣的一個需求當圖片正在加載時應該呈現正在加載時的圖像,當圖片加載失敗時應該呈現圖片加載時的圖像,當重新加載圖片時,應該呈現重試時圖像,直到這張圖片加載完成。這時建議推薦用Fresco。

本例子請求的圖片地址是存在的,如果想查看重新加載

Fresco用法及其簡單:
在項目中引入Fresco,只需要在Module的build.gradle文件的dependencies中添加一句話:
compile 'com.facebook.fresco:fresco:0.7.0+'

效果


 activity_main.xml :

<RelativeLayout 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_margin="20dp"
    android:layout_height="match_parent">
    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/main_sdv1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        fresco:actualImageScaleType="focusCrop"
        fresco:placeholderImage="@mipmap/default_error"
        fresco:placeholderImageScaleType="focusCrop"
        fresco:progressBarImage="@mipmap/icon_progress_bar"
        fresco:progressBarImageScaleType="focusCrop"
        fresco:progressBarAutoRotateInterval="5000"
        fresco:failureImage="@mipmap/icon_failure"
        fresco:failureImageScaleType="focusCrop"
        fresco:retryImageScaleType="focusCrop"
        fresco:fadeDuration="5000"
        ></com.facebook.drawee.view.SimpleDraweeView>
    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/main_sdv2"
        android:layout_marginTop="20dp"
        android:layout_below="@+id/main_sdv1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        fresco:actualImageScaleType="focusCrop"
        fresco:placeholderImage="@mipmap/default_error"
        fresco:placeholderImageScaleType="focusCrop"
        fresco:progressBarImage="@mipmap/icon_progress_bar"
        fresco:progressBarImageScaleType="focusCrop"
        fresco:progressBarAutoRotateInterval="5000"
        fresco:failureImage="@mipmap/icon_failure"
        fresco:failureImageScaleType="focusCrop"
        fresco:retryImage="@mipmap/icon_retry"
        fresco:retryImageScaleType="focusCrop"
        fresco:fadeDuration="5000"
        fresco:backgroundImage="@android:color/holo_orange_light"
        fresco:roundAsCircle="true"
        fresco:roundedCornerRadius="30dp"
        fresco:roundTopLeft="true"
        fresco:roundTopRight="true"
        fresco:roundBottomLeft="true"
        fresco:roundBottomRight="true"
        fresco:roundingBorderWidth="10dp"
        fresco:roundingBorderColor="#008dd7"
        ></com.facebook.drawee.view.SimpleDraweeView>
    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/main_sdv3"
        android:layout_marginTop="20dp"
        android:layout_below="@+id/main_sdv2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        fresco:actualImageScaleType="focusCrop"
        fresco:placeholderImage="@mipmap/default_error"
        fresco:placeholderImageScaleType="focusCrop"
        fresco:progressBarImage="@mipmap/icon_progress_bar"
        fresco:progressBarImageScaleType="focusCrop"
        fresco:progressBarAutoRotateInterval="5000"
        fresco:failureImage="@mipmap/icon_failure"
        fresco:failureImageScaleType="focusCrop"
        fresco:retryImage="@mipmap/icon_retry"
        fresco:retryImageScaleType="focusCrop"
        fresco:fadeDuration="5000"
        fresco:backgroundImage="@android:color/holo_orange_light"
        fresco:roundAsCircle="true"
        fresco:roundedCornerRadius="30dp"
        fresco:roundTopLeft="true"
        fresco:roundTopRight="true"
        fresco:roundBottomLeft="true"
        fresco:roundBottomRight="true"
        fresco:roundingBorderWidth="10dp"
        fresco:roundingBorderColor="#008dd7"
        ></com.facebook.drawee.view.SimpleDraweeView>
</RelativeLayout>

MainActivity文件

import android.app.Activity;
import android.net.Uri;
import android.os.Bundle;
import com.facebook.drawee.backends.pipeline.Fresco;
import com.facebook.drawee.interfaces.DraweeController;
import com.facebook.drawee.view.SimpleDraweeView;
public class MainActivity extends Activity {
    private SimpleDraweeView simpleDraweeView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Fresco.initialize(this);
        setContentView(R.layout.activity_main);
        initView();
    }
    private void initView() {
        //創建SimpleDraweeView對象
        simpleDraweeView = (SimpleDraweeView) findViewById(R.id.main_sdv);
        //創建將要下載的圖片的URI
        Uri imageUri = Uri.parse("http://avatar.csdn.net/5/D/9/1_vatty748895431.jpg");
        //開始下載
        simpleDraweeView.setImageURI(imageUri);
        //創建DraweeController
        DraweeController controller = Fresco.newDraweeControllerBuilder()
                //重試之後要加載的圖片URI地址
                .setUri(imageUri)
                        //設置點擊重試是否開啓
                .setTapToRetryEnabled(true)
                        //設置舊的Controller
                .setOldController(simpleDraweeView.getController())
                        //構建
                .build();
        //設置DraweeController
        simpleDraweeView.setController(controller);
    }
}

從上面可以看出來,Fresco的一個很大的特點在於,它自定義了一個SimpleDraweeView,而不是直接在ImageView上進行操作。目前SimpleDraweeView是繼承自ImageView的,然而很多ImageView的方法已經被@Deprecated掉了,不建議使用

使用Fresco有一些需要注意的地方:
1、一定不要忘了Fresco庫的初始化:

Fresco.initialize(this);
通常這一句將在Application的onCreate中是比較合適的,如果只有一個Activity,那麼加在Activity裏也可以,但要在setContentView之前,也就是要先初始化庫,才能完成佈局文件的加載。
SimpleDraweeView的width和height屬性必須是明確值,而不能直接用wrap_content這種內容填充的數值,當然有一種情況例外,就是寬度和高度有一個是固定的,然後設置了二者的比例,則

另一個可以用wrap_content,其實相當於二者都是固定的。

mSimpleDraweeView.setAspectRatio(1.33f); // 設置寬高比爲4:3

總結:

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 控件縱橫比

更多源碼請關注微信公衆號:aikaifa ,第一時間推送博文源碼


發佈了63 篇原創文章 · 獲贊 34 · 訪問量 11萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章