Android 高仿微信群聊頭像

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

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

好了，下面說一下具體怎麼實作的：

實作思路

1.首先擷取Bitmap圖檔（本地、網絡）

2.建立一個指定大小的縮略圖

3.組合Bitmap圖檔

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

具體實作過程

1.布局檔案：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:gravity="center"
    android:orientation="vertical"
    android:background="#987"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
    <TextView
        android:background="#fff"
        android:layout_width="match_parent"
        android:layout_height="1dp"/>
    <ImageView
        android:src="@drawable/j"
        android:id="@+id/iv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:background="#fff"
        android:layout_width="match_parent"
        android:layout_height="1dp"/>
    <ImageView
        android:src="@drawable/j"
        android:id="@+id/iv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:background="#fff"
        android:layout_width="match_parent"
        android:layout_height="1dp"/>
    <ImageView
        android:src="@drawable/j"
        android:id="@+id/iv3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:background="#fff"
        android:layout_width="match_parent"
        android:layout_height="1dp"/>
    <ImageView
        android:src="@drawable/j"
        android:id="@+id/iv4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:background="#fff"
        android:layout_width="match_parent"
        android:layout_height="1dp"/>

</LinearLayout>

四個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;
        }
    }

最後開畫

/**
     * 畫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

Android 高仿微信群聊頭像

實作思路

具體實作過程

繼續閱讀

Android網絡程式設計之使用HttpClient批量上傳檔案（一）1.預備知識：2.通過HttpCient上傳檔案程式運作效果圖：3.完成項目代碼：

Android網絡程式設計之使用HttpClient批量上傳檔案（二）AsyncTask+HttpClient并實作上傳進度監聽 Android網絡程式設計之使用HttpClient批量上傳檔案（二）AsyncTask+HttpClient并實作上傳進度監聽

android 使用shape自定義圓角矩形

Vue圖檔切換過渡設計

為什麼不再使用 Android MVVM

方法數超了65535 無法安裝的解決方案

android調用系統相機拍攝擷取照片的兩種方法

Android調用系統拍照擷取圖檔問題

測試工程師面試解析～

Android Studio中Make Project、Clean Project、Rebuild Project 的作用

新買的便攜式藍牙标簽列印機內建測試起因分析提供的SDK開始使用藍牙測試工具進行測試列印列印亂碼分析JAVA中Unicode轉ANCI工具連結

2018年不想被web前端開發淘汰，你需要掌握哪些技術？

Android面試題——5.常見面試官提問Android面試題①

Android常用工具類簡介目錄

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

Android電視機（機頂盒）初次開發的一些經驗分享