前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android仿微信群聊头像效果

Android仿微信群聊头像效果

作者头像
砸漏
发布2020-11-05 11:15:51
1.5K0
发布2020-11-05 11:15:51
举报
文章被收录于专栏:恩蓝脚本

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

主要实现:

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

代码语言:javascript
复制
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;
}
}

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

代码语言:javascript
复制
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文件,加上如下代码

代码语言:javascript
复制
<declare-styleable name="NineGridImageView" 
<attr format="dimension" name="imgGap"/ 
</declare-styleable 

三、用法

代码语言:javascript
复制
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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-09-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档