Android踩坑日記：使用Fesco圖片加載庫在GridView上的卡頓優化

1，fresco是一個強大的圖片加載庫
2，fresco設計了一個叫做image pipeline（圖片管道）的模塊，它負責從從網絡，從本地文件系統，從本地資源加載圖片，爲了最大限度節約資源和cpu時間，它設計了3級緩存(2級內存，1級文件)
3，fresco設計了一個叫做drawee的模塊，方便地顯示loading圖，當圖片不再顯示在屏幕上時，及時地釋放內存和空間佔用。
4，支持 Android2.3(API level 9) 及其以上系統。

• 推薦資源
  本篇文章的目的不是講fresco的原理和使用，但是還是整理一下資源，方便以後學習使用。
  1，官方文檔：Fresco官方文檔 ，建議在看文檔的時候優先選擇閱讀英文文檔， 因爲中文版文檔可能有滯後的情況，這樣會避免很多不必要的麻煩。
  2，中文文檔：Fresco中文文檔
  3，GitHub地址：Fresco的GitHub地址
  4，引入官方示例：官方示例 簡單看了下，還不錯， 講的相對詳細，我並未細看。
  5，簡單使用技巧：簡單使用教程，非常詳細的使用教程了吧，作者還是比較有心的，點個贊。
  6，進階研究：
     a.Fresco源碼解析 - 初始化過程分析
     b.Fresco源碼解析 - 本地編譯
     c.Fresco源碼解析 - Hierarachy-View-Controller
     d.Fresco源碼解析 - DraweeView
     e.Fresco源碼解析 - DataSource怎樣存儲數據
  7，目前看到的最全的源碼解析：Fresco-Source-Analysis
  8，不錯的Fresco的Demo：Fresco-Sample-Usage
  9，Fresco在中國的推廣人秋百萬的作品：fresco-demo-for-gradle，fresco-docs-cn秋百萬作品，絕對精品。 有個圖片加載開源的簡單對比，用法也很多，非常有參考價值。值得一提的是，貌似中文文檔也是秋百萬的作品

• 使用的坑
  Fresco強大，卻也並不完美，但一直在更新，所以，不管你考慮使用，都建議持續關注開源庫的發展和更新，因爲說不定，就會有好消息，讓你學習，讓你輕鬆
  第一次使用Fresco是要做一個網格相冊的模塊，一般情況下，直接 Fresco.initialized(context) 初始化後，在佈局中進行如下引用

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

就已經可以應付大部分情況了， 也無需擔心其他問題；
稍等： 吐槽下， 居然寬高基礎使用是必須設置具體的dp值的

但是我第一是使用Fresco，是需要做一個網格相冊，需要加載大量圖片，首先來的問題是滑動卡頓，再者是OOM內存溢出，
這麼強大的庫也能OOM?
都知道，多圖加載確實耗內存，可是，別的三方庫是OK的哇，什麼情況？一定是使用的姿勢不對。宮格顯示就是大圖顯示， 導致拖動都卡頓。
項目中是這樣設置的

<com.facebook.drawee.view.SimpleDraweeView        
        android:id="@+id/m_album_photo_view"
        android:layout_width="119.6dp"
        android:layout_height="119.6dp"
        fresco:actualImageScaleType="centerCrop"
        fresco:fadeDuration="200" />

雖然設置的縮放類型是centerCrop居中裁切，但是並沒有生效，原生ImageView的centerCrop居中裁切是將原始圖片(如3000*4000，5M的圖片)，在居中裁切ImageView的大小放在內存中顯示，並不是把整個圖片放在內存中。

這時候就想到了Fresco的三級緩存機制，第三級是文件緩存，第二級是Fresco偷android系統的緩存存放原始圖片，從第二級解碼得到顯示圖片的一級內存，就是視覺上看到的ImageView圖片都在一級內存

查閱官方文檔：https://www.fresco-cn.org/docs/resizing-rotating.html，發現需要縮放圖片，於是在顯示圖片之前，做了處理

    /**
     * 解碼前修改內存中的圖片大小
     * @param uri        文件的uri
     * @param draweeView 顯示的imageview
     */
    public  void showThumbNail(Uri uri, SimpleDraweeView draweeView){

        int width = ScreenUtils.dp2px(context,119);
        int height = ScreenUtils.dp2px(context,119);

        LogUtils.e("http",width+"_"+height);

        ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
        .setResizeOptions(new ResizeOptions(width, height)).build();

        DraweeController controller = Fresco.newDraweeControllerBuilder()
                .setImageRequest(request)
                .setOldController(draweeView.getController())
                .setControllerListener(new BaseControllerListener<ImageInfo>())
                .build();
        draweeView.setController(controller);
    }

運行試了試， 咦~ 滑動好順暢。。。難道就好了？Oh~No， 新問題出現了
圖片顯示不全 （具體表現爲顯示爲純白色，或純黑色）
遂查看官方文檔，真是細節問題。

人家文檔說的很清楚嘛，此方法 只支持JPG, 只支持JPG, 只支持JPG, ，內心
此時是崩潰的，心中想， 只支持JPG怎麼夠用，現在png的，webp的各種格式的怎麼辦…
往下順着看， 好吧， 哈哈， 請允許我竊喜，是的，官方提供了方法來支持更多格式：

Tip: 此處記得，不是setDownsampleEnabled(true)就可以了，還得調用之前的Resize方法，人家文檔也說的很明白了

好吧， 也許即使如此，有些人還不知如何設定這個屬性呢，其實很簡單哇，人家Configuration是可以定義的哇， 初始化的時候進行定義 ：

ImagePipelineConfig config = ImagePipelineConfig.newBuilder(this)     
     .setDownsampleEnabled(true)        
      .build();

Fresco.initialize(this, config);

這樣就OK了，運行很流暢，也沒有純白或者純黑了。

總結
學習一個新的項目，框架，開源庫的方法很重要，學習搜索相關資源，閱讀官方文檔，查閱別人博客，我覺得在工作中學習新東西還是需要時間，畢竟平時項目開發緊，沒有太多時間研究。以後學習新東西按一下步驟：1，看看別人博客，瞭解基本用法，2，查閱官方文檔，中文文檔，github，3，弄清楚原理，源碼，庫中的各個模塊是什麼關係