仿微信和QQ多圖合并架構實作

現在多數app裡面加入聊天已經是一個非常普遍的現象了，而微信和qq則是通訊領域的鼻祖了。如果産品經理在考慮做聊天設計的時候，多數會參考。

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

是以産品的要求是實作類似微信的群頭像。類似如下

仿微信和QQ多圖合并架構實作

作為程式員，首先會評估下工作量吧。在産品眼裡，就是把圖檔合成一起嘛，有啥難度嗎？是以工作時間決定了你能做成什麼樣吧

方案分析：

方案1、直接寫成布局，然後按照不同的布局加載不同張數的圖檔。而大家通用的圖檔加載方案都是異步加載的，這樣的話，加載的時候，會一閃一閃的合并成一張圖。由于現在的圖檔架構都有緩存，第二次會好很多。

優點：實作起來快

缺點：很low，不是一個有逼格程式員的做法，而且效果也不好。

方案2、自定義一個控件，還是通過異步的方式下載下傳所有圖檔。在控件裡面加一個計數器，確定所有圖檔下載下傳完成後，一起同步顯示出來。

優點：難度适中

缺點：擴充性差，哪天産品想換一個合成方案呢

方案3、還是使用原生的控件，對群圖像進行合并後生成一個新的圖像，原後進行緩存。将合并算法抽象成接口。

優點：易擴充，體驗更好

缺點：多花一些時間

當然啦，作為一個有夢想有逼格的程式員，我們應該考慮實作方案3，并且造福一些被産品折磨的程式猿同胞。

接下來，我來說一下主要思路和關鍵性代碼吧。其實整體上的思路說起來也比較簡單，可以用一幅流程圖來概括。

仿微信和QQ多圖合并架構實作

首先，我們知道，程式的輸入參數應該是一個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() <= ) {
            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() > ) {
                    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(), 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() == )
            return null;

        if (bitmaps.size() >= ) {
            bitmaps = bitmaps.subList(, );
        }


        Bitmap resultBitmap = null;
        int len = bitmaps.size();
        // 繪制資料，這裡記錄所有的繪制坐标。
        List<CombineBitmapEntity> combineBitmapEntities = CombineNineRect
                .generateCombineBitmapEntity(combineWidth, combineHeight, len);
        // 縮略圖
        List<Bitmap> thumbnailBitmaps = new ArrayList<Bitmap>();
        for (int i = ; 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 = ; 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, , , 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哦

仿微信和QQ多圖合并架構實作

方案分析：

繼續閱讀

與專家面對面：Android開發入門問與答

阿裡巴巴分布式服務架構 Dubbo 團隊成員梁飛專訪

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯