Android仿微信和QQ多图合并框架(类似群头像)的实现方法

前言

现在多数app里面加入聊天已经是一个非常普遍的现象了,而微信和qq则是通讯领域的鼻祖了。如果产品经理在考虑做聊天设计的时候,多数会参考。

常常你会听到,你看微信和qq都是这么做的,你就这么来吧,虽然心理有一万个不痛快,但谁叫我们是有一个有追求的程序员呢。

所以产品的要求是实现类似微信的群头像。

类似如下

作为程序员,首先会评估下工作量吧。在产品眼里,就是把图片合成一起嘛,有啥难度吗?所以工作时间决定了你能做成什么样吧

方案分析:

方案1、直接写成布局,然后按照不同的布局加载不同张数的图片。而大家通用的图片加载方案都是异步加载的,这样的话,加载的时候,会一闪一闪的合并成一张图。由于现在的图片框架都有缓存,第二次会好很多。

优点:实现起来快

缺点:很low,不是一个有逼格程序员的做法,而且效果也不好。

方案2、自定义一个控件,还是通过异步的方式下载所有图片。在控件里面加一个计数器,确保所有图片下载完成后,一起同步显示出来。

优点:难度适中

缺点:扩展性差,哪天产品想换一个合成方案呢

方案3、还是使用原生的控件,对群图像进行合并后生成一个新的图像,原后进行缓存。将合并算法抽象成接口。

优点:易扩展,体验更好

缺点:多花一些时间

当然啦,作为一个有梦想有逼格的程序员,我们应该考虑实现方案3,并且造福一些被产品折磨的程序猿同胞。

接下来,我来说一下主要思路和关键性代码吧。

实现思路

其实整体上的思路说起来也比较简单,可以用一幅流程图来概括。

实现方法

首先,我们知道,程序的输入参数应该是一个ImageView控件,一个urls列表。

ImageView图像视图,直接继承自View类,它的主要功能是用于显示图片,实际上它不仅仅可以用来显示图片,任何Drawable对象都可以使用ImageView来显示。ImageView可以适用于任何布局中,并且Android为其提供了缩放和着色的一些操作。

当然还有一个合并回调函数,用于自定义合并方法。

public void displayImages(
 final List<String> urls,
 final ImageView imageView,
 final MergeCallBack mergeCallBack
)

按照思路,我们需要根据urls生成一个新key,用于缓存合并后的图像,下次就可以直接从缓存中加载。毕竟合并头像是耗时操作

 public String getNewUrlByList(List<String> urls, String mark) {
 StringBuilder sb = new StringBuilder();
 for (String url : urls) {
  sb.append(url + mark);
 }
 return sb.toString();
 }

这里只是一个简单对所有的url进行了一个拼接,然后再md5.

缓存处理才是最关键的步骤,这里涉及到单个链接图片的缓存和合并图的缓存。对于缓存系统来说,单张图和多张图是同样对待的,都是一个key对应一个缓存对象。只是key的规则稍有不同。

而缓存方案也是通用的DiskLruCache和MemoryLruCache实现的二级缓存,这样可以保持缓存的高效。(关于Lru算法,就是简单的Least Recently Used,即最近使用原则,具体不清楚请百度 )

我们来看下displayImages的核心代码,就是先找内存缓存,然后再找磁盘缓存,如果都没有,则再同步的找到所有的单张图片

 public void displayImages(final List<String> urls, final ImageView imageView, final MergeCallBack mergeCallBack, final int dstWidth, final int dstHeight) {
 if (urls == null || urls.size() <= 0) {
  throw new IllegalArgumentException("url不能为空");
 }
 if (mergeCallBack == null) {
  throw new IllegalArgumentException("mergeCallBack 不能为空");
 }
 final String url = getNewUrlByList(urls, mergeCallBack.getMark());
 imageView.setTag(IMG_URL, url);
 //内存中加载
 Bitmap bitmap = loadFromMemory(url);
 if (bitmap != null) {
  LogUtil.e(Tag, "displayImages this is from Memory");
  imageView.setImageBitmap(bitmap);
  return;
 }
 try {
  //磁盘中加载
  bitmap = loadFromDiskCache(url, dstWidth, dstHeight);
  if (bitmap != null) {
  LogUtil.e(Tag, "displayImages this is from Disk");
  imageView.setImageBitmap(bitmap);
  return;
  }
 } catch (Exception e) {
  e.printStackTrace();
 }
 //设置一张默认图
 bitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.ic_launcher_round);
 imageView.setImageBitmap(bitmap);
 LogUtil.e(Tag, "displayImages this is from default");
 //开启一个新的线程,同步加载所有的图片。如果加载成功,则返回。
 Runnable loadBitmapTask = new Runnable() {
  @Override
  public void run() {
  ArrayList<Bitmap> bitmaps = loadBitMaps(urls, dstWidth, dstHeight);
  if (bitmaps != null && bitmaps.size() > 0) {
   Result result;
   if (mergeCallBack != null) {
   Bitmap mergeBitmap = mergeCallBack.merge(bitmaps, mContext, imageView);
   if (urls.size() == bitmaps.size()) {
    //加入缓存
    try {
    saveDru(url, mergeBitmap);
    } catch (IOException e) {
    e.printStackTrace();
    }
   } else {
    LogUtil.e(Tag, "size change. so can not save");
   }
   LogUtil.e(Tag, "displayImages this is from Merge");
   result = new Result(mergeBitmap, url, imageView);
   } else {
   result = new Result(bitmaps.get(0), url, imageView);
   }
   Message msg = mMainHandler.obtainMessage(MESSAGE_SEND_RESULT, result);
   msg.sendToTarget();
  }
  }
 };
 threadPoolExecutor.execute(loadBitmapTask);
 }

如果从缓存中加载失败,我们会开启一个线程,去执行头像合并的操作。那头像合并是同步操作,需要得到需要合并头像的对象,那如何得到呢,我们继续看代码

 private ArrayList<Bitmap> loadBitMaps(List<String> urls, int dstWidth, int dstHeight) {
 ArrayList<Bitmap> bitmaps = new ArrayList<>();
 for (String url : urls) {
  //同步获得所有图像
  Bitmap bitmap = loadBitMap(url, dstWidth, dstHeight);
  if (bitmap != null) {
  bitmaps.add(bitmap);
  }
 }
 return bitmaps;
 }

显示,图像是通过loadBitMap()函数返回,而这个函数的核心方法是

 private Bitmap loadBitMap(String url, int dstWidth, int dstHeight) {
 //内存
 Bitmap bitmap = loadFromMemory(url);
 if (bitmap != null) {
  LogUtil.e(Tag, "this is from Memory");
  return bitmap;
 }
 try {
  //磁盘
  bitmap = loadFromDiskCache(url, dstWidth, dstHeight);
  if (bitmap != null) {
  LogUtil.e(Tag, "this is from Disk");
  return bitmap;
  }
  //网络
  bitmap = loadFromNet(url, dstWidth, dstHeight);
  LogUtil.e(Tag, "this is from Net");
  if (bitmap == null) {
  LogUtil.e(Tag, "bitmap null network error");
  }
 } catch (Exception e) {
  e.printStackTrace();
 }
 return bitmap;
 }

可以清楚的看到,又返回了displayImages()方法的逻辑中,套用了同样的缓存思路。我们再回到loadBitmapTask这个线程的执行方法中,其中有一段重要的逻辑是

Bitmap mergeBitmap = mergeCallBack.merge(bitmaps, mContext, imageView);
if (urls.size() == bitmaps.size()) {
 //加入缓存
 try {
  saveDru(url, mergeBitmap);
 } catch (IOException e) {
  e.printStackTrace();
 }
} 

这个mergeCallBack方法是用户需要自己实现的图像合并方法,传入一个列表的bitmap,然后返回一个合并图对象,最后我们把这个合并再加入缓存。下次就能直接从缓存中找到了。

接下来的重点就是图像合并的技术了。我在代码里面加入实现了微信和qq的群头像,接下来就简单讲下微信合并的方案,QQ的合并方案,大家可以自己去看代码。

首先我们看下MergeCallBack的实现方法

@Override
public Bitmap merge(List<Bitmap> bitmapArray, Context context, ImageView imageView) {
 this.context = context;
 // 画布的宽
 ViewGroup.LayoutParams lp = imageView.getLayoutParams();
 int tempWidth;
 int tempHeight;
 if (lp != null) {
 tempWidth = dip2px(context, lp.width);
 tempHeight = dip2px(context, lp.height);
 } else {
 //否则给一个默认的高度
 tempWidth = dip2px(context, 70);
 tempHeight = dip2px(context, 70);
 }
 return CombineBitmapTools.combimeBitmap(context, tempWidth, tempHeight,
  bitmapArray);
}

再看看combimeBitmap的实现

 public static Bitmap combimeBitmap(Context context, int combineWidth,
     int combineHeight, List<Bitmap> bitmaps) {
 if (bitmaps == null || bitmaps.size() == 0)
  return null;

 if (bitmaps.size() >= 9) {
  bitmaps = bitmaps.subList(0, 9);
 }
 Bitmap resultBitmap = null;
 int len = bitmaps.size();
 // 绘制数据,这里记录所有的绘制坐标。
 List<CombineBitmapEntity> combineBitmapEntities = CombineNineRect
  .generateCombineBitmapEntity(combineWidth, combineHeight, len);
 // 缩略图
 List<Bitmap> thumbnailBitmaps = new ArrayList<Bitmap>();
 for (int i = 0; i < len; i++) {
  thumbnailBitmaps.add(ThumbnailUtils.extractThumbnail(bitmaps.get(i),
   (int) combineBitmapEntities.get(i).width,
   (int) combineBitmapEntities.get(i).height));
 }
 // 合成
 resultBitmap = getCombineBitmaps(combineBitmapEntities,
  thumbnailBitmaps, combineWidth, combineHeight);

 return resultBitmap;
 }
 private static Bitmap getCombineBitmaps(
  List<CombineBitmapEntity> mEntityList, List<Bitmap> bitmaps,
  int width, int height) {
 Bitmap newBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
 for (int i = 0; i < mEntityList.size(); i++) {
  //合并图像
  newBitmap = mixtureBitmap(newBitmap, bitmaps.get(i), new PointF(
   mEntityList.get(i).x, mEntityList.get(i).y));
 }
 return newBitmap;
 }

最后调用getCombineBitmaps合成图像,合成图像的关键就是通过Bitmap.createBitmap实现。

 private 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();
 if (first != null) {
  first.recycle();
  first = null;
 }
 if (second != null) {
  second.recycle();
  second = null;
 }
 return newBitmap;
 }

所有关键逻辑已经备注到代码里面了。

如果大家想看完整效果和完整代码,可以点击这里:MutiImgLoader,当然,通过本地下载也可以。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

您可能感兴趣的文章:

  • Android仿微信群聊头像
  • Android仿微信微博多图展示效果
  • Android实现朋友圈多图显示功能
  • android实现多图文分享朋友圈功能
(0)

相关推荐

  • Android仿微信群聊头像

    工作中需要实现仿钉钉群头像的一个功能,就是个人的头像拼到一起显示,看了一下市场上的APP好像微信的群聊头像是组合的,QQ的头像不是,别的好像也没有了. 给大家分享一下怎么实现的吧.首先我们先看一下效果图: 好了,下面说一下具体怎么实现的: 实现思路 1.首先获取Bitmap图片(本地.网络) 2.创建一个指定大小的缩略图 3.组合Bitmap图片 很简单,本地图片需要我们从本地读取,如果是网络图片我们也可以根据URL来获取bitmap进行组合 具体实现过程 1.布局文件: <LinearLayo

  • android实现多图文分享朋友圈功能

    很多安卓程序员都在寻找如何调用系统分享可以实现朋友圈多图加文字分享的功能,小编经过测试入坑后,为你整理以下内容: private void shareMultiplePictureToTimeLine(File... files) { Intent intent = new Intent(); ComponentName comp = new ComponentName("com.tencent.mm", "com.tencent.mm.ui.tools.ShareToTim

  • Android仿微信微博多图展示效果

    1.简介 这是一个用于实现像微信朋友圈和微博的类似的九宫格图片展示控件,通过自定义viewgroup实现,使用方便. 多图根据屏幕适配,单张图片时需要自己指定图片的宽高: 2.使用方法 引用: compile 'com.w4lle.library:NineLayout:1.0.0' 使用: 在项目的layout文件中添加如下xml即可加入到布局文件 <com.w4lle.library.NineGridlayout android:layout_marginTop="8dp" a

  • Android实现朋友圈多图显示功能

    本文实例为大家分享了Android实现朋友圈多图显示的具体代码,供大家参考,具体内容如下 Android实现朋友圈评论回复列表 Android实现朋友圈点赞列表 Android实现朋友圈多图显示功能 正文 先看一下效果图: MultiImageView: public class MultiImageView extends LinearLayout { public static int MAX_WIDTH = 0; // 照片的Url列表 private List<String> imag

  • Android仿微信和QQ多图合并框架(类似群头像)的实现方法

    前言 现在多数app里面加入聊天已经是一个非常普遍的现象了,而微信和qq则是通讯领域的鼻祖了.如果产品经理在考虑做聊天设计的时候,多数会参考. 常常你会听到,你看微信和qq都是这么做的,你就这么来吧,虽然心理有一万个不痛快,但谁叫我们是有一个有追求的程序员呢. 所以产品的要求是实现类似微信的群头像. 类似如下 作为程序员,首先会评估下工作量吧.在产品眼里,就是把图片合成一起嘛,有啥难度吗?所以工作时间决定了你能做成什么样吧 方案分析: 方案1.直接写成布局,然后按照不同的布局加载不同张数的图片.

  • Android仿微信、qq点击右上角加号弹出操作框

    Android仿微信.qq点击右上角加号弹出操作框,先上图,类似于下图这种,点击加号,会弹出一个对话框,如下图: 微信: 自己实现: 接下来,我们来实现此功能: 其实,实现原理就是,点击"+"号,弹出一个PopupWindow. 1.写一个用于展示在ToolBar中的 menu文件,如下: <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http:

  • Android仿微信、QQ附近好友雷达扫描效果

    1.概述 最近一直到在带实习生,因为人比较多,所以很长一段时间没有更新博客了,今天更新一篇雷达扫描附近好友效果,以后尽量每周更新一篇,先看一下效果: 2.实现 1.效果分析 效果分为两个部分,一个是上半部分的自定义RadarView,还有就是下半部分的ViewPager,至于怎么做到缩放和背景虚化的效果大家可以去看看LazyViewPager这里不详细介绍,这里主要实现扫描效果部分. 2.扫描效果实现 2.1自定义RadarView在onDraw()方法中画六个圆圈,至于圆圈的半径是多少我们需要

  • Android仿微信滑动弹出编辑、删除菜单效果、增加下拉刷新功能

    如何为不同的list item呈现不同的菜单,本文实例就为大家介绍了Android仿微信或QQ滑动弹出编辑.删除菜单效果.增加下拉刷新等功能的实现,分享给大家供大家参考,具体内容如下 效果图: 1. 下载开源项目,并将其中的liberary导入到自己的项目中: 2. 使用SwipeMenuListView代替ListView,在页面中布局: <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/swipeRefresh

  • Android仿微信QQ设置图形头像裁剪功能

    最近在做毕业设计,想有一个功能和QQ一样可以裁剪头像并设置圆形头像,额,这是设计狮的一种潮流. 而纵观现在主流的APP,只要有用户系统这个功能,这个需求一般都是在(bu)劫(de)难(bu)逃(xue)! 图片裁剪实现方式有两种,一种是利用系统自带的裁剪工具,一种是使用开源工具Cropper.本节就为大家带来如何使用系统自带的裁剪工具进行图片裁剪~ 还是先来个简单的运行图. 额,简单说下,我待会会把代码写成小demo分享给大家,在文章末尾会附上github链接,需要的可以自行下载~ 下面来简单分

  • Android仿微信QQ聊天顶起输入法不顶起标题栏的问题

    在这记录一下输入法弹出的一系列问题,有的输入法弹出就把整个布局弹上去,有的输入法弹出布局不会有变化,有的输入法弹出遮盖输入框等等问题,网上也有很多说加着加那的,但是看一下都不是很完整,解决不了所有问题,我在这归纳一下大家拿去用吧! *****先看看做好的效果图***** 一:AndroidManifest.xml里面对应的activity设置 android:windowSoftInputMode="adjustResize" 二:在activity的xml根布局设置 android:

  • Android仿微信发表说说实现拍照、多图上传功能

    本文实例为大家分享了Android仿微信发表说说.心情功能,供大家参考,具体内容如下 既能实现拍照,选图库,多图案上传的案例,目前好多App都有类似微信朋友圈的功能,能过发表说说等附带图片上传.下面的就是实现该功能的过程:大家还没有看过Android Retrofit 2.0框架上传图片解决方案这篇文章,在看今天的就很容易,接在本项目中用到了一个library:photopicker,封装了图片的选择功能,是否选相机,还有选中图片后可以查看图片的功能.  一. 首先:将photopicker到工

  • Android 仿微信图像拍摄和选择界面功能(代码分享)

    插件运行后的画面如下: 下面这张图对图像进行筛选,根据照片产生的源头分(QQ和微信和相机) 点击某文件夹后,可以查看该文件夹下包含的所有的图片 图片选择界面 选中后就跳到已经选择界面的窗口,并且可以对该吃图片上传进行简要的描述 首先我想说明的是这个插件默认是不进行图片筛选的,打开app后会有几十个文件夹,但是个人认为开发中常用的图片基本都来自于QQ中拍摄的照片,微信中拍摄的照片,以及相机直接拍摄的照片,因此我对这个插件进行过滤以及文件夹名称的更改,具体做法,主要是对AlbumHelper类bui

  • Android仿微信图片点击全屏效果

    废话不多说,先看下效果: 先是微信的 再是模仿的 先说下实现原理,再一步步分析 这里总共有2个Activity一个就是主页,一个就是显示我们图片效果的页面,参数通过Intent传送,素材内容均来自网络,(感谢聪明的蘑菇) 图片都是Glide异步下的,下的,下的重要的事情说三次,然后就是用动画做放大操作然后显示出来了(并没有做下载原图的实现,反正也是一样 下载下来Set上去而且动画都不需要更简便). OK,我们来看分析下 obj,目录下分别创建了2个对象,一个用来使用来处理显示页面的图片尺寸信息以

  • Android仿微信二维码和条形码

    本文实例为大家分享了Android仿微信二维码和条形码的具体代码,供大家参考,具体内容如下 package your.QRCode.namespace; import java.io.File; import java.io.FileOutputStream; import java.util.HashMap; import java.util.Map; import com.google.zxing.BarcodeFormat; import com.google.zxing.EncodeHi

随机推荐