Fresco圖片框架簡介及使用（可做圓角圖片）

Fresco圖片框架簡介及使用

Fresco是FaceBook推出的一個Android開源圖片管理框架，它提供了圖片下載、漸進式加載、內存管理等功能，很大程度上把程序員從繁瑣的圖片管理工作中解放了出來，官網地址，Fresco API。

一. 特性介紹

1. Image Pipeline

Fresco 中設計有一個叫做 Image Pipeline 的模塊。它負責從網絡，從本地文件系統，本地資源加載圖片。爲了最大限度節省空間和CPU時間，它含有3級緩存設計（2級內存，1級磁盤）。

2. Drawees

Fresco 中設計有一個叫做 Drawees 模塊，它會在圖片加載完成前顯示佔位圖，加載成功後自動替換爲目標圖片。當圖片不再顯示在屏幕上時，它會及時地釋放內存和空間佔用。

3. 內存管理

解壓後的圖片，即Android中的Bitmap，佔用大量的內存。大的內存佔用勢必引發更加頻繁的GC。在5.0以下，GC將會顯著地引發界面卡頓。在5.0以下系統，Fresco將圖片放到一個特別的內存區域。當然，在圖片不顯示的時候，佔用的內存會自動被釋放。這會使得APP更加流暢，減少因圖片內存佔用而引發的OOM。

4. 圖片加載

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

爲同一個圖片指定不同的遠程路徑，或者使用已經存在本地緩存中的圖片
先顯示一個低清晰度的圖片，等高清圖下載完之後再顯示高清圖
加載完成回調通知
對於本地圖，如有EXIF縮略圖，在大圖加載完成之前，可先顯示縮略圖
縮放或者旋轉圖片
對已下載的圖片再次處理

5. 圖片繪製

Fresco 的 Drawees 設計，帶來一些有用的特性：

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

6. 圖片的漸進式呈現

漸進式的JPEG圖片格式已經流行數年了，漸進式圖片格式先呈現大致的圖片輪廓，然後隨着圖片下載的繼續，呈現逐漸清晰的圖片，這對於移動設備，尤其是慢網絡有極大的利好，可帶來更好的用戶體驗。 Android 本身的圖片庫不支持此格式，但是Fresco支持。使用時，和往常一樣，僅僅需要提供一個圖片的URI即可，剩下的事情，Fresco會處理。

7. Gif和Webp格式圖片的強大支持

加載Gif圖和WebP動圖在任何一個Android開發者眼裏看來都是一件非常頭疼的事情。每一幀都是一張很大的Bitmap，每一個動畫都有很多幀。Fresco讓你沒有這些煩惱，它處理好每一幀並管理好你的內存。
支持WebP解碼，即使在早先對WebP支持不完善的Android系統上也能正常使用！

二、Fresco的簡單使用

1. 在Gradle配置中加入Fresco的依賴

dependencies {
      compile 'com.facebook.fresco:fresco:0.14.1'
}

2. 在你的Application中初始化Fresco

public class MyApplication extends Application{

    @Override
    public void onCreate() {
        super.onCreate();
        Fresco.initialize(this);
    }
}

註冊MyApplication，並配置網絡權限

<uses-permission android:name="android.permission.INTERNET"/>
<application
        android:name=".MyApplication"
        android:allowBackup="false"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

3. 在佈局文件中使用Fresco自定義的圖片控件SimpleDraweeView,注意引入Fresco命名空間。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.testwaterfall.MainActivity"
    >

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/drawee_img"
        android:layout_width="400dp"
        android:layout_height="400dp"
        fresco:roundAsCircle="true"  //設置圓形圖片
        />
</RelativeLayout>

4.在Activity使用SimpleDraweeView，設置其Uri

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.drawee_img);
        Uri uri = Uri.parse("http://www.people.com.cn/mediafile/pic/20161022/76/4315084153778263996.jpg");
        draweeView.setImageURI(uri);

        //initView();
    }

5.效果展示

三、Fresco的更多用法

1. Fresco支持各種Uri的使用

類型	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);

假如，我在res的mipmap下加入一張名爲angel的圖片，那麼Uri可以這麼寫

Uri uri = Uri.parse("res://mipmap/"+R.mipmap.angel);

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

2. SimpleDraweeView的更多屬性展示

<com.facebook.drawee.view.SimpleDraweeView  
    android:id="@+id/my_image_view"  
    android:layout_width="20dp"  
    android:layout_height="20dp"  
    fresco:fadeDuration="300"//漸進時間  
    fresco:actualImageScaleType="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"  
  />

Fresco圖片框架簡介及使用（可做圓角圖片）