iOS 高效添加圆角效果实战讲解

1. UIView设置圆角影响性能

结论就是 cornerRadius 并不会影响性能, 但是 masksToBounds 会导致离屏渲染, 从而会影响性能. 就是说影响性能是的masksToBounds属性, 因此在项目开发中, 尽量不去使用masksToBounds属性. 如果一个页面只有少数几个圆角的属性, 使用masksToBounds也无妨, 但是一旦有二十个以上, 就不能使用这个属性了.

如果是给一个imageView添加圆角, 那么可以直接裁剪UIImage对象获得, 如果是UIView的圆角, 最好的实现思路是, 画一个圆角边框的图片, 放在UIView上, 将背景颜色画上去, UIView不要设置任何背景颜色, 因为没有masksToBounds属性, 背景颜色不会被裁掉的.

2. UIView设置圆角实战

简单实现代码如下(如有不合理之处, 还望指出):

- (UIImage *)drawRectWithCorner:(float)radius
bgColor:(UIColor *)bgColor
borderWidth:(float)borderWidth
borderColor:(UIColor *)borderColor {

UIGraphicsBeginImageContextWithOptions(self.frame.size, false, UIScreen.mainScreen.scale);
CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetFillColorWithColor(context, bgColor.CGColor);
CGContextSetLineWidth(context, borderWidth);
CGContextSetStrokeColorWithColor(context, borderColor.CGColor);

CGRect bounds = CGRectMake(borderWidth / 2.f, borderWidth / 2.f, self.bounds.size.width - borderWidth, self.bounds.size.height - borderWidth);

CGContextMoveToPoint(context, CGRectGetMinX(bounds), radius);
CGContextAddArcToPoint(context, CGRectGetMinX(bounds), CGRectGetMinY(bounds), radius, CGRectGetMinY(bounds), radius);
CGContextAddArcToPoint(context, CGRectGetMaxX(bounds), CGRectGetMinY(bounds), CGRectGetMaxX(bounds), CGRectGetMinY(bounds) + radius, radius);
CGContextAddArcToPoint(context, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds), CGRectGetMaxX(bounds) - radius, CGRectGetMaxY(bounds), radius);
CGContextAddArcToPoint(context, CGRectGetMinX(bounds), CGRectGetMaxY(bounds), CGRectGetMinX(bounds), CGRectGetMaxY(bounds) - radius, radius);

CGContextClosePath(context);
CGContextDrawPath(UIGraphicsGetCurrentContext(), kCGPathFillStroke);
UIImage *output = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return output;
}

- (void)addCorner:(float)radius
bgColor:(UIColor *)bgColor
borderWidth:(float)borderWidth
borderColor:(UIColor *)borderColor {
UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.bounds];
imageView.image = [self drawRectWithCorner:radius bgColor:bgColor borderWidth:borderWidth / 2.f borderColor:borderColor];
[self insertSubview:imageView atIndex:0];
}

使用:

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 100, 200, 200)];
[self.view addSubview:view];
view.backgroundColor = [UIColor clearColor];
[view addCorner:30 bgColor:[UIColor clearColor] borderWidth:1 borderColor:[UIColor whiteColor]];

3. UIImage添加圆角实战

UIImage添加圆角, 实现思路是, 获取

CGContextRef

对象, 然后对图片进行绘制, 剪切, 之后return修剪过的image.

- (UIImage *)circleImage {

// 开始图形上下文
UIGraphicsBeginImageContextWithOptions(self.size, NO, 0.0);

// 获得图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();

// 设置一个范围
CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);

// 根据一个rect创建一个椭圆
CGContextAddEllipseInRect(ctx, rect);

// 裁剪
CGContextClip(ctx);

// 将原照片画到图形上下文
[self drawInRect:rect];

// 从上下文上获取剪裁后的照片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

// 关闭上下文
UIGraphicsEndImageContext();

return newImage;
}

4. 提醒

无论使用上面哪种方法，你都需要小心使用背景颜色。因为此时我们没有设置 masksToBounds，因此超出圆角的部分依然会被显示。因此，你不应该再使用背景颜色，可以在绘制圆角矩形时设置填充颜色来达到类似效果。

在为 UIImageView 添加圆角时，请确保 image 属性不是 nil，否则这个设置将会无效。

5. 总结

如果能够只用 cornerRadius 解决问题，就不用优化。

如果必须设置 masksToBounds，可以参考圆角视图的数量，如果数量较少（一页只有几个）也可以考虑不用优化。

UIImageView 的圆角通过直接截取图片实现，其它视图的圆角可以通过 Core Graphics 画出圆角矩形实现。

两个讲得不错的文章:

http://www.jianshu.com/p/f970872fdc22

http://www.jianshu.com/p/619cf14640f3