工作中需要实现仿钉钉群头像的一个功能，就是个人的头像拼到一起显示，看了一下市场上的app好像微信的群聊头像是组合的，qq的头像不是，别的好像也没有了。
给大家分享一下怎么实现的吧。首先我们先看一下效果图：
好了，下面说一下具体怎么实现的：
实现思路
- 1.首先获取bitmap图片（本地、网络）
- 2.创建一个指定大小的缩略图
- 3.组合bitmap图片
很简单，本地图片需要我们从本地读取，如果是网络图片我们也可以根据url来获取bitmap进行组合
具体实现过程
1.布局文件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingleft="@dimen/activity_horizontal_margin"
android:paddingright="@dimen/activity_horizontal_margin"
android:paddingtop="@dimen/activity_vertical_margin"
android:gravity="center"
android:orientation="vertical"
android:background="#987"
android:paddingbottom="@dimen/activity_vertical_margin" tools:context=".mainactivity">
<textview
android:background="#fff"
android:layout_width="match_parent"
android:layout_height="1dp"/>
<imageview
android:src="@drawable/j"
android:id="@+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<textview
android:background="#fff"
android:layout_width="match_parent"
android:layout_height="1dp"/>
<imageview
android:src="@drawable/j"
android:id="@+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<textview
android:background="#fff"
android:layout_width="match_parent"
android:layout_height="1dp"/>
<imageview
android:src="@drawable/j"
android:id="@+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<textview
android:background="#fff"
android:layout_width="match_parent"
android:layout_height="1dp"/>
<imageview
android:src="@drawable/j"
android:id="@+id/iv4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<textview
android:background="#fff"
android:layout_width="match_parent"
android:layout_height="1dp"/>
</linearlayout>
|
四个imageview控件，用来显示图片不说了
2.获取bitmap，设定图片的属性
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
/**
* 获取图片数组实体
* @param count
* @return
*/
private list<bitmapbean> getbitmapentitys(int count) {
list<bitmapbean> mlist = new arraylist<>();
string value = propertiesutil.readdata(this, string.valueof(count),
r.raw.data);
string[] arr1 = value.split(";");
int length = arr1.length;
for (int i = 0; i < length; i++) {
string content = arr1[i];
string[] arr2 = content.split(",");
bitmapbean entity = null;
for (int j = 0; j < arr2.length; j++) {
entity = new bitmapbean();
entity.setx(float.valueof(arr2[0]));
entity.sety(float.valueof(arr2[1]));
entity.setwidth(float.valueof(arr2[2]));
entity.setheight(float.valueof(arr2[3]));
}
mlist.add(entity);
}
return mlist;
}
|
3.创建压缩图片，这里我们用到了thumbnailutils中的extractthumbnail（）方法，参数为bitmap，width，height
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
/**
* 初始化数据
*/
private void initdata(){
/*获取四个图片数组*/
bitmapbeans1 = getbitmapentitys(1);
bitmapbeans2 = getbitmapentitys(2);
bitmapbeans3 = getbitmapentitys(3);
bitmapbeans4 = getbitmapentitys(4);
/*bitmap缩略图*/
bitmap[] bitmaps1 = {
thumbnailutils.extractthumbnail(bitmaputils.getscalebitmap(
getresources(), r.drawable.j), (int) bitmapbeans1
.get(0).getwidth(), (int) bitmapbeans1.get(0).getwidth())};
bitmap[] bitmaps2 = {
thumbnailutils.extractthumbnail(bitmaputils.getscalebitmap(
getresources(), r.drawable.j), (int) bitmapbeans2
.get(0).getwidth(), (int) bitmapbeans2.get(0).getwidth()),
thumbnailutils.extractthumbnail(bitmaputils.getscalebitmap(
getresources(), r.drawable.j), (int) bitmapbeans2
.get(0).getwidth(), (int) bitmapbeans2.get(0).getwidth())};
bitmap[] bitmaps3 = {
thumbnailutils.extractthumbnail(bitmaputils.getscalebitmap(
getresources(), r.drawable.j), (int) bitmapbeans3
.get(0).getwidth(), (int) bitmapbeans3.get(0).getwidth()),
thumbnailutils.extractthumbnail(bitmaputils.getscalebitmap(
getresources(), r.drawable.j), (int) bitmapbeans3
.get(0).getwidth(), (int) bitmapbeans3.get(0).getwidth()),
thumbnailutils.extractthumbnail(bitmaputils.getscalebitmap(
getresources(), r.drawable.j), (int) bitmapbeans3
.get(0).getwidth(), (int) bitmapbeans3.get(0).getwidth())};
bitmap[] bitmaps4 = {
thumbnailutils.extractthumbnail(bitmaputils.getscalebitmap(
getresources(), r.drawable.j), (int) bitmapbeans4
.get(0).getwidth(), (int) bitmapbeans4.get(0).getwidth()),
thumbnailutils.extractthumbnail(bitmaputils.getscalebitmap(
getresources(), r.drawable.j), (int) bitmapbeans4
.get(0).getwidth(), (int) bitmapbeans4.get(0).getwidth()),
thumbnailutils.extractthumbnail(bitmaputils.getscalebitmap(
getresources(), r.drawable.j), (int) bitmapbeans4
.get(0).getwidth(), (int) bitmapbeans4.get(0).getwidth()),
thumbnailutils.extractthumbnail(bitmaputils.getscalebitmap(
getresources(), r.drawable.j), (int) bitmapbeans4
.get(0).getwidth(), (int) bitmapbeans4.get(0).getwidth())};
}
|
4.组合bitmap图片（也就是将我们的图片用canvas画到一起）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/**
* 获得合在一起的bitmap
* @param mentitylist
* @param bitmaps
* @return
*/
public static bitmap getcombinebitmaps(list<bitmapbean> mentitylist,
bitmap... bitmaps) {
bitmap newbitmap = bitmap.createbitmap(200, 200, bitmap.config.argb_8888);
for (int i = 0; i < mentitylist.size(); i++) {
bitmaps[i] = getroundedcornerbitmap(bitmaps[i]);
newbitmap = mixturebitmap(newbitmap, bitmaps[i], new pointf(
mentitylist.get(i).getx(), mentitylist.get(i).gety()));
}
return newbitmap;
}
|
这里我为了好看将图片设置成圆形的了
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
/**
* 获取圆形的bitmap
* @param bitmap
* @return
*/
public static bitmap getroundedcornerbitmap(bitmap bitmap) {
try {
bitmap output = bitmap.createbitmap(bitmap.getwidth(),
bitmap.getheight(), bitmap.config.argb_8888);
canvas canvas = new canvas(output);
final paint paint = new paint();
final rect rect = new rect(0, 0, bitmap.getwidth(),
bitmap.getheight());
final rectf rectf = new rectf(new rect(0, 0, bitmap.getwidth(),
bitmap.getheight()));
final float roundpx = 50;
paint.setantialias(true);
canvas.drawargb(0, 0, 0, 0);
paint.setcolor(color.black);
canvas.drawroundrect(rectf, roundpx, roundpx, paint);
paint.setxfermode(new porterduffxfermode(porterduff.mode.src_in));
final rect src = new rect(0, 0, bitmap.getwidth(),
bitmap.getheight());
canvas.drawbitmap(bitmap, src, rect, paint);
return output;
} catch (exception e) {
return bitmap;
}
}
|
最后开画
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
/**
* 画bitmap
* @param first
* @param second
* @param frompoint
* @return
*/
public static bitmap mixturebitmap(bitmap first, bitmap second,
pointf frompoint) {
if (first == null || second == null || frompoint == null) {
return null;
}
bitmap newbitmap = bitmap.createbitmap(first.getwidth(),
first.getheight(), bitmap.config.argb_8888);
canvas cv = new canvas(newbitmap);
cv.drawbitmap(first, 0, 0, null);
cv.drawbitmap(second, frompoint.x, frompoint.y, null);
cv.save(canvas.all_save_flag); //保存全部图层
cv.restore();
return newbitmap;
}
|
这样就简单的实现了微信群聊头像的效果，当然需要对图片做一些处理，已防止oom，你也可以将它自定义成一个view组件，小编有时间的话会实现这个的。
最后再给大家看一下小编项目上实现的效果吧，没啥区别，只不多数据源不一样了，是从网络上获取的。
这里写图片描述：
以上就是本文的全部内容，希望对大家的学习有所帮助。