Android仿微信群聊头像

软件编程 Android 分类:[default] 更新日期: 2016-07-01
这篇文章主要为大家介绍了Android仿微信群聊头像的相关资料,感兴趣的小伙伴们可以参考一下

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

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

Android仿微信群聊头像

好了,下面说一下具体怎么实现的:

实现思路

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

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

具体实现过程

1.布局文件:

<LinearLayout xmlns:andro
  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:
    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:
    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:
    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:
    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,设定图片的属性

/**
   * 获取图片数组实体
   * @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

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

这里写图片描述:

Android仿微信群聊头像

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


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • PHP微信开发之查询微信精选文章
    这篇文章主要为大家详细介绍了PHP微信开发之简单实现查询微信精选文章的相关资料,感兴趣的小伙伴们可以参考一下查询微信里的一些精选的,点击量比较大的文章. 别忘记申请apikey(登录百度账号即可获取),要完成的功能是: 1.用户回复"文章",公众号要返回文章分类的编号(比如9.科技). 2.用户回复wz9,1,腾讯     则能返回科技类 ...
  • PHP微信开发之查询城市天气
    PHP微信开发之查询城市天气
    这篇文章主要为大家详细介绍了PHP微信开发之简单实现查询城市天气的相关资料,感兴趣的小伙伴们可以参考一下PHP微信查询城市天气,首先,你需要找到一个获取天气的API,此处,我用的是百度的apistore,申请和使用API的网址:http://apistore.baidu.com/apiworks/servicedetail/112.html  登录百度账号, ...
  • PHP微信开发之有道翻译
    这篇文章主要为大家详细介绍了PHP微信开发之简单实现有道翻译的相关资料,感兴趣的小伙伴们可以参考一下首先,你需要去有道翻译API官网去申请key:http://fanyi.youdao.com/openapi?path=data-mode得到key之后,就可以开始从该API获得查询的数据了(返回json还是XML,看个人喜好,这里我用的是json) 下面我直 ...
  • PHP微信开发之文本自动回复
    PHP微信开发之文本自动回复
    这篇文章主要为大家详细介绍了PHP微信开发之简单实现文本自动回复的相关资料,感兴趣的小伙伴们可以参考一下首先,先去微信公众平台注册一个账号(注册要填的东西挺多的),注册好之后,登录进去.可以看到左侧的"开发者中心",开启开发者中心前好像还要你完善一些资料,按照步骤完善即可.进入开发者中心之后,先去编辑 修改配置,修改配置的时候,注意: U ...
  • php微信开发之批量生成带参数的二维码
    php微信开发之批量生成带参数的二维码
    这篇文章主要介绍了php微信开发之批量生成带参数的二维码 的相关资料,需要的朋友可以参考下带参数的二维码对于渠道营销推广来说是很有用的,可以获得多个带不同场景值的二维码,用户扫描后,公众号可以接收到事件推送,可喜的是微信开通了这个接口,那下面就来研究一下吧. 具体接口说明请参见,微信公众平台开发者文档(http://mp.weixin.qq.com/wiki ...
  • CSS3实现动态翻牌效果仿百度贴吧3D翻牌一次动画特效
    CSS3实现动态翻牌效果仿百度贴吧3D翻牌一次动画特效
    本文主要分享一个利用CSS3新特性transform,实现3D翻牌的特效,有需要的小伙伴可以参考下.今天分享一个CSS3制作的翻牌效果,效果如下图所示,所过把把这个效果应用于相册肯定会很炫的.呵呵,超酷啊. 一.HTML代码: 因为是CSS3实现,所以大家可以看到没有任何的JS代码.ul为一组图片,每个li中有个a(因为我们希望可以跳转),a中包含两个div ...
猜你喜欢