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

 更新时间:2024年04月08日 11:49:29   作者:_枫__  
这篇文章主要为大家详细介绍了Android实现IM多人员组合的群组头像,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

说明:

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

一、自定义整体头像的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);
 }

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

相关文章

  • Android SQLite数据库加密的操作方法

    Android SQLite数据库加密的操作方法

    因为Android自带的SQLite数据库本身是没有实现加密的,那我们如何实现对数据库的加密呢?今天通过本文给大家介绍下Android SQLite数据库加密的操作方法,一起看看吧
    2021-09-09
  • Kotlin中单例模式和Java的对比浅析

    Kotlin中单例模式和Java的对比浅析

    目前java中的单例模式有多种写法,kotlin中的写法更多一点,下面这篇文章主要给大家介绍了关于Kotlin中单例模式和Java对比的相关资料,会总结全部的到单例模式写法,需要的朋友可以参考下
    2018-07-07
  • Android基于widget组件实现物体移动/控件拖动功能示例

    Android基于widget组件实现物体移动/控件拖动功能示例

    这篇文章主要介绍了Android基于widget组件实现物体移动/控件拖动功能,结合实例形式分析了widget组件在桌面应用中的事件响应与属性动态操作相关实现技巧,需要的朋友可以参考下
    2016-10-10
  • Android使用自定义View实现饼状图的实例代码

    Android使用自定义View实现饼状图的实例代码

    这篇文章主要介绍了Android使用自定义View实现饼状图的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Android实现音乐播放进度条传递信息的两种方式(在service和activity中)

    Android实现音乐播放进度条传递信息的两种方式(在service和activity中)

    这篇文章主要介绍了Android:在service和activity之中,实现音乐播放进度条传递信息的两种方式,MediaPlayer做音乐播放器采坑以及解决办法,需要的朋友可以参考下
    2020-05-05
  • 解析后台进程对Android性能影响的详解

    解析后台进程对Android性能影响的详解

    本篇文章是对Android中后台进程对Android性能的影响进行了详细的分析介绍,需要的朋友参考下
    2013-05-05
  • android 设置闹钟及通知示例

    android 设置闹钟及通知示例

    本篇文章主要介绍了android 设置闹钟及通知示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • Android编程之Button控件用法实例分析

    Android编程之Button控件用法实例分析

    这篇文章主要介绍了Android编程之Button控件用法,较为详细的分析了Button控件的功能、定义及相关使用注意事项,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • Android 调试工具用法详细介绍

    Android 调试工具用法详细介绍

    本文主要介绍Android 调试工具,在Android应用开发的过程中肯定会用到Android 调试工具,这里整理了调试工具的使用方法,有需要的小伙伴可以参考下
    2016-08-08
  • Android Activity活动页面跳转与页面传值

    Android Activity活动页面跳转与页面传值

    大家好,本篇文章主要讲的是Android Activity活动页面跳转与页面传值,感兴趣的同学赶快来看一看吧,对你有帮助的话记得收藏一下,方便下次浏览
    2021-12-12

最新评论