前言
项目中需要用到即时通讯的功能,在做群聊的时候,群头像仿的是微信的UI。
实现思路
- 使用 SDWebImage 下载、管理群员头像
- 计算每一个群员头像在群头像中的位置,不同数量的群员,群头像有不同的UI
- 根据计算的 rect,把所有群员的头像(最多9张)绘制在一个 image 上
- 绘制出来的 image 作为群头像
demo 地址
https://github.com/Li-Qu-Tech/UIImageView-MultiAvatar.git
使用方法
把 UIImageView+MultiAvatar 这个分类拖到项目中,根据实际需求,修改头像大小,间距等参数,使用的时候类似于 SDWebImage
[avatar ht_setImageWithURLStrArr:imageUrlStrArr];//图片url字符串数组
效果图
群头像核心代码
使用调度组来下载图片
//下载小头像
- (void)downImageWith:(NSArray *)arr {
SDWebImageManager *manager = [SDWebImageManager sharedManager];
NSMutableArray *tempArr = [NSMutableArray arrayWithCapacity:arr.count];
//调度组
dispatch_group_t group = dispatch_group_create();
for (NSString *urlStr in arr) {
NSURL *url = [NSURL URLWithString:urlStr];
dispatch_group_enter(group);
dispatch_async(dispatch_get_global_queue(0, 0), ^{
//下载头像
[manager loadImageWithURL:url options:SDWebImageLowPriority progress:^(NSInteger receivedSize, NSInteger expectedSize, NSURL * _Nullable targetURL) {
} completed:^(UIImage * _Nullable image, NSData * _Nullable data, NSError * _Nullable error, SDImageCacheType cacheType, BOOL finished, NSURL * _Nullable imageURL) {
if (image) {
[tempArr addObject:image];
}
dispatch_group_leave(group);
}];
});
}
dispatch_group_notify(group, dispatch_get_main_queue(), ^{
//所有小头像绘制到一张图片上
UIImage *avatar = [self drawGroupAvatarWith:tempArr.copy];
self.image = avatar;
});
}
绘制群头像
//绘制群头像
- (UIImage *)drawGroupAvatarWith:(NSArray *)arr {
//群头像大小
CGSize avatarSize = CGSizeMake(121*kWidthScale, 121*kWidthScale);
UIGraphicsBeginImageContext(avatarSize);
//获取每个小头像的rect
NSArray *rectArr = [self calculateEachRectWithCount:arr.count];
NSInteger index = 0;
for (UIImage *image in arr) {
if (index > rectArr.count - 1) {
break;
}
CGRect rect = CGRectFromString([rectArr objectAtIndex:index]);
//绘制小头像
[image drawInRect:rect];
index++;
}
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
网友评论