Android仿微信,QQ群頭像合成
原文地址:https://www.jb51.net/article/130296.htm
效果圖:
作為程式設計師,首先會評估下工作量吧。在產品眼裡,就是把圖片合成一起嘛,有啥難度嗎?所以工作時間決定了你能做成什麼樣吧
方案分析:
方案1、直接寫成佈局,然後按照不同的佈局載入不同張數的圖片。而大家通用的圖片載入方案都是非同步載入的,這樣的話,載入的時候,會一閃一閃的合併成一張圖。由於現在的圖片框架都有快取,第二次會好很多。
優點:實現起來快
缺點:很low,不是一個有逼格程式設計師的做法,而且效果也不好。
方案2、自定義一個控制元件,還是通過非同步的方式下載所有圖片。在控制元件裡面加一個計數器,確保所有圖片下載完成後,一起同步顯示出來。
優點:難度適中
缺點:擴充套件性差,哪天產品想換一個合成方案呢
方案3、還是使用原生的控制元件,對群影象進行合併後生成一個新的影象,原後進行快取。將合併演算法抽象成介面。
優點:易擴充套件,體驗更好
缺點:多花一些時間
當然啦,作為一個有夢想有逼格的程式設計師,我們應該考慮實現方案3,並且造福一些被產品折磨的程式猿同胞。
接下來,我來說一下主要思路和關鍵性程式碼吧。
實現思路
其實整體上的思路說起來也比較簡單,可以用一幅流程圖來概括。
實現方法
首先,我們知道,程式的輸入引數應該是一個ImageView控制元件,一個urls列表。
ImageView影象檢視,直接繼承自View類,它的主要功能是用於顯示圖片,實際上它不僅僅可以用來顯示圖片,任何Drawable物件都可以使用ImageView來顯示。ImageView可以適用於任何佈局中,並且Android為其提供了縮放和著色的一些操作。
當然還有一個合併回撥函式,用於自定義合併方法。
1 2 3 4 5 |
|
按照思路,我們需要根據urls生成一個新key,用於快取合併後的影象,下次就可以直接從快取中載入。畢竟合併頭像是耗時操作
1 2 3 4 5 6 7 |
|
這裡只是一個簡單對所有的url進行了一個拼接,然後再md5.
快取處理才是最關鍵的步驟,這裡涉及到單個連結圖片的快取和合並圖的快取。對於快取系統來說,單張圖和多張圖是同樣對待的,都是一個key對應一個快取物件。只是key的規則稍有不同。
而快取方案也是通用的DiskLruCache和MemoryLruCache實現的二級快取,這樣可以保持快取的高效。(關於Lru演算法,就是簡單的Least Recently Used,即最近使用原則,具體不清楚請百度 )
我們來看下displayImages的核心程式碼,就是先找記憶體快取,然後再找磁碟快取,如果都沒有,則再同步的找到所有的單張圖片
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
|
如果從快取中載入失敗,我們會開啟一個執行緒,去執行頭像合併的操作。那頭像合併是同步操作,需要得到需要合併頭像的物件,那如何得到呢,我們繼續看程式碼
1 2 3 4 5 6 7 8 9 10 11 |
|
顯示,影象是通過loadBitMap()函式返回,而這個函式的核心方法是
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
可以清楚的看到,又返回了displayImages()方法的邏輯中,套用了同樣的快取思路。我們再回到loadBitmapTask這個執行緒的執行方法中,其中有一段重要的邏輯是
1 2 3 4 5 6 7 8 9 |
|
這個mergeCallBack方法是使用者需要自己實現的影象合併方法,傳入一個列表的bitmap,然後返回一個合併圖物件,最後我們把這個合併再加入快取。下次就能直接從快取中找到了。
接下來的重點就是影象合併的技術了。我在程式碼裡面加入實現了微信和qq的群頭像,接下來就簡單講下微信合併的方案,QQ的合併方案,大家可以自己去看程式碼。
首先我們看下MergeCallBack的實現方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
再看看combimeBitmap的實現
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
|
最後呼叫getCombineBitmaps合成影象,合成影象的關鍵就是通過Bitmap.createBitmap實現。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
所有關鍵邏輯已經備註到程式碼裡面了。
如果大家想看完整效果和完整程式碼,可以點選這裡:MutiImgLoader,當然,通過本地下載也可以。