今天只是入門級別的，改天會出一個深度一點的博文介紹用法。
題外話：最近消沉了有快三個月了，這幾天都不知道自己在幹嘛，這是春節之後的第一篇博文，從今天開始讓一切都不一樣：
Code Behavior, one can.t be less.
Fresco是一個Facebook開源的Android圖片載入庫，效能真的讓我無話可說，而且滿足了我對圖片載入的一切幻想，所以我必須為它寫一篇文章，當然更多的是自己的總結與記錄。
Fresco開源地址：github.com/facebook/fr…
Fresco文件地址：www.fresco-cn.org
前端時間我寫了一個Android相簿庫Album，當時我在做測試的時候發現，用Picasso或者Glide時，當列表達到上千條時，滑動起來就會卡，但是換成Fresco後一點都不卡了，而且Fresco做到的幾個內建效果讓我欣喜若狂，所以我把我的使用總結記錄下來：
依賴Fresco
// 一般依賴：
compile 'com.facebook.fresco:fresco:0.14.1'
// 如果需要支援gif，再新增：
compile 'com.facebook.fresco:animated-gif:0.12.0'複製程式碼初始化
建議在App啟動就初始化，所以建議寫在Application#onCreate()中，記得在manifest.xml註冊Application。
一般初始化：
public class App extends Application {
@Override
public void onCreate() {
super.onCreate();
Fresco.initialize(this);
}
...複製程式碼高階初始化-配置快取資料夾
// 高階初始化：
Fresco.initialize(this, ImagePipelineConfig.newBuilder(App.this)
.setMainDiskCacheConfig(
DiskCacheConfig.newBuilder(this)
.setBaseDirectoryPath(new File("SD卡路徑")) // 注意Android執行時許可權。
.build()
)
.build()
);複製程式碼上面的高階初始化當然不止這麼一點點，這裡舉出一個敏感的例子，就是配置快取SD卡路徑，這裡涉及到Android6.0執行時許可權，我也給一個解決方案，我使用的許可權管理庫是AndPermission（github.com/yanzhenjie/…
首先在Application中判斷是否有SD卡許可權，如果有則初始化到SD卡，如果沒有則採用預設配置：
public class App extends Application {
private static App app;
@Override
public void onCreate() {
super.onCreate();
app = this;
// 如果有SD卡許可權則直接初始化到SD卡。
if (AndPermission.hasPermission(this, Manifest.permission.READ_EXTERNAL_STORAGE))
initFresco();
else { // 沒有許可權，暫時使用預設配置。
Fresco.initialize(this);
}
}
/**
* 高階初始話Fresco。
*/
public void initFresco() {
// 高階初始化：
Fresco.initialize(this, ImagePipelineConfig.newBuilder(App.this)
.setMainDiskCacheConfig(
DiskCacheConfig.newBuilder(this)
.setBaseDirectoryPath(new File("SD卡的路徑..."))
.build()
)
.build()
);
}
public static App get() {
return app;
}
}複製程式碼然後在SplashActivity申請SD卡許可權，已被下次進入App時初始化Fresco時擁有SD卡許可權：
public class SplashActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 申請許可權。
AndPermission.with(this)
.requestCode(100)
.permission(Manifest.permission.READ_CALENDAR)
.send();
}
@Override
public void onRequestPermissionsResult(int requestCode,
@NonNull String[] permissions, @NonNull int[] grantResults) {
AndPermission.onRequestPermissionsResult(requestCode, permissions, grantResults, listener);
}
/**
* 許可權監聽。
*/
private PermissionListener listener = new PermissionListener() {
@Override
public void onSucceed(int requestCode, List<String> grantPermissions) {
if(requestCode == 100)
// 啟動app：
startActivity(new Intent(SplashActivity.this, MainActivity.class));
}
@Override
public void onFailed(int requestCode, List<String> deniedPermissions) {
if(requestCode == 100)
// 使用者不授權，則退出app：
finish();
}
};
}複製程式碼高階初始化-配置網路層為OkHttp
Fresco預設使用HttpURLConnection作為網路層，當然也可以配置OkHttp作為它的網路層，配置OkHttp為它的網路層需要依賴下面的庫：
compile "com.facebook.fresco:imagepipeline-okhttp3:0.12.0+"複製程式碼然後在Application中初始化的時候注意：
/**
* 初始話Fresco。
*/
public void initFresco() {
// 你的OkHttpClient根據你的設計來，建議是單例：
OkHttpClient okHttpClient = new OkHttpClient();
Fresco.initialize(this, OkHttpImagePipelineConfigFactory.newBuilder(App.this, okHttpClient)
.setMainDiskCacheConfig(
DiskCacheConfig.newBuilder(this)
.setBaseDirectoryPath(new File("SD卡的路徑..."))
.build()
)
.build()
);
}複製程式碼這裡只需要注意原來的ImagePipelineConfig換成了OkHttpImagePipelineConfigFactory，並且需要一個OkHttpClient的物件。
載入網路圖片、url、assets、res、本地File圖片
先給出支援的URI格式列表（列表來自fresco-cn.org）：
| Type | Scheme | Sample |
| ---- | ----- | ---- |
| http遠端圖片| http://或者https:// | HttpURLConnection或者OkHttp |
| 本地檔案| file:// | FileInputStream |
| Content provider| content:// | ContentResolver |
| res目錄下的資源| res:// | Resources.openRawResource |
| asset目錄下的資源| asset:// | AssetManager |
| Uri中指定圖片資料| data:mime/type;base64, | 資料型別必須符合rfc2397規定 (僅支援 UTF-8) |
SimpleDraweeView
實際開發中，如果沒有特殊需求，我們一般使用SimpleDraweeView來佔位，傳統的圖片載入框架一般是使用ImageView，例如：
<ImageView
.../>複製程式碼在使用Fresco時我們一般使用SimpleDraweeView，它也是繼承ImageView的：
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/iv_head_background"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_200"/>複製程式碼把它當成我們平常使用的ImageView即可，不過我們要注意Fresco不支援wrap_content（具體原因看這裡），需要使用match_parent或者顯示指定view寬高，有些同學看到這個就很頭疼了，但是這真的不是什麼問題，下面給出解決方案：
一、由伺服器返回URL時返回圖片的寬高資訊
平常我們伺服器這樣返回圖片url的：
{
"name":"嚴振杰",
"head":"http://www.yanzhenjie.com/images/main/yzj_head.png"
}複製程式碼使用Fresco我們可以把一個圖片url當成一個物件包裹起來：
{
"name":"嚴振杰",
"head":
{
"url":"http://www.yanzhenjie.com/images/main/yzj_head.png",
"width":"500",
"height":"500"
}
}複製程式碼或者在URL後面跟一個寬高的引數：
{
"name":"嚴振杰",
"head":"http://www.yanzhenjie.com/images/main/yzj_head.png?width=500&height=500"
}複製程式碼二、根據設計師的給的尺寸，預先設定圖片寬高
設計師設計UI的時候肯定會用一個螢幕作為標準，比如iOS的750*1340，或者Android的720*1280，我們可以根據設計圖和手機實際寬高計算出View在手機中應有的寬高，見下面的程式碼。
最後：我們在解析出來寬高後，我們可以動態的設定SimpleDraweeView的寬高：
/**
* 設定view大小。
*
* @param view View。
* @param width 指定寬。
* @param width 指定高。
*/
public static void requestLayout(View view, int width, int height) {
ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
if (layoutParams == null) {
layoutParams = new ViewGroup.LayoutParams(width, height);
view.setLayoutParams(layoutParams);
} else {
view.getLayoutParams().width = width;
view.getLayoutParams().height = height;
view.requestLayout();
}
}
/**
* 根據設計圖寬高，計算出View在該螢幕上的實際寬高。
*
* @param width 設計圖中View寬。
* @param height 設計圖中View高。
*/
public static void calcRealSizeByDesign(View view, int width, int height) {
int realWidth, realHeight;
realWidth = 裝置螢幕寬度 * width / 設計圖螢幕寬度;
realHeight = measure[0] * height / width;
requestLayout(view, realWidth, realHeight);
}複製程式碼基礎配置和注意的地方講完了，那麼下面就是重頭戲了，如何載入圖片。
一、載入http/https遠端圖片
/**
* 顯示http或者https遠端圖片。
*
* @param draweeView imageView。
* @param url 連線地址。
*/
public static void showUrl(SimpleDraweeView draweeView, String url) {
try {
draweeView.setImageURI(Uri.parse(url));
} catch (Exception e) {
e.printStackTrace();
}
}複製程式碼二、顯示本地圖片
這裡就有個坑了，先看一下下面我寫了兩個方法，一個需要傳入View的實際寬高，一個不需要。上面已經說了，SimpleDraweeView需要在xml中、java中指定它的寬高，或者是使用match_parent。
這裡需要注意，1. 如果view指定的寬高不是match_parent則直接呼叫第二個不需要傳入寬高的發那個發，如果為SimpleDraweeView寫的寬高是match_parent時，載入圖片需要告訴Fresco你的View在螢幕上的實際寬高是多少，否則是不能載入出來的。
比如，你的SimpleDraweeView是全屏的，那麼你就填入螢幕的寬高，如果不是全屏，就利用上面講的方法測量出View的實際寬高後傳入。
/**
* 顯示一個本地圖片。
*
* @param draweeView imageView。
* @param path 路徑。
* @param width 實際寬。
* @param height 實際高度。
*/
public static void showFile(SimpleDraweeView draweeView, String path, int width, int height) {
try {
Uri uri = Uri.parse("file://" + path);
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
.setResizeOptions(new ResizeOptions(width, height))
.build();
AbstractDraweeController controller = Fresco.newDraweeControllerBuilder()
.setOldController(draweeView.getController())
.setImageRequest(request)
.build();
draweeView.setController(controller);
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 顯示本地圖片。
*
* @param draweeView imageView。
* @param path 路徑。
*/
public static void showFile(SimpleDraweeView draweeView, String path) {
try {
Uri uri = Uri.parse("file://" + path);
draweeView.setImageURI(uri);
} catch (Exception e) {
e.printStackTrace();
}
}複製程式碼三、顯示res中圖片
這裡要注意，我們在為res中的圖片生成Uri的時候：
Uri uri = Uri.parse("res://包名(任何字串或者留空)/" + R.drawable.ic_launcher);複製程式碼所以我們一般留空，因此我們的程式碼看起來是下面的樣子：
/**
* 顯示一個Res中的圖片。
*
* @param draweeView ImageView。
* @param resId 資源ID。
*/
public static void showRes(SimpleDraweeView draweeView, @DrawableRes int resId) {
try {
// 你沒看錯，這裡是三個///。
draweeView.setImageURI(Uri.parse("res:///" + resId));
} catch (Exception e) {
e.printStackTrace();
}
}複製程式碼四、顯示ContentProvider圖片
/**
* 顯示content provider圖片。
*
* @param draweeView image view。
* @param path 路徑。
*/
public static void showContentProvider(SimpleDraweeView draweeView, String path) {
try {
draweeView.setImageURI(Uri.parse("content://" + path));
} catch (Exception e) {
e.printStackTrace();
}
}複製程式碼五、顯示assets中的圖片
/**
* 顯示Assets中的圖片。
*
* @param draweeView ImageView.
* @param path 路徑。
*/
public static void showAsset(SimpleDraweeView draweeView, String path) {
try {
draweeView.setImageURI(Uri.parse("asset://" + path));
} catch (Exception e) {
e.printStackTrace();
}
}複製程式碼你以為到這裡就完了嗎？並沒有，繼續看。
一些預設屬性的設定
<com.facebook.drawee.view.SimpleDraweeView
android:layout_width="20dp"
android:layout_height="20dp"
fresco:fadeDuration="300" // 淡出時間，毫秒。
fresco:actualImageScaleType="focusCrop" // 等同於android:scaleType。
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" // 背景圖，不會被View遮擋。
fresco:roundAsCircle="false" // 是否是圓形圖片。
fresco:roundedCornerRadius="1dp" // 四角圓角度數，如果是圓形圖片，這個屬性被忽略。
fresco:roundTopLeft="true" // 左上角是否圓角。
fresco:roundTopRight="false" // 右上角是否圓角。
fresco:roundBottomLeft="false" // 左下角是否圓角。
fresco:roundBottomRight="true" // 左下角是否圓角。
fresco:roundingBorderWidth="2dp" // 描邊的寬度。
fresco:roundingBorderColor="@color/border_color" 描邊的顏色。
/>複製程式碼xml中可以配置，在Java程式碼中也是可以配置的，我這裡列出一部分API：
SimpleDraweeView simpleDraweeView = new SimpleDraweeView(context);
simpleDraweeView.setLayoutParams(new ViewGroup.LayoutParams(-1, -1));
GenericDraweeHierarchy hierarchy = new GenericDraweeHierarchyBuilder(context.getResources())
.setActualImageScaleType(ScalingUtils.ScaleType.FIT_CENTER)
.setPlaceholderImage(R.drawable.fresco_failed)
.setPlaceholderImageScaleType(ScalingUtils.ScaleType.FIT_XY)
.setFailureImage(R.drawable.fresco_failed)
.setPressedStateOverlay(ResCompat.getDrawable(R.drawable.transparent_half_1))
.setFailureImageScaleType(ScalingUtils.ScaleType.FIT_XY)
.build();
simpleDraweeView.setHierarchy(hierarchy);
// load image from ...複製程式碼一些特殊效果
第一個，先來一個圓形圖片帶白色的邊：
綜合上面的屬性這裡就不多解釋了：
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/iv_user_fund_user_head"
android:layout_width="80dp"
android:layout_height="80dp"
fresco:roundAsCircle="true" // 圓形圖片。
fresco:roundingBorderColor="@color/white" // 白色描邊。
fresco:roundingBorderWidth="2dp"/> // 描邊寬度。複製程式碼第二個，Fresco高斯模糊：
/**
* 以高斯模糊顯示。
*
* @param draweeView View。
* @param url url.
* @param iterations 迭代次數，越大越魔化。
* @param blurRadius 模糊圖半徑，必須大於0，越大越模糊。
*/
public static void showUrlBlur(SimpleDraweeView draweeView, String url, int iterations, int blurRadius) {
try {
Uri uri = Uri.parse(url);
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
.setPostprocessor(new IterativeBoxBlurPostProcessor(6, blurRadius))
.build();
AbstractDraweeController controller = Fresco.newDraweeControllerBuilder()
.setOldController(draweeView.getController())
.setImageRequest(request)
.build();
draweeView.setController(controller);
} catch (Exception e) {
e.printStackTrace();
}
}複製程式碼效果就這樣子，其它的關於進度條子類的自己去試試吧，我就不演示佔篇幅了。
拿到快取的Bitmap
有幾次在群裡討論關於Fresco的問題，很多同學吐槽Fresco沒有直接拿到Bitmap的方法，其實直接拿到Bitmap相當於從SD卡讀取一個檔案，如果圖片過大，就會耗時，造成App卡（假）死，所以我們要採用非同步的方式：
/**
* 載入圖片成bitmap。
*
* @param imageUrl 圖片地址。
*/
public static void loadToBitmap(String imageUrl, BaseBitmapDataSubscriber mDataSubscriber) {
ImageRequest imageRequest = ImageRequestBuilder
.newBuilderWithSource(Uri.parse(imageUrl))
.setProgressiveRenderingEnabled(true)
.build();
ImagePipeline imagePipeline = Fresco.getImagePipeline();
DataSource<CloseableReference<CloseableImage>> dataSource = imagePipeline.fetchDecodedImage
(imageRequest, App.get());
dataSource.subscribe(mDataSubscriber, CallerThreadExecutor.getInstance());
}複製程式碼用起來也很簡單：
loadToBitmap(imageUrl, new BaseBitmapDataSubscriber() {
@Override
public void onNewResultImpl(@Nullable Bitmap bitmap) {
// 讀取成功。
}
@Override
public void onFailureImpl(DataSource dataSource) {
// 讀取失敗。
}
});複製程式碼昨晚熬夜到2.30寫的，希望幫助到有需要的同學。