iOS 圆形头像

iOS 显示圆形头像是一个比较常见的需求,之前面试的时候也有被问到。当时答出来的是设置 CALayer 以及在 Storyboard 中设置,第二种没有答出来。现在把三种方法写一下,效果图如下:

CALayer

UIView 和 CALayer 的关系在这里不多说,CALayer 主要的作用是绘制。

目前假设一个 UIImageView 叫 avatarImageView,那么方法为:

// 设置 layer 以外的区域不显示,默认为 NO
avatarImageView.layer.masksToBounds = YES;
// 设置 layer 的圆角
avatarImageView.layer.cornerRadius = avatarImageView.bounds.size.height/2;
// 设置 layer 边框颜色和宽度
avatarImageView.layer.borderWidth = 3.0;
avatarImageView.layer.borderColor = [UIColor whiteColor].CGColor;

Duartz2D

直接提供方法:

/**
 获取圆形图片

 @param originImage 原图
 @param borderWidth 边框宽度
 @param borderColor 边框颜色
 @return 返回圆形图片
 */
- (UIImage *)getRoundAvatar:(UIImage *)originImage borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor {
    // 定义新图片的尺寸
    CGFloat bigImageWidth = originImage.size.width + 2 * borderWidth;
    CGFloat bigImageHeight = originImage.size.height + 2 * borderWidth;
    CGSize imageSize = CGSizeMake(bigImageWidth, bigImageHeight);
    // 开启上下文
    UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);
    // 取得当前上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 设置边框颜色
    [borderColor set];
    // 设置边框
    CGFloat bigRadius = bigImageWidth / 2.0;
    CGFloat centerX = bigRadius;
    CGFloat centerY = bigRadius;
    CGContextAddArc(ctx, centerX, centerY, bigRadius, 0, M_PI * 2, 0);
    CGContextFillPath(ctx);
    // 设置小圆
    CGFloat smallRadius = bigRadius - borderWidth;
    CGContextAddArc(ctx, centerY, centerY, smallRadius, 0, M_PI * 2, 0);
    // 裁剪
    CGContextClip(ctx);
    // 画图
    [originImage drawInRect:CGRectMake(borderWidth, borderWidth, originImage.size.width, originImage.size.height)];
    // 获取新图片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    // 结束上下文
    UIGraphicsEndImageContext();
    return newImage;
}

调用方式:

[avatarImageView setImage:[self getRoundAvatar:[UIImage imageNamed:@"somePic.jpg"]
                                   borderWidth:3.0
                                   borderColor:[UIColor whiteColor]]];

Storyboard / Xib 设置

Identity inspector 中的 User Defined Runtime Attribute 添加如下信息:

这里其实和 CALayer 的设置方法一致。

但是因为 border color 的类型为 CGColor ,所以在这里设置并不会起作用,会始终为黑色。

总结

Storyboard 的可维护性不是太强,一般不推荐使用;

CALayer 方式的代码比较简单,并且有一定的灵活性;

Duartz2D 代码比较高,但是可扩展性很高。

Demo 地址:RoundAvatarDemo - Objective-C

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,551评论 6 30
  • *面试心声:其实这些题本人都没怎么背,但是在上海 两周半 面了大约10家 收到差不多3个offer,总结起来就是把...
    Dove_iOS阅读 27,201评论 30 471
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,141评论 5 13
  • 原文:http://www.raywenderlich.com/113768/adaptive-layout-tu...
    kitty123阅读 3,564评论 2 3
  • iOS 实战开发课程笔记 本贴旨在作为对极客班 《iOS 开发实战》第五期期课程视频重新学习的笔记。目标是建立一个...
    黄穆斌阅读 3,053评论 12 57