Android仿微信群聊头像效果

更新时间：2018年07月22日 11:19:51 作者：Loften_93663469

这篇文章主要为大家详细介绍了Android仿微信群聊头像效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

在网上找了些仿微信群聊头像的开源库后，发现没特别好用的，或者说满足我需求的，就只好在别人的基础上改了下，也就有了这样的自定义控件了，以此来实现微信群聊头像的效果，效果图如下所示：

主要实现：

一、自定义viewGroup，以此来实现主要的代码逻辑

public class NineGridImageView<T> extends ViewGroup{
 
 private int mRowCount; //行数
 private int mColumnCount; //列数
 
 private int mMaxSize = 9; //最大图片数
 private int mGap; //宫格间距
 
 private int parentWidth;//父组件宽
 private int parentHeight;//父组件高
 
 private List<ImageView> mImageViewList = new ArrayList<>();
 private List<T> mImgDataList;
 
 private NineGridImageViewAdapter<T> mAdapter;
 
 public NineGridImageView(Context context) {
  this(context,null);
 }
 
 public NineGridImageView(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }
 
 public NineGridImageView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.NineGridImageView);
  this.mGap = (int) typedArray.getDimension(R.styleable.NineGridImageView_imgGap, 8);
  typedArray.recycle();
 }
 
 /**
  * 设定宽高
  */
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  parentWidth = measureWidth(widthMeasureSpec);
  parentHeight = measureHeight(heightMeasureSpec);
 
  setMeasuredDimension(parentWidth,parentHeight);
 }
 
 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
  layoutChildrenView();
 }
 
 /**
  * 为子ImageView布局
  */
 private void layoutChildrenView(){
  if(mImgDataList == null){
   return;
  }
  int childrenCount = mImgDataList.size();
  for(int i = 0; i < childrenCount; i++){
   ImageView childrenView = (ImageView)getChildAt(i);
   if(mAdapter != null){
    mAdapter.onDisplayImage(getContext(), childrenView, mImgDataList.get(i));
   }
   int rowNum = i / mColumnCount;//当前行数
   int columnNum = i % mColumnCount;//当前列数
 
   int mImageSize = (parentWidth-(mColumnCount+1)*mGap)/mColumnCount;//图片尺寸
 
   int t_center = (parentHeight + mGap)/2;//中间位置以下的顶点（有宫格间距）
   int b_center = (parentHeight - mGap)/2;//中间位置以上的底部（有宫格间距）
   int l_center = (parentWidth + mGap)/2;//中间位置以右的左部（有宫格间距）
   int r_center = (parentWidth - mGap)/2;//中间位置以左的右部（有宫格间距）
   int center = (parentHeight - mImageSize)/2;//中间位置以上顶部（无宫格间距）
 
   int left = mImageSize * columnNum + mGap * (columnNum + 1);
   int top = mImageSize * rowNum + mGap * (rowNum + 1);
   int right = left + mImageSize;
   int bottom = top + mImageSize;
 
   /**
    * 不同子view情况下的不同显示
    */
   if(childrenCount == 1){
     childrenView.layout(left, top, right, bottom);
   }else if(childrenCount == 2){
     childrenView.layout(left, center, right, center + mImageSize);
   }else if(childrenCount == 3){
    if(i == 0){
     childrenView.layout(center, top, center+mImageSize, bottom);
    }else {
     childrenView.layout(mGap * i +mImageSize * (i - 1), t_center, mGap * i +mImageSize * i, t_center+mImageSize);
    }
   }else if(childrenCount == 4){
    childrenView.layout(left, top, right, bottom);
   }else if(childrenCount == 5){
    if(i == 0){
     childrenView.layout(r_center - mImageSize, r_center - mImageSize, r_center, r_center);
    }else if(i == 1){
     childrenView.layout(l_center , r_center - mImageSize, l_center + mImageSize, r_center);
    }else{
     childrenView.layout(mGap * (i - 1) + mImageSize * (i - 2),t_center,mGap * (i - 1) + mImageSize * (i - 1),t_center+mImageSize);
    }
   }else if(childrenCount == 6){
    if(i < 3) {
     childrenView.layout(mGap * (i + 1) +mImageSize * i, b_center - mImageSize, mGap * (i + 1) + mImageSize * (i+1), b_center);
    }else{
     childrenView.layout(mGap * (i - 2) + mImageSize * (i - 3),t_center,mGap * (i - 2) + mImageSize * (i - 2),t_center+mImageSize);
    }
   }else if(childrenCount == 7){
    if(i == 0){
     childrenView.layout(center,mGap,center+mImageSize,mGap+mImageSize);
    }else if(i > 0 && i < 4){
     childrenView.layout(mGap * i +mImageSize * (i - 1),center,mGap * i +mImageSize * i,center+mImageSize);
    }else{
     childrenView.layout(mGap * (i - 3) + mImageSize * (i - 4),t_center+mImageSize/2,mGap * (i - 3) + mImageSize * (i - 3),t_center+mImageSize/2+mImageSize);
    }
   }else if(childrenCount == 8){
    if(i == 0){
     childrenView.layout(r_center - mImageSize,mGap,r_center,mGap+mImageSize);
    }else if(i == 1){
     childrenView.layout(l_center,mGap,l_center+mImageSize,mGap+mImageSize);
    }else if(i > 1 && i < 5){
     childrenView.layout(mGap * (i - 1) +mImageSize * (i - 2), center, mGap * (i - 1) +mImageSize * (i - 1), center+mImageSize);
    }else{
     childrenView.layout(mGap * (i - 4) + mImageSize * (i - 5), t_center+mImageSize/2, mGap * (i - 4) + mImageSize * (i - 4), t_center+mImageSize/2+mImageSize);
    }
   }else if(childrenCount == 9){
    childrenView.layout(left, top, right, bottom);
   }
  }
 }
 
 /**
  * 设置图片数据
  *
  * @param lists 图片数据集合
  */
 public void setImagesData(List lists){
  if(lists == null || lists.isEmpty()){
   this.setVisibility(GONE);
   return;
  }else {
   this.setVisibility(VISIBLE);
  }
 
  if(mMaxSize > 0 && lists.size() > mMaxSize){
   lists = lists.subList(0, mMaxSize);
  }
 
  int[] gridParam = calculateGridParam(lists.size());
  mRowCount = gridParam[0];
  mColumnCount = gridParam[1];
  if(mImgDataList == null){
   int i = 0;
   while (i < lists.size()){
    ImageView iv = getImageView(i);
    if(iv == null){
     return;
    }
    addView(iv,generateDefaultLayoutParams());
    i++;
   }
  }else {
   int oldViewCount = mImgDataList.size();
   int newViewCount = lists.size();
   if(oldViewCount > newViewCount){
    removeViews(newViewCount, oldViewCount - newViewCount);
   }else if(oldViewCount < newViewCount){
    for(int i = oldViewCount; i < newViewCount; i++){
     ImageView iv = getImageView(i);
     if(iv == null){
      return;
     }
     addView(iv, generateDefaultLayoutParams());
    }
   }
  }
  mImgDataList = lists;
  requestLayout();
 }
 
 /**
  * 获得 ImageView
  * 保证了 ImageView的重用
  *
  * @param position 位置
  */
 private ImageView getImageView(final int position){
  if(position < mImageViewList.size()){
   return mImageViewList.get(position);
  }else{
   if(mAdapter != null){
    ImageView imageView = mAdapter.generateImageView(getContext());
    mImageViewList.add(imageView);
    return imageView;
   }else{
    Log.e("NineGirdImageView", "Your must set a NineGridImageViewAdapter for NineGirdImageView");
    return null;
   }
  }
 }
 
 /**
  * 设置宫格参数
  *
  * @param imagesSize 图片数量
  * @return 宫格参数 gridParam[0] 宫格行数 gridParam[1] 宫格列数
  */
 protected static int[] calculateGridParam(int imagesSize){
  int[] gridParam = new int[2];
  if(imagesSize < 3){
   gridParam[0] = 1;
   gridParam[1] = imagesSize;
  }else if(imagesSize <= 4){
   gridParam[0] = 2;
   gridParam[1] = 2;
  }else{
   gridParam[0] = imagesSize/3 + (imagesSize % 3 == 0?0:1);
   gridParam[1] = 3;
  }
  return gridParam;
 }
 
 /**
  * 设置适配器
  *
  * @param adapter 适配器
  */
 public void setAdapter(NineGridImageViewAdapter adapter){
  mAdapter = adapter;
 }
 
 /**
  * 设置宫格间距
  *
  * @param gap 宫格间距 px
  */
 public void setGap(int gap){
  mGap = gap;
 }
 
 /**
  * 对宫格的宽高进行重新定义
  */
 private int measureWidth(int measureSpec){
  int result = 0;
  int specMode = MeasureSpec.getMode(measureSpec);
  int specSize = MeasureSpec.getSize(measureSpec);
 
  if(specMode == MeasureSpec.EXACTLY){
   result = specSize;
  }else{
   result = 200;
   if(specMode == MeasureSpec.AT_MOST){
    result = Math.min(result,specSize);
   }
  }
  return result;
 }
 
 private int measureHeight(int measureSpec){
  int result = 0;
 
  int specMode = MeasureSpec.getMode(measureSpec);
  int specSize = MeasureSpec.getSize(measureSpec);
 
  if(specMode == MeasureSpec.EXACTLY){
   result = specSize;
  }else{
   result = 200;
   if(specMode == MeasureSpec.AT_MOST){
    result = Math.min(result,specSize);
   }
  }
  return result;
 }
}

二、你要显示你的网络图片所需要的代码

public abstract class NineGridImageViewAdapter<T> {
 protected abstract void onDisplayImage(Context context, ImageView imageView, T t);
 
 protected ImageView generateImageView(Context context){
  ImageView imageView = new ImageView(context);
  imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
  return imageView;
 }
 
 //这里可以添加你所需要的事件之类的方法
}

对了，别忘了配置间隔属性，记得添加attrs.xml文件，加上如下代码

<declare-styleable name="NineGridImageView">
  <attr format="dimension" name="imgGap"/>
 </declare-styleable>

三、用法

NineGridImageViewAdapter<String> mAdapter = new NineGridImageViewAdapter<String>() {
   @Override
   protected void onDisplayImage(Context context, ImageView imageView, String s) {
    Picasso.with(context).load(s).placeholder(R.mipmap.ic_holding).error(R.mipmap.ic_error).into(imageView);
   }
 
   @Override
   protected ImageView generateImageView(Context context) {
    return super.generateImageView(context);
   }
  };
  groudIcon1.setAdapter(mAdapter);
  groudIcon1.setImagesData(mPostList1);

四、总结

用适配器模式的方法给群聊头像加图片的方式是想可以在这里可以用不同方式来实现图片的加载方式，这里普及下适配器模式的知识，主要是把一个类的接口变换成客户端所期待的另一种接口，从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作，优点是更好的复用性和扩展性，缺点则是过多使用会使系统零乱，不易整体把握。好像有点偏题了，这里就附上：GroupIconSample源码地址

参考：NineGridImageView

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

您可能感兴趣的文章:

android实现搜索功能并将搜索结果保存到SQLite中(实例代码)
这篇文章主要介绍了android实现搜索功能并将搜索结果保存到SQLite中,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-04-04
RxJava2和Retrofit2封装教程（整洁、简单、实用）
这篇文章主要给大家介绍了关于RxJava2和Retrofit2封装的相关资料，文中通过示例代码介绍的非常详细，整洁、简单、实用，非常适合大家学习使用，需要的朋友可以参考下
2018-11-11
vscode通过wifi调试真机的Flutter应用的教程
这篇文章主要介绍了vscode通过wifi调试真机的Flutter应用的教程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-04-04
Android 路径查询具体实现
可以通过RasterMap的getDirection()方法来查询路径，和查询地址类似，路径查询的结果也是通过回调函数的方式来通知应用程序的，下面的例子返回南京到北京的路径
2013-10-10
Android自适应不同屏幕大小的全部方法
这篇文章主要介绍了Android自适应不同屏幕大小的全部方法，具有很好的参考价值，希望对大家有所帮助，一起跟随小编过来看看吧
2018-05-05
Android控件之EditView常用属性及应用方法
本篇文章介绍了，Android控件之EditView常用属性及应用方法。需要的朋友参考下
2013-04-04
Android开发之Picasso通过URL获取用户头像的圆形显示
这篇文章主要介绍了android开发之Picasso通过URL获取用户头像的圆形显示,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-06-06
Android开发中ProgressDialog简单用法示例
这篇文章主要介绍了Android开发中ProgressDialog简单用法,结合实例形式分析了Android使用ProgressDialog的进度条显示与关闭、更新等事件响应相关操作技巧,需要的朋友可以参考下
2017-10-10
超实用的android网络工具类
这篇文章主要为大家详细介绍了超实用的android网络工具类，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-04-04
Android 5.0 实现水波扩散效果
这篇文章主要为大家详细介绍了Android 5.0 实现水波扩散效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-01-01

Android仿微信群聊头像效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具