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; }优质内容筛选与推荐>>