Android仿微信和QQ多圖合并框架（類似群頭像）的實(shí)現(xiàn)方法

更新時(shí)間：2017年12月11日 14:08:49 作者：jyb_96

這篇文章主要給大家介紹了關(guān)于Android仿微信和QQ多圖合并框架的相關(guān)資料，其實(shí)就是我們平時(shí)所見的群聊頭像，文中通過示例代碼介紹的非常詳細(xì)，對(duì)各位Android開發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

現(xiàn)在多數(shù)app里面加入聊天已經(jīng)是一個(gè)非常普遍的現(xiàn)象了，而微信和qq則是通訊領(lǐng)域的鼻祖了。如果產(chǎn)品經(jīng)理在考慮做聊天設(shè)計(jì)的時(shí)候，多數(shù)會(huì)參考。

常常你會(huì)聽到，你看微信和qq都是這么做的，你就這么來吧，雖然心理有一萬個(gè)不痛快，但誰叫我們是有一個(gè)有追求的程序員呢。

所以產(chǎn)品的要求是實(shí)現(xiàn)類似微信的群頭像。

類似如下

作為程序員，首先會(huì)評(píng)估下工作量吧。在產(chǎn)品眼里，就是把圖片合成一起嘛，有啥難度嗎？所以工作時(shí)間決定了你能做成什么樣吧

方案分析：

方案1、直接寫成布局，然后按照不同的布局加載不同張數(shù)的圖片。而大家通用的圖片加載方案都是異步加載的，這樣的話，加載的時(shí)候，會(huì)一閃一閃的合并成一張圖。由于現(xiàn)在的圖片框架都有緩存，第二次會(huì)好很多。

優(yōu)點(diǎn)：實(shí)現(xiàn)起來快

缺點(diǎn)：很low，不是一個(gè)有逼格程序員的做法，而且效果也不好。

方案2、自定義一個(gè)控件，還是通過異步的方式下載所有圖片。在控件里面加一個(gè)計(jì)數(shù)器，確保所有圖片下載完成后，一起同步顯示出來。

優(yōu)點(diǎn)：難度適中

缺點(diǎn)：擴(kuò)展性差，哪天產(chǎn)品想換一個(gè)合成方案呢

方案3、還是使用原生的控件，對(duì)群圖像進(jìn)行合并后生成一個(gè)新的圖像，原后進(jìn)行緩存。將合并算法抽象成接口。

優(yōu)點(diǎn)：易擴(kuò)展，體驗(yàn)更好

缺點(diǎn)：多花一些時(shí)間

當(dāng)然啦，作為一個(gè)有夢(mèng)想有逼格的程序員，我們應(yīng)該考慮實(shí)現(xiàn)方案3，并且造福一些被產(chǎn)品折磨的程序猿同胞。

接下來，我來說一下主要思路和關(guān)鍵性代碼吧。

實(shí)現(xiàn)思路

其實(shí)整體上的思路說起來也比較簡(jiǎn)單，可以用一幅流程圖來概括。

實(shí)現(xiàn)方法

首先，我們知道，程序的輸入?yún)?shù)應(yīng)該是一個(gè)ImageView控件，一個(gè)urls列表。

ImageView圖像視圖，直接繼承自View類，它的主要功能是用于顯示圖片，實(shí)際上它不僅僅可以用來顯示圖片，任何Drawable對(duì)象都可以使用ImageView來顯示。ImageView可以適用于任何布局中，并且Android為其提供了縮放和著色的一些操作。

當(dāng)然還有一個(gè)合并回調(diào)函數(shù)，用于自定義合并方法。

public void displayImages(
 final List<String> urls,
 final ImageView imageView, 
 final MergeCallBack mergeCallBack
)

按照思路，我們需要根據(jù)urls生成一個(gè)新key,用于緩存合并后的圖像，下次就可以直接從緩存中加載。畢竟合并頭像是耗時(shí)操作

 public String getNewUrlByList(List<String> urls, String mark) {
 StringBuilder sb = new StringBuilder();
 for (String url : urls) {
  sb.append(url + mark);
 }
 return sb.toString();
 }

這里只是一個(gè)簡(jiǎn)單對(duì)所有的url進(jìn)行了一個(gè)拼接，然后再md5.

緩存處理才是最關(guān)鍵的步驟，這里涉及到單個(gè)鏈接圖片的緩存和合并圖的緩存。對(duì)于緩存系統(tǒng)來說，單張圖和多張圖是同樣對(duì)待的，都是一個(gè)key對(duì)應(yīng)一個(gè)緩存對(duì)象。只是key的規(guī)則稍有不同。

而緩存方案也是通用的DiskLruCache和MemoryLruCache實(shí)現(xiàn)的二級(jí)緩存，這樣可以保持緩存的高效。（關(guān)于Lru算法，就是簡(jiǎn)單的Least Recently Used,即最近使用原則，具體不清楚請(qǐng)百度）

我們來看下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è)置一張默認(rèn)圖
 bitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.ic_launcher_round);
 imageView.setImageBitmap(bitmap);
 LogUtil.e(Tag, "displayImages this is from default");
 //開啟一個(gè)新的線程，同步加載所有的圖片。如果加載成功，則返回。
 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);
 }

如果從緩存中加載失敗，我們會(huì)開啟一個(gè)線程，去執(zhí)行頭像合并的操作。那頭像合并是同步操作，需要得到需要合并頭像的對(duì)象，那如何得到呢，我們繼續(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ù)返回，而這個(gè)函數(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()方法的邏輯中，套用了同樣的緩存思路。我們?cè)倩氐絣oadBitmapTask這個(gè)線程的執(zhí)行方法中，其中有一段重要的邏輯是

Bitmap mergeBitmap = mergeCallBack.merge(bitmaps, mContext, imageView);
if (urls.size() == bitmaps.size()) {
 //加入緩存
 try {
  saveDru(url, mergeBitmap);
 } catch (IOException e) {
  e.printStackTrace();
 }
}

這個(gè)mergeCallBack方法是用戶需要自己實(shí)現(xiàn)的圖像合并方法，傳入一個(gè)列表的bitmap，然后返回一個(gè)合并圖對(duì)象，最后我們把這個(gè)合并再加入緩存。下次就能直接從緩存中找到了。

接下來的重點(diǎn)就是圖像合并的技術(shù)了。我在代碼里面加入實(shí)現(xiàn)了微信和qq的群頭像，接下來就簡(jiǎn)單講下微信合并的方案，QQ的合并方案，大家可以自己去看代碼。

首先我們看下MergeCallBack的實(shí)現(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 {
 //否則給一個(gè)默認(rèn)的高度
 tempWidth = dip2px(context, 70);
 tempHeight = dip2px(context, 70);
 }
 return CombineBitmapTools.combimeBitmap(context, tempWidth, tempHeight,
  bitmapArray);
}

再看看combimeBitmap的實(shí)現(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ù)，這里記錄所有的繪制坐標(biāo)。
 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實(shí)現(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)備注到代碼里面了。

如果大家想看完整效果和完整代碼，可以點(diǎn)擊這里：MutiImgLoader，當(dāng)然，通過本地下載也可以。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: