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;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏有趣的django

博客园美化大全

3360
来自专栏更流畅、简洁的软件开发方式

发布一个锁定行列的一种方法。(实现Excel里的冻结窗格的功能)

功能介绍:     可以实现锁定表格的行和列的功能,效果和Excel里的冻结窗格类似,当然没有Excel那么强大了,只是类似。 问题:     当一个t...

7716
来自专栏一“技”之长

iOS中支持HTML文本的标签控件——MDHTMLLabel

        在iOS开发中对HTML的处理很多时候除了使用WebView外,还需要原生的控件对其进行渲染,例如将HTML字符串渲染为图文混排的View视图。...

1481
来自专栏deepcc

学习js在线html(富文本)编辑器

2.9K7
来自专栏ios 技术积累

iOS中的事件的产生和传递

●发生触摸事件后,系统会将该事件加入到一个由UIApplication管理的事件队列中,为什么是队列而不是栈?因为队列的特点是FIFO,即先进先出,先产生的事件...

1251
来自专栏偏前端工程师的驿站

CSS魔法堂:Transition就这么好玩

 以前说起前端动画必须使用JS,而CSS3为我们带来transition和@keyframes,让我们可以以更简单(声明式代替命令式)和更高效的方式实现UI状态...

1233
来自专栏糊一笑

移动端效果之IndexList

写在前面 接着前面的移动端效果讲,这次讲解的的是IndexList的实现原理。效果如下: ? 代码请看这里:github 移动端效果之swiper 移动端效果之...

2314
来自专栏一“技”之长

IOS UIAlertView(警告框)方法总结

@property(nonatomic,copy) NSString *title;

511
来自专栏一“技”之长

iOS UITableViewCell使用详解

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSStr...

722
来自专栏向治洪

React-Native组件之 Navigator和NavigatorIOS

对于app而言,一款应用往往涉及到很多的页面,而页面之间的跳转Android和iOS实现也各不相同。在iOS上,系统为我们提供了UINavigationCont...

2767

扫码关注云+社区

领取腾讯云代金券