欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android实现IM多人员组合的群组头像

程序员文章站 2024-02-07 09:28:16
说明: 此头像类似微信群组头像,整个头像由组内前n位人员的头像组合而成,可用网络或本地图片进行组合,最终显示为一个头像整体,看效果图: 一、自定义整体头像的view...

说明:

此头像类似微信群组头像,整个头像由组内前n位人员的头像组合而成,可用网络或本地图片进行组合,最终显示为一个头像整体,看效果图:

Android实现IM多人员组合的群组头像

一、自定义整体头像的viewgroup,计算并保存宽高(重写onmeasure):

@override
 protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
  mwidth = getwidth(widthmeasurespec);
  mheight = getheight(heightmeasurespec);
  setmeasureddimension(mwidth, mheight);
 }
 
 private int getwidth(int measurespec) {
  int width = min_width_and_height;
  int specmode = measurespec.getmode(measurespec);
  int specsize = measurespec.getsize(measurespec);
  if (specmode == measurespec.exactly) {
   width = specsize;
  } else if (specmode == measurespec.at_most) {
   width = math.min(min_width_and_height, specsize);
  }
  return width;
 }
 
 private int getheight(int measurespec) {
  int height = min_width_and_height;
  int specmode = measurespec.getmode(measurespec);
  int specsize = measurespec.getsize(measurespec);
  if (specmode == measurespec.exactly) {
   height = specsize;
  } else if (specmode == measurespec.at_most) {
   height = math.min(min_width_and_height, specsize);
  }
  return height;
 }

二、布局子头像的view(重写onlayout,对每个子头像进行布局):

@override
 protected void onlayout(boolean changed, int l, int t, int r, int b) {
  layoutchild();
 }
 
 private void layoutchild() {
  if (mimgurls == null || mimgurls.isempty()) {
   return;
  }
  for (int i = 0; i < mimgsize; i++) {
   imageview itemv = (imageview) getchildat(i);
   int left = 0, top = 0, right = 0, bottom = 0;
   /*
   对每个item的view计算left、top、right、bottom四个值
    */
   ...
   itemv.layout(left, top, right, bottom); //真正布局子头像位置
   showimage(itemv, mimgurls.get(i)); //加载并显示子头像图片
  }
 }

三、加载并显示各子头像(使用glide加载并显示每个子头像)

private void showimage(context context, imageview iv, string url) {
  if (textutils.isempty(url)) {
   bitmap bmp = bitmapfactory.decoderesource(context.getresources(), r.mipmap.user_default_icon);
   iv.setimagebitmap(bmp);
   return;
  }
  glide.with(context).load(url)
    .diskcachestrategy(diskcachestrategy.all)
    .dontanimate()
    .placeholder(r.mipmap.user_default_icon)
    .error(r.mipmap.user_default_icon)
    .into(iv);
 }

到此多图片组合头像已经完成,不过想要圈形的还需要进行以下步奏

四、裁剪整个群头像为圆形(重写dispatchdraw):

@override
 protected void dispatchdraw(canvas canvas) {
  path path = new path();
  path.addcircle(mwidth / 2, mheight / 2, mwidth / 2, path.direction.cw);
  canvas.clippath(path);
  canvas.drawcolor(color.transparent);
  super.dispatchdraw(canvas);
  drawgroupview(canvas);
 }
 
 /**
  * 绘制各头像间隔线
  * @param canvas
  */
 private void drawgroupview(canvas canvas) {
  /*
  计算各条线的x和y坐标值
   */
  float[] point1 = new float[2], point2 = new float[2];
  ...
  drawline(canvas, point1, point2);
 }
 
 /**
  * 绘制直线
  */
 private void drawline(canvas canvas, float[] point1, float[] point2) {
  mpaint.reset();
  mpaint.setantialias(true);
  mpaint.setstrokewidth(minterval);
  mpaint.setcolor(color.white);
  mpaint.setstyle(paint.style.stroke);
  canvas.drawline(point1[0], point1[1], point2[0], point2[1], mpaint);
 }

五、暴露公共方法供外部调用:

/**
  * 设置图片url集合
  *
  * @param imgs 图片url集合
  */
 public void setimages(list<string> imgs) {
  if (imgs == null || imgs.isempty()) {
   return;
  }
  if (imgs.size() > max_size) {
   imgs = imgs.sublist(0, max_size);
  }
  removeallviews();
  mimgurls = imgs;
  mimgsize = imgs.size();
  for (int i = 0; i < mimgsize; i++) {
   view v = getitemview(i);
   if (v == null) {
    return;
   }
   addview(v, generatedefaultlayoutparams());
  }
  requestlayout();
 }
 
 /**
  * 设置单个图片url
  *
  * @param img 图片url
  */
 public void setimageurl(string img) {
  arraylist imgurls = new arraylist<>();
  imgurls.add(img);
  setimages(imgurls);
 }
 
 /**
  * 生成一个头像布局
  */
 private imageview getitemview(int position) {
  ...
 }

六、使用:

1.写一个布局文件放自定义群组头像控件:

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f2f2f2"
    android:orientation="vertical">
 
 <com.yyh.im.ui.widget.headview
  android:id="@+id/cv_head"
  android:layout_width="150dp"
  android:layout_height="150dp"/>
 
</linearlayout>

2.代码中群组头像控件显示图片:

@bindview(r2.id.cv_head)
 public headview mheadcv;
 
 private string[] img_url_list = {
   "70cfv8sh_q1ynxgkpowk1hf6hhy/it/u=416954025,2289731303&fm=27&gp=0.jpg",
   "70cfuxsh_q1ynxgkpowk1hf6hhy/it/u=704997830,3098922597&fm=27&gp=0.jpg",
   "70cfvxsh_q1ynxgkpowk1hf6hhy/it/u=1375449509,557259337&fm=27&gp=0.jpg",
   "70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=2825392570,1862752263&fm=27&gp=0.jpg",
   "70cfvxsh_q1ynxgkpowk1hf6hhy/it/u=3252489351,440833245&fm=27&gp=0.jpg",
   "70cfuhsh_q1ynxgkpowk1hf6hhy/it/u=3586311245,3082636880&fm=27&gp=0.jpg"
 };
 
 private void showimage(){
  arraylist<string> list = new arraylist<>();
  for (int i = 0; i < 6; i++) {
   list.add(img_url_list[i]);
  }
  mheadcv.setimageurls(list);
 }

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