Android仿微信群聊头像

工作中需要实现仿钉钉群头像的一个功能，就是个人的头像拼到一起显示，看了一下市场上的APP好像微信的群聊头像是组合的，QQ的头像不是，别的好像也没有了。

给大家分享一下怎么实现的吧。首先我们先看一下效果图：

好了，下面说一下具体怎么实现的：

实现思路

• 1.首先获取Bitmap图片（本地、网络）
• 2.创建一个指定大小的缩略图
• 3.组合Bitmap图片

很简单，本地图片需要我们从本地读取，如果是网络图片我们也可以根据URL来获取bitmap进行组合

具体实现过程

1.布局文件：

四个ImageView控件，用来显示图片不说了

2.获取Bitmap，设定图片的属性

  private List getBitmapEntitys(int count) {
    List 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

  private void initData(){
    
    bitmapBeans1 = getBitmapEntitys(1);
    bitmapBeans2 = getBitmapEntitys(2);
    bitmapBeans3 = getBitmapEntitys(3);
    bitmapBeans4 = getBitmapEntitys(4);
    
    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画到一起）

  public static Bitmap getCombineBitmaps(List 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;
  }

这里我为了好看将图片设置成圆形的了

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

最后开画

 
  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组件，小编有时间的话会实现这个的。
最后再给大家看一下小编项目上实现的效果吧，没啥区别，只不多数据源不一样了，是从网络上获取的。

这里写图片描述：

以上就是本文的全部内容，希望对大家的学习有所帮助。