Android實現(xiàn)IM多人員組合的群組頭像
說明:
此頭像類似微信群組頭像,整個頭像由組內(nèi)前N位人員的頭像組合而成,可用網(wǎng)絡(luò)或本地圖片進(jì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,對每個子頭像進(jìn)行布局):
@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);
}
到此多圖片組合頭像已經(jīng)完成,不過想要圈形的還需要進(jìn)行以下步奏
四、裁剪整個群頭像為圓形(重寫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坐標(biāo)值
*/
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);
}
五、暴露公共方法供外部調(diào)用:
/**
* 設(shè)置圖片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();
}
/**
* 設(shè)置單個圖片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);
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android實現(xiàn)本地上傳圖片并設(shè)置為圓形頭像
- Android使用CircleImageView實現(xiàn)圓形頭像的方法
- Android根據(jù)電話號碼獲得聯(lián)系人頭像實例代碼
- Android實現(xiàn)用戶頭像更換操作
- Android實現(xiàn)從本地圖庫/相機(jī)拍照后裁剪圖片并設(shè)置頭像
- Android手機(jī)拍照或選取圖庫圖片作為頭像
- Android一行代碼實現(xiàn)圓形頭像
- Android實現(xiàn)調(diào)用系統(tǒng)圖庫與相機(jī)設(shè)置頭像并保存在本地及服務(wù)器
- Android實現(xiàn)個人資料頁面頭像背景模糊顯示包(狀態(tài)欄)
- Android頭像上傳功能的實現(xiàn)代碼(獲取頭像加剪切)
相關(guān)文章
Android編程實現(xiàn)Dialog窗體監(jiān)聽的方法
這篇文章主要介紹了Android編程實現(xiàn)Dialog窗體監(jiān)聽的方法,結(jié)合實例形式分析了Android針對Dialog對話框窗體事件監(jiān)聽與響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
Android?Canva實現(xiàn)漸變進(jìn)度條
這篇文章主要為大家介紹了Android?Canva實現(xiàn)漸變進(jìn)度條示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06
Android開發(fā)中RecyclerView模仿探探左右滑動布局功能
本文給大家分享android開發(fā)中RecyclerView模仿探探左右滑動布局功能,非常不錯,具有參考借鑒價值,需要的朋友參考下2017-01-01
Android 實現(xiàn)徹底退出自己APP 并殺掉所有相關(guān)的進(jìn)程
這篇文章主要介紹了Android 實現(xiàn)徹底退出自己APP 并殺掉所有相關(guān)的進(jìn)程,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
Android開發(fā)實現(xiàn)TextView超鏈接5種方式源碼實例
這篇文章主要介紹了Android開發(fā)實現(xiàn)TextView超鏈接5種方式源碼實例,需要的朋友可以參考下2020-03-03
Android自定義控件實現(xiàn)icon+文字的多種效果
這篇文章主要為大家詳細(xì)介紹了Android自定義控件實現(xiàn)icon+文字的多種效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01
Android 退出應(yīng)用程序的實現(xiàn)方法
這篇文章主要介紹了Android 退出應(yīng)用程序的實現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2017-04-04

