在iOS7之后秽晚，我們能發(fā)現(xiàn)許多應(yīng)用都開始使用圓形來作為用戶頭像的形狀嘱巾，代表App就是騰訊QQ了齐邦，QQ的頭像就是圓形的。
在今天看到美工給的登陸效果圖時(shí)炕吸，我發(fā)現(xiàn)也是要求做一個(gè)圓形的頭像顯示效果，在晚上琢磨之后勉痴，我打算把這段經(jīng)驗(yàn)記錄一下赫模，因?yàn)橐院罂隙〞?huì)用到的次數(shù)也很多，為此我也專門Category一個(gè)類目以便日后使用蒸矛。效果圖如下 :
圓形頭像效果圖
這里可能看得不是特別清楚嘴瓤，實(shí)際的效果，在圓形頭像的外部還有一個(gè)外框莉钙，用暗淡的陰影顯示廓脆。
制作這個(gè)圓形頭像，我的大體思路就是直接用Core graphic直接繪制磁玉，將原本的非圓形圖片直接裁剪為圓形停忿，之后再繪制上外面的陰影。
如果對(duì)外邊框沒有要求的同學(xué)蚊伞，可以直接用最簡(jiǎn)單的方式來設(shè)置席赂，我把簡(jiǎn)單的方法先貼出來:
UIImage * image = [UIImage imageNamed:@"icon_huo"];
UIImageView * imageV = self.imageView;
imageV.layer.masksToBounds = YES;
imageV.layer.cornerRadius =imageV.frame.size.width / 2 ;
/**如果需要邊框，請(qǐng)把下面2行注釋去掉*/
// imageV.layer.borderColor = [UIColor purpleColor].CGColor;
// imageV.layer.borderWidth = 10;
imageV.image= image;
為了之后代碼的復(fù)用时迫，以及提高開發(fā)效率颅停，我把這個(gè)方法做了封裝，我直接把封裝好的代碼貼出來掠拳，注釋很全癞揉，很容易理解，對(duì)照著上面的效果圖一起看吧溺欧。
/**
* 圓形頭像的繪制
*
* @param icon 頭像文件名
*
* @return image
*/
+ (instancetype)imageWithIconName:(NSString *)icon{
//邊框大小
CGFloat border = 113.0;
//這里不用管實(shí)現(xiàn)的方法喊熟，只要你設(shè)置一張你想使用的邊框圖片就可以了
UIImage *borderImg = [self createImageWithColor:[UIColor colorWithRed:53 green:53 blue:68 alpha:0.32]];
//頭像圖片
UIImage *image = [UIImage imageNamed:icon];
//設(shè)置頭像白色邊框 像素6px
CGSize size = CGSizeMake(image.size.width + border, image.size.height + border);
//創(chuàng)建圖片上下文
UIGraphicsBeginImageContextWithOptions(size, NO, 0);
//繪制邊框的圓
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(context, CGRectMake(0, 0, size.width, size.height));
//剪切可視范圍
CGContextClip(context);
//繪制邊框圖片
[borderImg drawInRect:CGRectMake(0, 0, size.width, size.height)];
//設(shè)置頭像
CGFloat iconX = border/2;
CGFloat iconY = border/2;
CGFloat iconW = image.size.width;
CGFloat iconH = image.size.height;
//繪制圓形頭像范圍
CGContextAddEllipseInRect(context, CGRectMake(iconX, iconY, iconW, iconH));
//剪切可視范圍
CGContextClip(context);
//繪制頭像
[image drawInRect:CGRectMake(iconX, iconY, iconW, iconH)];
//取出整個(gè)頭像上下文的圖片
UIImage *iconImage = UIGraphicsGetImageFromCurrentImageContext();
return iconImage;
}
