效能優化 (五) 長圖優化,仿微博載入長圖方式

DevYK發表於2019-05-25

效能優化系列

APP 啟動優化

UI 繪製優化

記憶體優化

圖片壓縮

長圖優化

電量優化

Dex 加解密

動態替換 Application

APP 穩定性之熱修復原理探索

APP 持續執行之程式保活實現

ProGuard 對程式碼和資源壓縮

APK 極限壓縮

長圖優化

現在市面上 95 % 以上,APP 都有預覽圖片的功能,那麼是怎麼做的勒,今天我們就來仿照 微博 預覽長圖,來對長圖優化。

怎麼使用

程式碼傳送陣

  1. project/build.gradle

    	allprojects {
    		repositories {
    			...
    			maven { url 'https://jitpack.io' }
    		}
    	}
    複製程式碼
  2. app/build.gradle

    dependencies {
    	        implementation 'com.github.yangkun19921001:long_picture_view:1.0.2'
    	}
    複製程式碼
  3. xml 中直接使用

     <com.yk.big_picture_library.BigView
            android:id="@+id/bv_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
     />
    複製程式碼
  4. 程式碼中

     BigView bigView=findViewById(R.id.bv_img);
     //載入路徑
     bigView.setImage(BIG_IMAGE_PAHT);
     //載入 InputStream
     bigView.setImage(InputStream is)
     //載入網路圖片 callBack : 載入中的回撥
     bigView.setNetUrl(String url,LoadNetImageCallBack callBack);
    複製程式碼

效果對比

微博長圖效果

效能優化 (五) 長圖優化,仿微博載入長圖方式

仿照微博預覽長圖效果

效能優化 (五) 長圖優化,仿微博載入長圖方式

效果是不是很絲滑,原圖是 12 M 壓縮後不到 2 M ,載入前可以壓縮下,我用的是我自己的另一個圖片壓縮開源專案利用哈夫曼演算法對圖片壓縮。

記憶體使用狀態

效能優化 (五) 長圖優化,仿微博載入長圖方式

記憶體無洩漏,無抖動,無溢位 。這裡在提一下如果對記憶體優化不瞭解的可以看下效能優化(三)...

Java 堆記憶體: 5 - 6 M 之間

Native 佔用記憶體: 25 M 左右

解決思路

效能優化 (五) 長圖優化,仿微博載入長圖方式

粗略步驟:

  1. 沿著對角線縮放
  2. 載入螢幕能夠看見的區域
  3. 複用上一個 bitmap 區域的記憶體
  4. 處理滑動

詳細步驟

  1. 定義 Rect 圖片需要載入的區域
  2. 定義圖片複用 BitmapFactory.Options()
  3. 定義手勢識別 GestureDetector 上下左右滑動的幫助類
  4. 定義一個滑動幫組類 Scroller
  5. 載入圖片資訊並不是載入真正的圖片
  6. 開啟記憶體複用功能
  7. 建立一個區域解碼器,只解碼一部分。
  8. 重新整理 requestLayout
  9. 確定載入圖片的區域,計算縮放比列
  10. onDraw 繪製區域圖片
  11. 將圖片區域縮放得到 View 的大小
  12. drawBitmap 繪製圖片
  13. 處理滑動事件交給手勢處理
  14. 隨著手指滑動改變現實區域 Rect,判斷頭部底部界限
  15. invalidate 不斷重繪
  16. onFling , computeScroll 處理慣性問題
  17. invalidate 不斷重繪

相關文章