工作快一年來(lái)，第一次想寫文章冬竟，想想還有點(diǎn)小激動(dòng)欧穴。主要是想把自己開(kāi)發(fā)中的一點(diǎn)經(jīng)歷寫下來(lái)。以供自己查看泵殴。也讓廣大同行參考涮帘，指正。
好了笑诅，作為碼農(nóng)调缨，話不多說(shuō)。先來(lái)看下生成的效果圖：
WechatIMG2.jpeg
WechatIMG3.jpeg
生成的方法很簡(jiǎn)單吆你。直接上代碼：
/**
根據(jù)網(wǎng)絡(luò)圖片弦叶，得到群組頭像
如果是網(wǎng)絡(luò)圖片，需要先把圖片下載好妇多。
@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];
}
根據(jù)下載好的圖片湾蔓，來(lái)繪制圖片
/**
根據(jù)圖片合成群組頭像
@param imageArray 圖片數(shù)組
@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;
// 計(jì)算各個(gè)圖片的位置
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像素，所以圖片等寬度需要大一點(diǎn)砌梆。
下面是最主要的計(jì)算每張圖片的位置。
// 根據(jù)圖片的數(shù)量得到每張圖片對(duì)應(yīng)的位置
+ (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; //余數(shù)
// 處理圖片寬度
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) { //有多余行贬循，先布局多出來(lái)的一行
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{ // 沒(méi)有多余行咸包，頂部邊距根據(jù)行數(shù)正常計(jì)算
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;
}
到此。你就能和微信一樣生成群組頭像了杖虾。是不是很簡(jiǎn)單烂瘫。
第一篇文章是個(gè)好的開(kāi)始。以后有時(shí)間奇适，會(huì)多寫文章的坟比。大家一起加油～～～qwq
