Android 高仿微信群聊頭像

kuku0074 8年前發布 | 26K 次閱讀 Android開發移動開發

來自： http://blog.csdn.net//lyhhj/article/details/49935345

最近小編搞了一個仿微信群聊頭像的一個功能，分享給大家...

工作中需要實現仿釘釘群頭像的一個功能，就是個人的頭像拼到一起顯示，看了一下市場上的APP好像微信的群聊頭像是組合的，QQ的頭像不是，別的好像也沒有了。今天給大家分享一下怎么實現的吧。首先我們先看一下效果圖：

這里寫圖片描述

好了，下面說一下具體怎么實現的：

實現思路

1.首先獲取Bitmap圖片（本地、網絡）
2.創建一個指定大小的縮略圖
3.組合Bitmap圖片

很簡單，本地圖片需要我們從本地讀取，如果是網絡圖片我們也可以根據URL來獲取bitmap進行組合

具體實現過程

1.布局文件：

<LinearLayout xmlns:android="
</LinearLayout></pre> 
四個ImageView控件，用來顯示圖片不說了

2.獲取Bitmap，設定圖片的屬性

/** * 獲取圖片數組實體 * by Hankkin at:2015-11-19 22:00:55 * @param count * @return */
    private List<BitmapBean> getBitmapEntitys(int count) {
        List<BitmapBean> mList = new ArrayList<>();
        String value = PropertiesUtil.readData(this, String.valueOf(count),
                R.raw.data);
        String[] arr1 = value.split(";");
        int length = arr1.length;
        for (int i = 0; i < length; i++) {
            String content = arr1[i];
            String[] arr2 = content.split(",");
            BitmapBean entity = null;
            for (int j = 0; j < arr2.length; j++) {
                entity = new BitmapBean();
                entity.setX(Float.valueOf(arr2[0]));
                entity.setY(Float.valueOf(arr2[1]));
                entity.setWidth(Float.valueOf(arr2[2]));
                entity.setHeight(Float.valueOf(arr2[3]));
            }
            mList.add(entity);
        }
        return mList;
    }
 3.創建壓縮圖片，這里我們用到了ThumbnailUtils中的extractThumbnail（）方法，參數為bitmap，width，height

/** * 初始化數據 * by Hankkin at:2015-11-19 21:59:03 */
    private void initData(){
        /*獲取四個圖片數組*/
        bitmapBeans1 = getBitmapEntitys(1);
        bitmapBeans2 = getBitmapEntitys(2);
        bitmapBeans3 = getBitmapEntitys(3);
        bitmapBeans4 = getBitmapEntitys(4);
        /*bitmap縮略圖*/
        Bitmap[] bitmaps1 = {
                ThumbnailUtils.extractThumbnail(BitmapUtils.getScaleBitmap(
                getResources(), R.drawable.j), (int) bitmapBeans1
                .get(0).getWidth(), (int) bitmapBeans1.get(0).getWidth())};
        Bitmap[] bitmaps2 = {
                ThumbnailUtils.extractThumbnail(BitmapUtils.getScaleBitmap(
                getResources(), R.drawable.j), (int) bitmapBeans2
                .get(0).getWidth(), (int) bitmapBeans2.get(0).getWidth()),
                ThumbnailUtils.extractThumbnail(BitmapUtils.getScaleBitmap(
                getResources(), R.drawable.j), (int) bitmapBeans2
                .get(0).getWidth(), (int) bitmapBeans2.get(0).getWidth())};
        Bitmap[] bitmaps3 = {
                ThumbnailUtils.extractThumbnail(BitmapUtils.getScaleBitmap(
                getResources(), R.drawable.j), (int) bitmapBeans3
                .get(0).getWidth(), (int) bitmapBeans3.get(0).getWidth()),
                ThumbnailUtils.extractThumbnail(BitmapUtils.getScaleBitmap(
                getResources(), R.drawable.j), (int) bitmapBeans3
                .get(0).getWidth(), (int) bitmapBeans3.get(0).getWidth()),
                ThumbnailUtils.extractThumbnail(BitmapUtils.getScaleBitmap(
                        getResources(), R.drawable.j), (int) bitmapBeans3
                        .get(0).getWidth(), (int) bitmapBeans3.get(0).getWidth())};
        Bitmap[] bitmaps4 = {
                ThumbnailUtils.extractThumbnail(BitmapUtils.getScaleBitmap(
                        getResources(), R.drawable.j), (int) bitmapBeans4
                        .get(0).getWidth(), (int) bitmapBeans4.get(0).getWidth()),
                ThumbnailUtils.extractThumbnail(BitmapUtils.getScaleBitmap(
                        getResources(), R.drawable.j), (int) bitmapBeans4
                        .get(0).getWidth(), (int) bitmapBeans4.get(0).getWidth()),
                ThumbnailUtils.extractThumbnail(BitmapUtils.getScaleBitmap(
                        getResources(), R.drawable.j), (int) bitmapBeans4
                        .get(0).getWidth(), (int) bitmapBeans4.get(0).getWidth()),
                ThumbnailUtils.extractThumbnail(BitmapUtils.getScaleBitmap(
                        getResources(), R.drawable.j), (int) bitmapBeans4
                        .get(0).getWidth(), (int) bitmapBeans4.get(0).getWidth())};
 }
 4.組合bitmap圖片（也就是將我們的圖片用Canvas畫到一起）

/** * 獲得合在一起的bitmap * @param mEntityList * @param bitmaps * @return */
    public static Bitmap getCombineBitmaps(List<BitmapBean> mEntityList,
                                           Bitmap... bitmaps) {
        Bitmap newBitmap = Bitmap.createBitmap(200, 200, Bitmap.Config.ARGB_8888);
        for (int i = 0; i < mEntityList.size(); i++) {
            bitmaps[i] = GetRoundedCornerBitmap(bitmaps[i]);
            newBitmap = mixtureBitmap(newBitmap, bitmaps[i], new PointF(
                    mEntityList.get(i).getX(), mEntityList.get(i).getY()));
        }
        return newBitmap;
    }
 這里我為了好看將圖片設置成圓形的了

/*  獲取圓形的bitmap  @param bitmap  @return */
    public static Bitmap GetRoundedCornerBitmap(Bitmap bitmap) {
        try {
            Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
                    bitmap.getHeight(), Bitmap.Config.ARGB_8888);
            Canvas canvas = new Canvas(output);
            final Paint paint = new Paint();
            final Rect rect = new Rect(0, 0, bitmap.getWidth(),
                    bitmap.getHeight());
            final RectF rectF = new RectF(new Rect(0, 0, bitmap.getWidth(),
                    bitmap.getHeight()));
            final float roundPx = 50;
            paint.setAntiAlias(true);
            canvas.drawARGB(0, 0, 0, 0);
            paint.setColor(Color.BLACK);
            canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

        final Rect src = new Rect(0, 0, bitmap.getWidth(),
                bitmap.getHeight());

        canvas.drawBitmap(bitmap, src, rect, paint);
        return output;
    } catch (Exception e) {
        return bitmap;
    }
}</pre> <p>最后開畫</p>

 /** * 畫bitmap * @param first * @param second * @param fromPoint * @return */
    public 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();
        return newBitmap;
    }
 這樣就簡單的實現了微信群聊頭像的效果，當然需要對圖片做一些處理，已防止OOM，你也可以將它自定義成一個View組件，小編有時間的話會實現這個的。 

最后再給大家看一下小編項目上實現的效果吧，沒啥區別，只不多數據源不一樣了，是從網絡上獲取的。

小編已經把代碼上傳導github上了，求大家star啊 

https://github.com/Hankkin/WeixinGroupIconDemo


</div>

本文由用戶 kuku0074 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1454412681558.html

Android開發移動開發

Android 高仿微信群聊頭像

實現思路

具體實現過程

相關經驗

相關資訊

相關文檔

目錄