現(xiàn)在多數(shù)app里面加入聊天已經(jīng)是一個非常普遍的現(xiàn)象了，而微信和qq則是通訊領(lǐng)域的鼻祖了。如果產(chǎn)品經(jīng)理在考慮做聊天設(shè)計的時候，多數(shù)會參考。
常常你會聽到，你看微信和qq都是這么做的，你就這么來吧，雖然心理有一萬個不痛快，但誰叫我們是有一個有追求的程序員呢。
所以產(chǎn)品的要求是實現(xiàn)類似微信的群頭像。類似如下
作為程序員，首先會評估下工作量吧。在產(chǎn)品眼里，就是把圖片合成一起嘛，有啥難度嗎？所以工作時間決定了你能做成什么樣吧
方案分析：
方案1、直接寫成布局，然后按照不同的布局加載不同張數(shù)的圖片。而大家通用的圖片加載方案都是異步加載的，這樣的話，加載的時候，會一閃一閃的合并成一張圖。由于現(xiàn)在的圖片框架都有緩存，第二次會好很多。
優(yōu)點：實現(xiàn)起來快
缺點：很low，不是一個有逼格程序員的做法，而且效果也不好。
方案2、自定義一個控件，還是通過異步的方式下載所有圖片。在控件里面加一個計數(shù)器，確保所有圖片下載完成后，一起同步顯示出來。
優(yōu)點：難度適中
缺點：擴展性差，哪天產(chǎn)品想換一個合成方案呢
方案3、還是使用原生的控件，對群圖像進行合并后生成一個新的圖像，原后進行緩存。將合并算法抽象成接口。
優(yōu)點：易擴展，體驗更好
缺點：多花一些時間
當然啦，作為一個有夢想有逼格的程序員，我們應(yīng)該考慮實現(xiàn)方案3，并且造福一些被產(chǎn)品折磨的程序猿同胞。
接下來，我來說一下主要思路和關(guān)鍵性代碼吧。其實整體上的思路說起來也比較簡單，可以用一幅流程圖來概括。
首先，我們知道，程序的輸入?yún)?shù)應(yīng)該是一個ImageView控件，一個urls列表。當然還有一個合并回調(diào)函數(shù)，用于自定義合并方法。
public void displayImages(
final List<String> urls,
final ImageView imageView,
final MergeCallBack mergeCallBack
)
按照思路，我們需要根據(jù)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.
緩存處理才是最關(guān)鍵的步驟，這里涉及到單個鏈接圖片的緩存和合并圖的緩存。對于緩存系統(tǒng)來說，單張圖和多張圖是同樣對待的，都是一個key對應(yīng)一個緩存對象。只是key的規(guī)則稍有不同。
而緩存方案也是通用的DiskLruCache和MemoryLruCache實現(xiàn)的二級緩存，這樣可以保持緩存的高效。（關(guān)于Lru算法，就是簡單的Least Recently Used,即最近使用原則，具體不清楚請百度 ）
我們來看下displayImages的核心代碼，就是先找內(nèi)存緩存，然后再找磁盤緩存，如果都沒有，則再同步的找到所有的單張圖片
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);
//內(nèi)存中加載
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();
}
//設(shè)置一張默認圖
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);
}
如果從緩存中加載失敗，我們會開啟一個線程，去執(zhí)行頭像合并的操作。那頭像合并是同步操作，需要得到需要合并頭像的對象，那如何得到呢，我們繼續(xù)看代碼
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()函數(shù)返回，而這個函數(shù)的核心方法是
private Bitmap loadBitMap(String url, int dstWidth, int dstHeight) {
//內(nèi)存
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;
}
//網(wǎng)絡(luò)
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這個線程的執(zhí)行方法中，其中有一段重要的邏輯是
Bitmap mergeBitmap = mergeCallBack.merge(bitmaps, mContext, imageView);
if (urls.size() == bitmaps.size()) {
//加入緩存
try {
saveDru(url, mergeBitmap);
} catch (IOException e) {
e.printStackTrace();
}
}
這個mergeCallBack方法是用戶需要自己實現(xiàn)的圖像合并方法，傳入一個列表的bitmap，然后返回一個合并圖對象，最后我們把這個合并再加入緩存。下次就能直接從緩存中找到了。
接下來的重點就是圖像合并的技術(shù)了。我在代碼里面加入實現(xiàn)了微信和qq的群頭像，接下來就簡單講下微信合并的方案，QQ的合并方案，大家可以自己去看代碼。
首先我們看下MergeCallBack的實現(xiàn)方法
@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的實現(xiàn)
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();
// 繪制數(shù)據(jù)，這里記錄所有的繪制坐標。
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;
}
最后調(diào)用getCombineBitmaps合成圖像，合成圖像的關(guān)鍵就是通過Bitmap.createBitmap實現(xiàn)。
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;
}
所有關(guān)鍵邏輯已經(jīng)備注到代碼里面了。
如果大家想看完整效果和完整代碼，可以點擊我的git地址MutiImgLoader。如果大家覺得有幫助，記得star哦
