現在多數app裡面加入聊天已經是一個非常普遍的現象了，而微信和qq則是通訊領域的鼻祖了。如果產品經理在考慮做聊天設計的時候，多數會參考。
常常你會聽到，你看微信和qq都是這麼做的，你就這麼來吧，雖然心理有一萬個不痛快，但誰叫我們是有一個有追求的程式設計師呢。
所以產品的要求是實現類似微信的群頭像。類似如下
作為程式設計師，首先會評估下工作量吧。在產品眼裡，就是把圖片合成一起嘛，有啥難度嗎？所以工作時間決定了你能做成什麼樣吧
方案分析：
方案1、直接寫成佈局，然後按照不同的佈局載入不同張數的圖片。而大家通用的圖片載入方案都是非同步載入的，這樣的話，載入的時候，會一閃一閃的合併成一張圖。由於現在的圖片框架都有快取，第二次會好很多。
優點：實現起來快
缺點：很low，不是一個有逼格程式設計師的做法，而且效果也不好。
方案2、自定義一個控制元件，還是通過非同步的方式下載所有圖片。在控制元件裡面加一個計數器，確保所有圖片下載完成後，一起同步顯示出來。
優點：難度適中
缺點：擴充套件性差，哪天產品想換一個合成方案呢
方案3、還是使用原生的控制元件，對群影象進行合併後生成一個新的影象，原後進行快取。將合併演算法抽象成介面。
優點：易擴充套件，體驗更好
缺點：多花一些時間
當然啦，作為一個有夢想有逼格的程式設計師，我們應該考慮實現方案3，並且造福一些被產品折磨的程式猿同胞。
接下來，我來說一下主要思路和關鍵性程式碼吧。其實整體上的思路說起來也比較簡單，可以用一幅流程圖來概括。
首先，我們知道，程式的輸入引數應該是一個ImageView控制元件，一個urls列表。當然還有一個合併回撥函式，用於自定義合併方法。
public void displayImages(
final List<String> urls,
final ImageView imageView,
final MergeCallBack mergeCallBack
)複製程式碼按照思路，我們需要根據urls生成一個新key,用於快取合併後的影象，下次就可以直接從快取中載入。畢竟合併頭像是耗時操作
public String getNewUrlByList(List<String> urls, String mark) {
StringBuilder sb = new StringBuilder();
for (String url : urls) {
sb.append(url + mark);
}
return sb.toString();
}複製程式碼這裡只是一個簡單對所有的url進行了一個拼接，然後再md5.
快取處理才是最關鍵的步驟，這裡涉及到單個連結圖片的快取和合並圖的快取。對於快取系統來說，單張圖和多張圖是同樣對待的，都是一個key對應一個快取物件。只是key的規則稍有不同。
而快取方案也是通用的DiskLruCache和MemoryLruCache實現的二級快取，這樣可以保持快取的高效。（關於Lru演算法，就是簡單的Least Recently Used,即最近使用原則，具體不清楚請百度 ）
我們來看下displayImages的核心程式碼，就是先找記憶體快取，然後再找磁碟快取，如果都沒有，則再同步的找到所有的單張圖片
public void displayImages(final List<String> urls, final ImageView imageView, final MergeCallBack mergeCallBack, final int dstWidth, final int dstHeight) {
if (urls == null || urls.size() <= 0) {
throw new IllegalArgumentException("url不能為空");
}
if (mergeCallBack == null) {
throw new IllegalArgumentException("mergeCallBack 不能為空");
}
final String url = getNewUrlByList(urls, mergeCallBack.getMark());
imageView.setTag(IMG_URL, url);
//記憶體中載入
Bitmap bitmap = loadFromMemory(url);
if (bitmap != null) {
LogUtil.e(Tag, "displayImages this is from Memory");
imageView.setImageBitmap(bitmap);
return;
}
try {
//磁碟中載入
bitmap = loadFromDiskCache(url, dstWidth, dstHeight);
if (bitmap != null) {
LogUtil.e(Tag, "displayImages this is from Disk");
imageView.setImageBitmap(bitmap);
return;
}
} catch (Exception e) {
e.printStackTrace();
}
//設定一張預設圖
bitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.ic_launcher_round);
imageView.setImageBitmap(bitmap);
LogUtil.e(Tag, "displayImages this is from default");
//開啟一個新的執行緒，同步載入所有的圖片。如果載入成功，則返回。
Runnable loadBitmapTask = new Runnable() {
@Override
public void run() {
ArrayList<Bitmap> bitmaps = loadBitMaps(urls, dstWidth, dstHeight);
if (bitmaps != null && bitmaps.size() > 0) {
Result result;
if (mergeCallBack != null) {
Bitmap mergeBitmap = mergeCallBack.merge(bitmaps, mContext, imageView);
if (urls.size() == bitmaps.size()) {
//加入快取
try {
saveDru(url, mergeBitmap);
} catch (IOException e) {
e.printStackTrace();
}
} else {
LogUtil.e(Tag, "size change. so can not save");
}
LogUtil.e(Tag, "displayImages this is from Merge");
result = new Result(mergeBitmap, url, imageView);
} else {
result = new Result(bitmaps.get(0), url, imageView);
}
Message msg = mMainHandler.obtainMessage(MESSAGE_SEND_RESULT, result);
msg.sendToTarget();
}
}
};
threadPoolExecutor.execute(loadBitmapTask);
}複製程式碼如果從快取中載入失敗，我們會開啟一個執行緒，去執行頭像合併的操作。那頭像合併是同步操作，需要得到需要合併頭像的物件，那如何得到呢，我們繼續看程式碼
private ArrayList<Bitmap> loadBitMaps(List<String> urls, int dstWidth, int dstHeight) {
ArrayList<Bitmap> bitmaps = new ArrayList<>();
for (String url : urls) {
//同步獲得所有影象
Bitmap bitmap = loadBitMap(url, dstWidth, dstHeight);
if (bitmap != null) {
bitmaps.add(bitmap);
}
}
return bitmaps;
}複製程式碼顯示，影象是通過loadBitMap()函式返回，而這個函式的核心方法是
private Bitmap loadBitMap(String url, int dstWidth, int dstHeight) {
//記憶體
Bitmap bitmap = loadFromMemory(url);
if (bitmap != null) {
LogUtil.e(Tag, "this is from Memory");
return bitmap;
}
try {
//磁碟
bitmap = loadFromDiskCache(url, dstWidth, dstHeight);
if (bitmap != null) {
LogUtil.e(Tag, "this is from Disk");
return bitmap;
}
//網路
bitmap = loadFromNet(url, dstWidth, dstHeight);
LogUtil.e(Tag, "this is from Net");
if (bitmap == null) {
LogUtil.e(Tag, "bitmap null network error");
}
} catch (Exception e) {
e.printStackTrace();
}
return bitmap;
}複製程式碼可以清楚的看到，又返回了displayImages()方法的邏輯中，套用了同樣的快取思路。我們再回到loadBitmapTask這個執行緒的執行方法中，其中有一段重要的邏輯是
Bitmap mergeBitmap = mergeCallBack.merge(bitmaps, mContext, imageView);
if (urls.size() == bitmaps.size()) {
//加入快取
try {
saveDru(url, mergeBitmap);
} catch (IOException e) {
e.printStackTrace();
}
}複製程式碼這個mergeCallBack方法是使用者需要自己實現的影象合併方法，傳入一個列表的bitmap，然後返回一個合併圖物件，最後我們把這個合併再加入快取。下次就能直接從快取中找到了。
接下來的重點就是影象合併的技術了。我在程式碼裡面加入實現了微信和qq的群頭像，接下來就簡單講下微信合併的方案，QQ的合併方案，大家可以自己去看程式碼。
首先我們看下MergeCallBack的實現方法
@Override
public Bitmap merge(List<Bitmap> bitmapArray, Context context, ImageView imageView) {
this.context = context;
// 畫布的寬
ViewGroup.LayoutParams lp = imageView.getLayoutParams();
int tempWidth;
int tempHeight;
if (lp != null) {
tempWidth = dip2px(context, lp.width);
tempHeight = dip2px(context, lp.height);
} else {
//否則給一個預設的高度
tempWidth = dip2px(context, 70);
tempHeight = dip2px(context, 70);
}
return CombineBitmapTools.combimeBitmap(context, tempWidth, tempHeight,
bitmapArray);
}複製程式碼再看看combimeBitmap的實現
public static Bitmap combimeBitmap(Context context, int combineWidth,
int combineHeight, List<Bitmap> bitmaps) {
if (bitmaps == null || bitmaps.size() == 0)
return null;
if (bitmaps.size() >= 9) {
bitmaps = bitmaps.subList(0, 9);
}
Bitmap resultBitmap = null;
int len = bitmaps.size();
// 繪製資料，這裡記錄所有的繪製座標。
List<CombineBitmapEntity> combineBitmapEntities = CombineNineRect
.generateCombineBitmapEntity(combineWidth, combineHeight, len);
// 縮圖
List<Bitmap> thumbnailBitmaps = new ArrayList<Bitmap>();
for (int i = 0; i < len; i++) {
thumbnailBitmaps.add(ThumbnailUtils.extractThumbnail(bitmaps.get(i),
(int) combineBitmapEntities.get(i).width,
(int) combineBitmapEntities.get(i).height));
}
// 合成
resultBitmap = getCombineBitmaps(combineBitmapEntities,
thumbnailBitmaps, combineWidth, combineHeight);
return resultBitmap;
}
private static Bitmap getCombineBitmaps(
List<CombineBitmapEntity> mEntityList, List<Bitmap> bitmaps,
int width, int height) {
Bitmap newBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
for (int i = 0; i < mEntityList.size(); i++) {
//合併影象
newBitmap = mixtureBitmap(newBitmap, bitmaps.get(i), new PointF(
mEntityList.get(i).x, mEntityList.get(i).y));
}
return newBitmap;
}複製程式碼最後呼叫getCombineBitmaps合成影象，合成影象的關鍵就是通過Bitmap.createBitmap實現。
private static Bitmap mixtureBitmap(Bitmap first, Bitmap second,
PointF fromPoint) {
if (first == null || second == null || fromPoint == null) {
return null;
}
Bitmap newBitmap = Bitmap.createBitmap(first.getWidth(),
first.getHeight(), Bitmap.Config.ARGB_8888);
Canvas cv = new Canvas(newBitmap);
cv.drawBitmap(first, 0, 0, null);
cv.drawBitmap(second, fromPoint.x, fromPoint.y, null);
cv.save(Canvas.ALL_SAVE_FLAG);
cv.restore();
if (first != null) {
first.recycle();
first = null;
}
if (second != null) {
second.recycle();
second = null;
}
return newBitmap;
}複製程式碼所有關鍵邏輯已經備註到程式碼裡面了。
如果大家想看完整效果和完整程式碼，可以點選我的git地址MutiImgLoader。如果大家覺得有幫助，記得star哦