iOS-仿微信群头像

前言

项目中需要用到即时通讯的功能，在做群聊的时候，群头像仿的是微信的UI。

实现思路

1. 使用 SDWebImage 下载、管理群员头像
2. 计算每一个群员头像在群头像中的位置，不同数量的群员，群头像有不同的UI
3. 根据计算的 rect，把所有群员的头像（最多9张）绘制在一个 image 上
4. 绘制出来的 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;
}