借鑑Glide思想二次封裝Fresco

本篇文章已受權微信公衆號 dasu_Android（大蘇）獨家發佈

最近封裝了個 Fresco 的組件庫：DFresco，就順便來說講。

背景

Fresco 圖片庫很強大，咱們項目中就是使用的 Fresco，但有一點就是，不怎麼好使用，略麻煩。不一樣項目中，多多少少都須要對 Fresco 進行一層封裝才能在 ui 裏快速使用。

這就致使了，不一樣項目都根據本身的業務需求場景來進行封裝，每次有新項目，複製粘貼時又得解決好多業務耦合的錯誤，麻煩，是真的麻煩~

並且，首次接觸 Fresco，接入上手的成本相比其餘圖片庫，如 Glide，成本都要大不少。

舉個例子，假如你有這麼個需求：加載一張網絡上的 gif 圖片，爲了防止內存佔用過多，須要設置分辨率壓縮，最後顯示到圓形控件上，同時，須要設置佔位圖，錯誤圖，拉伸方式等。

那麼此時，你的代碼可能就是這樣的：

ImageDecodeOptions imageDecodeOptions = ImageDecodeOptions.newBuilder()
        .setDecodePreviewFrame(true).build();
ImageRequestBuilder builder = ImageRequestBuilder.newBuilderWithSource(mUri)
        .setProgressiveRenderingEnabled(true)
        .setImageDecodeOptions(imageDecodeOptions);
if (mWidth > 0 && mHeight > 0) {
    builder.setResizeOptions(new ResizeOptions(mWidth, mHeight));
}

ImageRequest request = builder.build();
AbstractDraweeController controller = Fresco.newDraweeControllerBuilder()
            .setImageRequest(request)
            .setControllerListener(listener)
            .setOldController(draweeView.getController())
            .setAutoPlayAnimations(true).build();
draweeView.setController(controller);

同時，你可能還須要在 xml 中對 SimpleDrawwView 控件進行佔位圖等等的配置：

<com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/sdv_fresco"
        android:layout_width="500dp"
        android:layout_height="500dp"
        fresco:actualImageScaleType="centerCrop"
        fresco:fadeDuration="3000"
        fresco:failureImage="@mipmap/ic_launcher"
        fresco:failureImageScaleType="centerCrop"
        fresco:placeholderImage="@mipmap/ic_launcher"
        fresco:placeholderImageScaleType="centerCrop"
        fresco:progressBarAutoRotateInterval="1000"
        fresco:progressBarImage="@drawable/ani_rotate"
        fresco:progressBarImageScaleType="centerCrop"
        fresco:retryImage="@mipmap/ic_launcher"
        fresco:retryImageScaleType="centerCrop"
        fresco:backgroundImage="@mipmap/ic_launcher"
        fresco:overlayImage="@mipmap/ic_launcher"
        fresco:pressedStateOverlayImage="@mipmap/ic_launcher"
        fresco:roundAsCircle="false"
        fresco:roundingBorderWidth="2dip"
        fresco:roundingBorderColor="@color/colorPrimary"/>

若是忘記了某個自定義屬性名是什麼的時候，還獲得網上搜索下資料，是吧。

小結一下，使用 Fresco，你的接入學習成本至少須要知道 Fresco 的以下信息：

• SimpleDraweeView 的自定義屬性
• ImageRequestBuilder 用法及大概用途
• AbstractDraweeController 用法及大概用途
• GenericDraweeHierarchy 用法及大概用途

若是涉及到一些網絡下載監聽，緩存之類的，那麼你還要了解：

• Imagepipeline 用法及大概用途

總之，Fresco 強大是強大，但使用起來不方便，不得不封裝一層。

既然要封裝，那麼就直接借鑑 Glide 的使用思想來進行封裝好了，若是有使用過 Glide 的應該很清楚，要實現以上功能，全程一個調用鏈便可。

二次封裝

封裝要達到的目的有兩點：

• 使用簡潔、方便
• 其餘人接入直接上手的成本儘量少，最好不用去看文檔，去看源碼

第一點能夠參考 Glide 的使用方式來設計，那麼第二點個人想法是藉助 AndroidStudio 的代碼提示功能來實現。

好比，你只需知道，組件的入口是 DFresco 便可，其餘都經過 AndroidStudio 來給你提示，如：

當你在 AndroidStudio 上輸入 DFresco. 後，界面上會彈出你可用 api，這些就是我開放給你的入口，我將這個使用過程劃分紅幾個步驟，每一個步驟能作什麼，該作什麼，我都給你規定好了，你參照着提示，直接從方法命名上就可以知道該如何使用了，AndroidStudio 會一步步引導你。

這裏就兩個入口，一個是用來初始化 Fresco 的：

• init(Context)

這個內部封裝了一些默認的初始化配置，好比內存大小配置，內部日誌配置等等。

• init(Context, ImagePipelineConfig)

這個是開放給你的自定義配置，若是你不想使用默認的配置的話。

• source(String url) ：加載網絡上的圖片
• source(File localFile) ：加載磁盤上的圖片
• source(Context context, int resId) ：加載 res 內的 drawable 資源圖片
• source(Uri uri) ：通用的加載方式

我將經常使用的幾種圖片來源單獨封裝出來使用，方便。

當調用了 source() 後就進入了第二個步驟，這個步驟中，我將圖片相關的配置設計到另一個步驟中去，不然連同圖片配置的 api 也都在這裏的話，會搞得蠻亂的，可能讓使用者到這裏後不清楚該調用哪些接口了。

因此，我會把控每一個步驟的 api，儘可能讓每一個步驟的 api 作的事都比較相近，好比這裏：

• intoTarget(SimpleDraweeView) 加載圖片顯示到控件上
• intoTarget(SimpleDraweeView，ControllerListener) 加載圖片顯示到控件上，容許監聽這個過程
• intoTarget(BaseBitmapDataSubscriber) 只加載圖片到內存中，以 Bitmap 形式存在

個人需求場景大概就是直接加載圖片顯示到控件上，或者有時候只是須要將圖片加載到內存中，但不用顯示到某個控件上，反而要取得圖片的 Bitmap 對象，因此我將這些都封裝起來了。

• resize(int width, int height)

這個實際上就是對 Fresco 中的 ResizeOptions 的一層封裝而已，簡化使用，不至於像之前那麼麻煩。

• enterImageConfig()

若是你都使用默認配置的話，那麼是不用再去調用那些各類配置的接口的，因此我纔將圖片配置封裝到另一個步驟中，這個步驟你可進，可不進，若是有需求，那麼經過這個方法進入圖片配置步驟：

這裏的配置項不少，也是由於這個緣由，因此纔不想讓這些接口跟上一個步驟放一塊兒，否則很容易讓使用者懵掉。而進入了圖片配置這個步驟後，這裏提供的 api 其實就是對 GenericDraweeHierarchy 的用途進行了一層封裝，或者說對 SimpleDraweeView 的自定義屬性進行了一層封裝。

若是你不熟悉，不要緊，其實就是一些經常使用的功能，如設置控件爲圓形、圓角、邊框，設置佔位圖、失敗圖、進度圖、圖片拉伸方式、淡入淡出動畫時長等等。

這樣封裝的目的在於，你能夠經過一條調用鏈的形式就設置完全部的配置，就像 Glide 的使用同樣，而不用再去 new 不少 Fresco 的類，再去拼接。

進入圖片配置步驟只是一個可選的步驟，進來以後固然就要出去，因此當完成了你的配置後，須要調用：finishImageConfig()，如：

這樣就完成了圖片配置，將流程切回主線了，就能夠繼續根據你的須要設置圖片顯示的目標了。

固然，爲了防止再次進入圖片配置步驟這樣形成以前的配置項失效的場景，我借鑑了 Fresco 的 init 處理方法，即，若是一次使用過程當中，重複進入圖片配置步驟，那麼程序會拋異常來提醒你不能這麼作。

以上，就是 DFresco 組件的封裝思想，歡迎指點一下哈~

另外，參考了 Glide 的一些處理，當你的 intoTarget 是傳入了 SimpleDraweeView 控件時，DFresco 內部會自動根據控件的大小對圖片進行一次分辨率壓縮，下降圖片佔用內存，固然，若是你有手動調用了 resize()，那麼以你的爲主。

使用示例

compile 'com.dasu.image:fresco:0.0.1'

使用以前，需先初始化，建議在 Application 中進行：

DFresco.init(this);

//加載 res 中的 drawable 圖片到 SimpleDraweeView 控件上（默認支持 gif 圖，而且會自動根據控件寬高進行分辨率壓縮，下降內存佔用
DFresco.source(mContext, R.drawable.weixin).intoTarget(mSimpleDraweeView);

//加載磁盤中的圖片，手動設置分辨率的壓縮，並獲取 bitmap 對象，監聽回調，手動顯示到 ImageView 控件上
DFresco.source(new File("/mnt/sdcard/weixin.jpg"))
        .resize(500, 500)
        .intoTarget(new BaseBitmapDataSubscriber() {
                @Override
                protected void onNewResultImpl(Bitmap bitmap) {
                    Log.w("!!!!!!", "bitmap：ByteCount = " + bitmap.getByteCount() + ":::bitmap：AllocationByteCount = " + bitmap.getAllocationByteCount());
                    Log.w("!!!!!!", "width:" + bitmap.getWidth() + ":::height:" + bitmap.getHeight());
                    mImageView.setImageBitmap(bitmap);
                }

                @Override
                protected void onFailureImpl(DataSource<CloseableReference<CloseableImage>> dataSource) {
                    Log.e("!!!!!!", "onFailureImpl");
                }
            });

//加載網絡圖片，進行各類配置，如縮放方式，佔位圖，圓形，圓角，動畫時長等等，最後自動顯示到 SimpleDraweeView 控件上
DFresco.source("https://upload-images.jianshu.io/upload_images/1924341-9e528ee638e837a5.png")
                    .enterImageConfig() //進入配置步驟
                    .allFitXY()  //全部圖片，包括佔位圖等等的拉伸方式
                    .animFade(3000) //淡入淡出動畫時長
                    .placeholderScaleType(ScalingUtils.ScaleType.CENTER_INSIDE) //設置佔位圖的拉伸方式，後面設置的會覆蓋前面的
                    .actualScaleType(ScalingUtils.ScaleType.CENTER)
//                    .asRound(50) //設置圓角，（圓角和圓形不能同時設置）
                    .asCircle() //設置控件顯示爲圓形控件
                    .roundBorderColor(Color.RED) //設置圓角或圓形的邊框顏色
                    .roundBorderWidth(20)  //設置圓角或圓形的邊框寬度
                    .failure(R.drawable.timg) //設置失敗圖
                    .progressBar(R.drawable.aaaa) //設置加載進度圖
                    .retry(R.drawable.weixin) //設置重試時的圖
                    .placeholder(R.drawable.image) //設置佔位圖
                    .finishImageConfig() //退出配置步驟
                    .intoTarget(mSimpleDraweeView);

Github 地址

DFresco：https://github.com/woshidasusu/base-module/tree/master/fresco

---

你們好，我是 dasu，歡迎關注個人公衆號（dasuAndroidTv），若是你以爲本篇內容有幫助到你，能夠轉載但記得要關注，要標明原文哦，謝謝支持~