介紹

Fresco支援Android2.3(API level 9)及其以上系統。

依賴

由於我用的是android studio所以這裡就只是說一下android studio下如何配置，在強大的gradle，只需要一句話搞定，gradle會幫你下載這個Fresco框架，gradle真好，可以自動維護你專案中的框架

compile 'com.facebook.fresco:fresco:0.5.0+'

dependencies {
  // 其他依賴
  compile 'com.facebook.fresco:fresco:0.12.0'
}

下面的依賴需要根據需求新增：

dependencies {
  // 在 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:webpsupport:0.12.0'
 


  // 僅支援 WebP 靜態圖，需要新增
  compile 'com.facebook.fresco:webpsupport:0.12.0'
}

最牛特性 檢視

Fresco的image pipeline 【 ˈpaɪplaɪn】 設計

Demo栗子第1顆

fresco搭建開發環境

gradle
compile 'com.facebook.fresco:fresco:0.12.0'

清單檔案配置

public class FrescoApp extends Application {
    @Override
    public void
 
 onCreate() {
        super.onCreate();
        //初始化Fresco框架
        Fresco.initialize(this);
    }
}

配置許可權

    <!--網路-->
    <uses-permission android:name="android.permission.INTERNET"/>
    <!--sd卡-->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

佈局

 <com.facebook.drawee.view.SimpleDraweeView
        android:layout_width="100dp"
        android:layout_margin="5dp"
        android:background="#AEAEAE"
        android:src="@mipmap/ic_launcher"
        android:id="@+id/image"
        xmlns:fresco="http://schemas.android.com/apk/res-auto"
        android:scaleType="centerCrop"
        fresco:roundedCornerRadius="10dp"
        fresco:roundTopLeft="true"
        fresco:roundTopRight="true"
        fresco:roundBottomLeft="true"
        fresco:roundBottomRight="true"
        android:layout_height="100dp" />

編碼實現

public class MainActivity extends AppCompatActivity {

    private SimpleDraweeView simpleDraweeView;
    private String url;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //(fresco:由facebook公司出的，一種圖片三級快取的實現.)
        //步驟二。使用fresco載入網路圖片
        //2.1.準備一個圖片的網路地址
        url = "http://img3.imgtn.bdimg.com/it/u=3376426628,3397639127&fm=11&gp=0.jpg";
        //2.2 佈局fresco 的自定義控制元件 （必須給控制元件設定大小）
        simpleDraweeView = (SimpleDraweeView) findViewById(R.id.image);
        //2.4.自定義控制元件的相關屬性  可以設定圓角。
        //  fresco:roundedCornerRadius="10dp"
        //  fresco:roundTopLeft="true"
        //  fresco:roundTopRight="true"
        //  fresco:roundBottomLeft="true"
        //  fresco:roundBottomRight="true"
    }
    public void showImage(View view) {
        //2.3.載入圖片
        simpleDraweeView.setImageURI(url);
    }
}

Demo栗子第2顆

如果你僅僅是想簡單下載一張網路圖片，在下載完成之前，顯示一張佔位圖，那麼簡單使用 SimpleDraweeView 即可。
在載入圖片之前，你必須初始化Fresco類。你只需要呼叫Fresco.initialize一次即可完成初始化，在 Application 裡面做這件事再適合不過了（如下面的程式碼），注意多次的呼叫初始化是無意義的。

[MyApplication.java]
public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Fresco.initialize(this);
    }
}

做完上面的工作後，你需要在 AndroidManifest.xml 中指定你的 Application 類。為了下載網路圖片，請確認你聲明瞭網路請求的許可權。

 <manifest
    ...
    >
    <uses-permission android:name="android.permission.INTERNET" />
    <application
      ...
      android:label="@string/app_name"
      android:name=".MyApplication"
      >
      ...
    </application>
    ...
  </manifest>

在xml佈局檔案中, 加入名稱空間：

<!-- 其他元素-->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

加入SimpleDraweeView:

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view"
    android:layout_width="130dp"
    android:layout_height="130dp"
    fresco:placeholderImage="@drawable/my_drawable"
  />

開始載入圖片:

Uri uri = Uri.parse("https://raw.githubusercontent.com/facebook/fresco/gh-pages/static/logo.png");
SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
draweeView.setImageURI(uri);

方法栗子：

SimpleDraweeView控制元件

SimpleDraweeView這個控制元件了，顯示圖片的時候直接寫了一個setImageURI（uri）

在xml中引入SimpleDraweeView

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/user_avator"
    android:layout_width="50dp"
    android:layout_height="50dp"
    fresco:roundAsCircle="true"
    fresco:roundedCornerRadius="180dp"
    fresco:actualImageScaleType="focusCrop"
    android:layout_centerVertical="true" />

注意：1、屬性中存在fresco:開頭的宣告。這個是fresco的自定義屬性，如果我們需要使用其自定義屬性，必須在我們的xml根佈局中新增宣告/名稱空間

<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"
    android:orientation="vertical">

2、配置網路許可權
3、在Java程式碼中開始載入圖片

Uri uri = Uri.parse("https://raw.githubusercontent.com/static/fresco-logo.png");  
SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);  
draweeView.setImageURI(uri);  

接下來詳細研究其用法：

URIs的使用：

型別  Scheme  示例
遠端圖片    http://, https://   HttpURLConnection 或者參考 使用其他網路載入方案
本地檔案    file:// FileInputStream
Content provider    content://  ContentResolver
asset目錄下的資源 asset://    AssetManager
res目錄下的資源   res://  Resources.openRawResource
res 示例:Uri uri = Uri.parse("res://包名(實際可以是任何字串甚至留空)/" + R.drawable.ic_launcher);

注意：Fresco 不支援 相對路徑的URI. 所有的URI都必須是絕對路徑，並且帶上該URI的scheme。

在XML中使用SimpleDraweeView:

給出一個完整的示例：

<com.facebook.drawee.view.SimpleDraweeView  
    android:id="@+id/my_image_view"  
    android:layout_width="20dp"  / 不支援wrap_content 如果要設定寬高比, 需要在Java程式碼中指定setAspectRatio(1.33f);
    android:layout_height="20dp"  // 不支援wrap_content 
    fresco:fadeDuration="300"//漸進時間  
    fresco:actualImageScaleType="focusCrop"   // 設定圖片縮放. 通常使用focusCrop,該屬性值會通過演算法把人頭像放在中間
    fresco:placeholderImage="@color/wait_color"  
    fresco:placeholderImageScaleType="fitCenter"  
    fresco:failureImage="@drawable/error"//失敗時顯示的圖片  
    fresco:failureImageScaleType="centerInside"//失敗圖片的顯示方式  
    fresco:retryImage="@drawable/retrying"//重試圖  
    fresco:retryImageScaleType="centerCrop"//重試圖顯示方式  
    fresco:progressBarImage="@drawable/progress_bar"  
    fresco:progressBarImageScaleType="centerInside"  
    fresco:progressBarAutoRotateInterval="1000"  
    fresco:backgroundImage="@color/blue"  
    fresco:overlayImage="@drawable/watermark"  
    fresco:pressedStateOverlayImage="@color/red"  

    fresco:roundAsCircle="false"// 是不是設定圓圈  
    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"  
  />  

說明：必須宣告 android:layout_width 和 android:layout_height，否則將無法正確載入影象，另外不支援 wrap_content 屬性，但也有例外的時候，如果想固定控制元件的寬高比，則可以使用wrap_content,並通過在xml程式碼中設定fresco:viewAspectRatio=”小數”或者在Java程式碼中設定mSimpleDraweeView.setAspectRatio(1.33f);即可。
在Java中自定義顯示圖

一般情況下，在XML設定顯示效果即可, 如果想更多定製化，可以這樣:

建立一個 builder 然後設定給 SimpleDraweeView:

List<Drawable> backgroundsList;  
List<Drawable> overlaysList;  
GenericDraweeHierarchyBuilder builder =  
    new GenericDraweeHierarchyBuilder(getResources());  
GenericDraweeHierarchy hierarchy = builder  
    .setFadeDuration(300)  
    .setPlaceholderImage(new MyCustomDrawable())  
    .setBackgrounds(backgroundList)  
    .setOverlays(overlaysList)  
    .build();  
mSimpleDraweeView.setHierarchy(hierarchy);  

注意：請不要多次呼叫setHierarchy，即使這個View是可回收的。建立 DraweeHierarchy 的較為耗時的一個過程，應該多次利用。

• 修改 DraweeHierarchy

DraweeHierarchy 的一些屬性可以在執行時改變。

要改變這些屬性，首先獲取一個引用:

GenericDraweeHierarchy hierarchy = mSimpleDraweeView.getHierarchy();

• 修改佔位圖

修改佔位圖為資源id:hierarchy.setPlaceholderImage(R.drawable.placeholderId);

或者修改為一個 Drawable:Drawable drawable; hierarchy.setPlaceholderImage(drawable);

• 修改縮放型別

hierarchy.setActualImageScaleType(ScalingUtils.ScaleType.CENTER_INSIDE);

如果你選擇縮放型別為 focusCrop，需要指定一個居中點:hierarchy.setActualImageFocusPoint(point);

• 修改圖片尺寸

Uri uri = "file:///mnt/sdcard/MyApp/myfile.jpg";
int width = 50, height = 50;
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
    .setResizeOptions(new ResizeOptions(width, height))
    .build();
PipelineDraweeController controller = Fresco.newDraweeControllerBuilder()
    .setOldController(mDraweeView.getController())
    .setImageRequest(request)
    .build();
mSimpleDraweeView.setController(controller);

• 自動旋轉

ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
    .setAutoRotateEnabled(true)
    .build();

setController（controller）方法載入圖片

DraweeController controller = Fresco.newDraweeControllerBuilder().setUri(uri).build();
        imageView.setController(controller);

當然如果你想監聽載入的過程，就加一個ControllerListen

ControllerListener listener = new BaseControllerListener(){
            @Override
            public void onFinalImageSet(String id, Object imageInfo, Animatable animatable) {
                super.onFinalImageSet(id, imageInfo, animatable);
            }

            @Override
            public void onFailure(String id, Throwable throwable) {
                super.onFailure(id, throwable);
            }

            @Override
            public void onIntermediateImageFailed(String id, Throwable throwable) {
                super.onIntermediateImageFailed(id, throwable);
            }
        };
        DraweeController controller = Fresco.newDraweeControllerBuilder()
                .setUri(uri)
                .setControllerListener(listener)
                .build();
        imageView.setController(controller);

圖片載入成功或者失敗，會執行裡面的方法，其中圖片載入成功時會執行onFinalImageSet方法，圖片載入失敗時會執行onFailure方法，如果圖片設定漸進式，onIntermediateImageFailed會被回撥

說完了如何載入uri之後，如何實現在xml中的效果呢？我們繼續在java程式碼中實現xml的效果

GenericDraweeHierarchy hierarchy = new GenericDraweeHierarchyBuilder(getResources())
                .setFadeDuration(300)
                .setBackground(getDrawable(R.drawable.ic_launcher))
                .setPlaceholderImage(getDrawable(R.drawable.ic_launcher))
                .setFailureImage(getDrawable(R.drawable.ic_launcher))
                .build();
        imageView.setHierarchy(hierarchy);

方法很多，你在xml中用到的都可以在這裡設定，有些在xml中不能設定的在這裡也是可以的，例如，我可以設定多張背景圖片，我可以設定多張疊加圖，這裡都可以幫你實現，是不是很強大啊，想不想拿到特權了一樣呢！但是DraweeHiererchy建立時比較耗時，所以要多次利用

GenericDraweeHierarchy hierarchy1 = imageView.getHierarchy();

首先是漸進式圖片載入，這方面的功能充分考慮了網路比較慢的情況下，使用者不至於一致在等，最起碼能看到模糊的照片，這個所謂的漸進式載入就是說使用者從圖片載入之後，圖片會從模糊到清晰的一個漸變過程，當然這個過程僅限於從網路載入圖片，本地或者快取等地方的圖片也不需要漸進式載入，沒有意義

ProgressiveJpegConfig config = new ProgressiveJpegConfig() {
            @Override
            public int getNextScanNumberToDecode(int i) {
                return 0;
            }

            @Override
            public QualityInfo getQualityInfo(int i) {
                return null;
            }
        };

        ImagePipelineConfig imagePipelineConfig = ImagePipelineConfig.newBuilder(this)
                .setProgressiveJpegConfig(config)
                .build();
        Fresco.initialize(getApplicationContext(),imagePipelineConfig);

當然你也可以使用ProgressiveJpegConfig config1= new SimpleProgressiveJpegConfig(list,2);

<pre name="code" class="java">FLog.setMinimumLoggingLevel(FLog.VERBOSE);
        Set<RequestListener> listeners = new HashSet<>();
        listeners.add(new RequestLoggingListener());
        ImagePipelineConfig config = ImagePipelineConfig.newBuilder(this)
                .setRequestListeners(listeners)
                .build();
        Fresco.initialize(this, config);
        setContentView(R.layout.activity_main);

        mProgressiveJpegView = (SimpleDraweeView) findViewById(R.id.my_image_view);

        Uri uri = Uri.parse("http://pooyak.com/p/progjpeg/jpegload.cgi?o=1");
        ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
                .setProgressiveRenderingEnabled(true)
                .build();
        DraweeController controller = Fresco.newDraweeControllerBuilder()
                .setImageRequest(request)
                .build();
        mProgressiveJpegView.setController(controller);

ImageRequest request = ImageRequestBuilder
                .newBuilderWithSource(uri)
                .setProgressiveRenderingEnabled(true)
                .build();
        PipelineDraweeController controller = (PipelineDraweeController) Fresco.newDraweeControllerBuilder()
                .setImageRequest(request)
                .setOldController(imageView.getController())
                .build();
        imageView.setController(controller);

個人認為這個框架最巧妙的地方，就是把bitmap儲存到ashmen，不會啟動gc，使的介面不會因為gc而卡死，Fresco使用三級快取，第一級快取就是儲存bitmap，第二級快取儲存在記憶體，但是沒有解碼，使用時需要介面，第三級快取就是儲存在本地檔案，同樣檔案也未解碼，使用的時候要先解碼啦！