Android 高仿微信群聊头像

原创 2015年11月19日 22:53:40
最近小编搞了一个仿微信群聊头像的一个功能,分享给大家...

工作中需要实现仿钉钉群头像的一个功能,就是个人的头像拼到一起显示,看了一下市场上的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

这里写图片描述

版权声明:本文为博主原创文章,转载请标明出处。

仿微信自定义圆形群聊组合头像

  • 2016年06月02日 10:37
  • 1.97MB
  • 下载

android 群组头像的显示(仿QQ群组)

先上效果图:      实现步骤:  1.  下载  Android-circular-avatar.jar ;      下载链接  2. 在布局文...
  • u013749540
  • u013749540
  • 2017年03月15日 17:18
  • 611

自定义View-仿微信群组头像

效果图:已经上传到github:源码地址只是初步完成了,后续还会有一些修改,也会在博客更新,模拟器比较操蛋,看着有些卡package smt.weixingroupchat;import androi...
  • Android_Ku_Ku
  • Android_Ku_Ku
  • 2016年08月19日 11:44
  • 1068

Android学习之仿QQ讨论组和微信群聊头像

GroupView一、前言最近做东西的时候要用到qq讨论组群头像的功能,网上找了下,发现别人的并不是特别的好用,效果并不是和qq这个很像,或者是使用gridView,(NineGridImageVie...
  • whitley_gong
  • whitley_gong
  • 2016年03月21日 19:56
  • 3793

Android学习之仿QQ讨论组和微信群聊头像

GroupView一、前言最近做东西的时候要用到qq讨论组群头像的功能,网上找了下,发现别人的并不是特别的好用,效果并不是和qq这个很像,或者是使用gridView,(NineGridImageVie...
  • whitley_gong
  • whitley_gong
  • 2016年03月21日 19:56
  • 3793

Android 仿微信群聊头像

在网上找了些仿微信群聊头像的开源库后,发现没特别好用的,或者说满足我需求的,就只好在别人的基础上改了下,也就有了这样的自定义控件了,以此来实现微信群聊头像的效果,效果图如下所示: 主要实现:...
  • Loften_93663469
  • Loften_93663469
  • 2016年04月23日 18:38
  • 4982

Android 仿QQ讨论组头像

一、效果图 二、实现 基本实现过程: 1.将原图片读取为bitmap 2.在Canvas画布上计算出图片位置,并绘制新的图片。 (ps:计算位置对我来说是难点,花了好长时间); 三、源码 1.布局...
  • Lo_ser
  • Lo_ser
  • 2016年12月17日 12:16
  • 1103

Android学习之仿QQ讨论组和微信群聊头像

这是自己总结的,希望对你们有帮助   1:先看效果                                                          ...
  • CSDN_dlt
  • CSDN_dlt
  • 2017年07月12日 21:22
  • 395

高仿微信发起群聊联系人选人UI

  • 2017年04月20日 14:45
  • 25.61MB
  • 下载

高仿微信发起群聊添加联系人界面

微信中发起群聊页面,每点击一个item(联系人),左上角就会添加上相应的联系人,再次点击就会取消选中,点击上面已选中的联系人也会取消选中,而且上面的联系人展示中会慢慢挤压右边的搜索框,直到右边有一定的...
  • dhl_1986
  • dhl_1986
  • 2017年04月20日 14:52
  • 327
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 高仿微信群聊头像
举报原因:
原因补充:

(最多只允许输入30个字)