iOS开发——制作圆形头像

2016/03/30 iOS开发

在iOS7之后,我们能发现许多应用都开始使用圆形来作为用户头像的形状,代表App就是腾讯QQ了,QQ的头像就是圆形的。

在今天看到美工给的登陆效果图时,我发现也是要求做一个圆形的头像显示效果,在晚上琢磨之后,我打算把这段经验记录一下,因为以后肯定会用到的次数也很多,为此我也专门Category一个类目以便日后使用。效果图如下 :

圆形头像效果图

这里可能看得不是特别清楚,实际的效果,在圆形头像的外部还有一个外框,用暗淡的阴影显示。

制作这个圆形头像,我的大体思路就是直接用Core graphic直接绘制,将原本的非圆形图片直接裁剪为圆形,之后再绘制上外面的阴影。

如果对外边框没有要求的同学,可以直接用最简单的方式来设置,我把简单的方法先贴出来:

UIImage * image = [UIImage imageNamed:@"icon_huo"]; 
UIImageView * imageV = self.imageView; 
imageV.layer.masksToBounds = YES; 
imageV.layer.cornerRadius =imageV.frame.size.width / 2 ;

 /**如果需要边框,请把下面2行注释去掉*/

// imageV.layer.borderColor = [UIColor purpleColor].CGColor;

// imageV.layer.borderWidth = 10; 

imageV.image= image;

为了之后代码的复用,以及提高开发效率,我把这个方法做了封装,我直接把封装好的代码贴出来,注释很全,很容易理解,对照着上面的效果图一起看吧。

/**
 *  圆形头像的绘制
 *
 *  @param icon 头像文件名
 *
 *  @return image
 */
+ (instancetype)imageWithIconName:(NSString *)icon{
   
    //边框大小
    CGFloat border = 113.0;
    
    //这里不用管实现的方法,只要你设置一张你想使用的边框图片就可以了
    UIImage *borderImg = [self createImageWithColor:[UIColor colorWithRed:53 green:53 blue:68 alpha:0.32]];
    
    //头像图片
    UIImage *image = [UIImage imageNamed:icon];
    //设置头像白色边框 像素6px
    CGSize size = CGSizeMake(image.size.width + border, image.size.height + border);
    
    //创建图片上下文
    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)];
    
    //设置头像
    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)];
    //取出整个头像上下文的图片
    UIImage *iconImage = UIGraphicsGetImageFromCurrentImageContext();
    
    return iconImage;
}

Search

    Table of Contents