微信群头像的生成方法

工作快一年来，第一次想写文章，想想还有点小激动。主要是想把自己开发中的一点经历写下来。以供自己查看。也让广大同行参考，指正。

好了，作为码农，话不多说。先来看下生成的效果图：

WechatIMG2.jpeg
WechatIMG3.jpeg

生成的方法很简单。直接上代码：

/**
 根据网络图片，得到群组头像

如果是网络图片，需要先把图片下载好。
 @param URLArray 头像地址
 @param bgColor 图片填充色
 @return 群组头像
 */
+ (UIImage *)groupImageWithURLS:(NSArray<NSString *> *)URLArray backgroundColor:(UIColor *)bgColor imageWidth:(CGFloat)imageWidth{

    if (!URLArray) return nil;
    
    NSMutableArray<UIImage *> *imageArray = [NSMutableArray arrayWithCapacity:URLArray.count];
    for (NSString *urlStr in URLArray) {
        NSData *imageData = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:urlStr]];
        UIImage *image = [[UIImage alloc] initWithData:imageData];
        if (imageData != nil)
            [imageArray addObject:image];
    }
    if (imageArray.count == 1) {
        return imageArray.firstObject;
    }
    
    return [UIImage groupImageWithImages:imageArray backgroundColor:bgColor imageSize:imageWidth];
}

根据下载好的图片，来绘制图片

/**
 根据图片合成群组头像

 @param imageArray 图片数组
 @param bgColor 填充色
 @param imageWidth 图片宽度
 @return 群组头像
 */
+ (UIImage *)groupImageWithImages:(NSArray<UIImage *> *)imageArray backgroundColor:(UIColor *)bgColor imageSize:(CGFloat)imageWidth {

    if (imageArray == nil) return nil;
    if (imageArray.count < 2) return imageArray.firstObject;
    
    UIColor *drawBackgroundColor = bgColor==nil?[UIColor groupTableViewBackgroundColor]:bgColor;
    // 计算各个图片的位置
    NSArray<NSString *> *rectArray = [UIImage imageRectWithCount:imageArray.count drawSize:imageWidth];
    // 布局画布
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(imageWidth, imageWidth), NO, [UIScreen mainScreen].scale);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, drawBackgroundColor.CGColor);
    CGContextSetStrokeColorWithColor(context, drawBackgroundColor.CGColor);
    CGContextSetLineWidth(context, 1.f);
    CGContextMoveToPoint(context, 0, 0);
    CGContextAddLineToPoint(context, 0, imageWidth);
    CGContextAddLineToPoint(context, imageWidth, imageWidth);
    CGContextAddLineToPoint(context, imageWidth, 0);
    CGContextAddLineToPoint(context, 0, 0);
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFillStroke);
    
    for (int i = 0; i<imageArray.count; i++) {
        UIImage *image = imageArray[i];
        CGRect rect = CGRectFromString(rectArray[i]);
        [image drawInRect:rect];
    }
    UIImage *groupIconImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return groupIconImage;
}

这里图片等间距给定8像素，所以图片等宽度需要大一点。
下面是最主要的计算每张图片的位置。

// 根据图片的数量得到每张图片对应的位置
+ (NSArray<NSString *> *)imageRectWithCount:(NSInteger)count drawSize:(CGFloat)size {
    
    NSMutableArray *rectArray = [NSMutableArray arrayWithCapacity:count];
    CGFloat drawWidth = size?size:100.f;
    CGFloat padding = 8.f;          //图片之间的边距
    CGFloat imageWidth = 0.f;       //图片宽度
    
    NSInteger row = 0;          //行
    NSInteger column = 0;       //列
    NSInteger remainder = 0;    //余数
    // 处理图片宽度
    if (count <= 4) {
        imageWidth = (drawWidth - padding*3)/2;
        row = count/2;
        column = 2;
        remainder = count%2;
    }else{
        imageWidth = (drawWidth - padding*4)/3;
        row = count/3;
        column = 3;
        remainder = count%3;
    }
    CGFloat topMargin = 0.f;
    
    if (remainder > 0) {        //有多余行，先布局多出来的一行
        CGFloat rowFirstY = (size - ((row + 1)*imageWidth + row*padding))/2;
        CGFloat rowFirstX = (size - (remainder*imageWidth + (remainder - 1)*padding))/2;
        for (int i = 0; i<remainder; i++) {
            CGFloat x = rowFirstX + (imageWidth+padding)*i;
            CGFloat y = rowFirstY;
            CGRect rect = CGRectMake(x, y, imageWidth, imageWidth);
            NSString *imageRectStr = NSStringFromCGRect(rect);
            [rectArray addObject:imageRectStr];
        }
        topMargin = rowFirstY + imageWidth + padding;
    }else{                      // 没有多余行，顶部边距根据行数正常计算
        topMargin = (size - (imageWidth*row + (row-1)*padding))/2;
    }
    
    //布局其他正常的位置
    for (int i = 0; i<row; i++) {
        for (int j = 0; j<column; j++) {
            CGFloat x = padding + (imageWidth + padding)*j;
            CGFloat y = topMargin + (imageWidth + padding)*i;
            CGRect rect = CGRectMake(x, y, imageWidth, imageWidth);
            NSString *imageRectStr = NSStringFromCGRect(rect);
            [rectArray addObject:imageRectStr];
        }
    }
    
    return rectArray;
}

到此。你就能和微信一样生成群组头像了。是不是很简单。
第一篇文章是个好的开始。以后有时间，会多写文章的。大家一起加油～～～qwq