iOS-仿微信群头像

作者: 李丘 | 来源:发表于2019-10-25 16:36 被阅读0次

    前言

    项目中需要用到即时通讯的功能,在做群聊的时候,群头像仿的是微信的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;
    }
    

    相关文章

      网友评论

        本文标题:iOS-仿微信群头像

        本文链接:https://www.haomeiwen.com/subject/qsxevctx.html