工作中需要实现仿钉钉群头像的一个功能,就是个人的头像拼到一起显示,看了一下市场上的APP好像微信的群聊头像是组合的,QQ的头像不是,别的好像也没有了。
给大家分享一下怎么实现的吧。首先我们先看一下效果图:
好了,下面说一下具体怎么实现的:
实现思路
很简单,本地图片需要我们从本地读取,如果是网络图片我们也可以根据URL来获取bitmap进行组合
具体实现过程
1.布局文件:
四个ImageView控件,用来显示图片不说了
2.获取Bitmap,设定图片的属性
/** * 获取图片数组实体 * @param count * @return */ private ListgetBitmapEntitys(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
3.创建压缩图片,这里我们用到了ThumbnailUtils中的extractThumbnail()方法,参数为bitmap,width,height
/** * 初始化数据 */ 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(ListmEntityList, Bitmap... bitmaps) { Bitmap newBitmap = Bitmap.createBitmap(200, 200, Bitmap.Config.ARGB_8888); for (int i = 0; i
这里我为了好看将图片设置成圆形的了
/** * 获取圆形的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组件,小编有时间的话会实现这个的。
最后再给大家看一下小编项目上实现的效果吧,没啥区别,只不多数据源不一样了,是从网络上获取的。
这里写图片描述:
以上就是本文的全部内容,希望对大家的学习有所帮助。