圆角是iOS系统中常见的视觉样式，从系统图标到导航栏按钮，圆角无处不在。因为圆角是符合人类视觉安全体验的，圆角让人觉得舒适，而尖角在潜意识层次是具有伤害体验的，因为尖尖的东西总是有可能对人造成伤害的，所以我们更喜欢圆角。在iOS开发过程中，苹果提供了一种添加圆角的方法，简单暴力有效，但并不是所有的开发者都清楚原理，因此设置圆角有时会带来一定的性能损耗。
上一篇文章从理论上介绍设置圆角方法，性能损耗的原因这两方面展开讨论。本文将从具体项目的实践中介绍如何避免性能损耗。
提升性能的几种方法
前文已经提到，圆角设置不当会导致系统进行离屏渲染，进而造成卡顿和跳帧。具体到项目实践中，解决问题的途径有两种：一是尽量减小离屏渲染造成的CPU/GPU资源消耗，达到减缓卡顿的程度，下面将要介绍的光栅化(Rasterization)就是遵循这个思路的解决途径；二是通过其他方法实现『圆形的角』效果，尽量避免离屏渲染。具体方法包括裁剪图片，圆角遮罩等。
光栅化
光栅化(Rasterization)，将layer渲染为bitmap存储于帧缓冲区中(一种特殊的离屏渲染)，每个像素对应帧缓冲区中的一像素。开启光栅化只需下面两行代码：
view.layer.shouldRasterize = YES;
view.layer.rasterizationScale = cell.layer.contentsScale;
以下是官方文档对shouldRasterize属性的解释：
When the value of this property is YES, the layer is rendered as a bitmap in its local coordinate space and then composited to the destination with any other content. Shadow effects and any filters in the filters property are rasterized and included in the bitmap. However, the current opacity of the layer is not rasterized.
shouldRasterize = YES在其他属性触发离屏渲染的同时，会将光栅化后的内容缓存起来，如果对应的layer及其sublayers没有发生改变，在下一帧的时候可以直接复用。shouldRasterize = YES，这将隐式的创建一个位图，各种阴影遮罩等效果也会保存到位图中并缓存起来，从而减少渲染的频度（不是矢量图）。(来源)
开启光栅化后，GPU 只合成一次内容，然后复用合成的结果；合成的内容超过 100ms 没有使用会从缓存里移除，在更新内容时还会产生更多的离屏渲染。对于内容不发生变化的视图，原本拖后腿的离屏渲染就成为了助力；如果视图内容是动态变化的，使用这个方案有可能让性能变得更糟。
裁剪图片
我们得到一张图片之后，对图片本身进行裁剪，把图片的直角裁剪为圆角。以后每次使用此图片时，都是一张带圆角的图片，这就从源头控制了后续获取圆角的各种操作，非常适用于频繁动态更新的场景。
// UIImage+RoudedCorner.m
- (UIImage *)roundedCornerImageWithCornerRadius:(CGFloat)cornerRadius
{
CGFloat w = self.size.width;
CGFloat h = self.size.height;
CGFloat scale = [UIScreen mainScreen].scale;
// 防止圆角半径小于0，或者大于宽/高中较小值的一半。
if (cornerRadius < 0) {
cornerRadius = 0;
}
else if (cornerRadius > MIN(w, h)) {
cornerRadius = MIN(w, h) / 2.;
}
UIImage *image = nil;
CGRect imageFrame = CGRectMake(0., 0., w, h);
UIGraphicsBeginImageContextWithOptions(self.size, NO, scale);
[[UIBezierPath bezierPathWithRoundedRect:imageFrame cornerRadius:cornerRadius] addClip];
[self drawInRect:imageFrame];
image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
圆角遮罩
在要添加圆角的视图上再叠加一个部分透明的视图，只对圆角部分进行遮挡。遮挡的部分背景最好与周围背景相同。多一个图层会增加合成的工作量，但这点工作量与离屏渲染相比微不足道，性能上无论各方面都和无效果持平。如果叠加的视图都一样，可以只加载一次遮罩图片以减少内存占用。
除了用软件画出来保存在项目里，直接用代码画出来也是很简单的。在一个设置opaque = NO的 CGContext 里，设定填充颜色然后用两条曲线围成一个封闭区域，最后从这个绘制环境导出图像即可。
// UIImage+RoudedCorner.m
/**
* 生成一张图片，用于遮盖UIView的四角，使UIView呈现圆角效果
*
* @param color 遮罩颜色
* @param radius 圆角半径
*
* @return 一张resizable图片，图片尺寸(2 * radius + 1) * (2 * radius + 1)，中心的1px为透明色，用于拉伸
*/
+ (UIImage *)roundedCornerMaskImageWithColor:(UIColor *)color radius:(CGFloat)radius
{
if (radius <= 0) {
return nil;
}
CGRect rect = CGRectMake(0, 0, radius * 2 + 1, radius * 2 + 1);
UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0.0);
CGContextRef context = UIGraphicsGetCurrentContext();
[color set];
CGPathRef rectPath = CGPathCreateWithRect(rect, NULL);
CGContextAddPath(context, rectPath);
CGPathRef roundedCornerPath = CGPathCreateWithRoundedRect(rect, radius, radius, NULL);
CGContextAddPath(context, roundedCornerPath);
CGContextEOFillPath(context);
UIImage *maskImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CGPathRelease(rectPath);
CGPathRelease(roundedCornerPath);
return [maskImage resizableImageWithCapInsets:UIEdgeInsetsMake(radius, radius, radius, radius)];
}
圆角背景图
生成一张圆角图片，叠加在目标视图的最底部。效率和圆角遮罩一样。这种方法特别适用于UIButton，调用UIButton的setBackgroundImage:forState:方法，将生成的图片设置为背景图即可。
// UIImage+RoudedCorner.m
- (UIImage *)roundedCorner:(CGFloat)cornerRadius tintedGradientColor:(UIColor *)tintColor
{
CGFloat w = self.size.width;
CGFloat h = self.size.height;
CGFloat scale = [UIScreen mainScreen].scale;
// 防止圆角半径小于0，或者大于宽/高中较小值的一半。
if (cornerRadius < 0)
cornerRadius = 0;
else if (cornerRadius > MIN(w, h))
cornerRadius = MIN(w, h) / 2.;
CGRect imageFrame = CGRectMake(0., 0., w, h);
UIGraphicsBeginImageContextWithOptions(self.size, NO, scale);
[[UIBezierPath bezierPathWithRoundedRect:imageFrame cornerRadius:cornerRadius] addClip];
[self drawInRect:imageFrame];
[tintColor setFill];
UIRectFill(imageFrame);
[self drawInRect:imageFrame blendMode:kCGBlendModeOverlay alpha:1.0f];
UIImage *tintedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return tintedImage;
}
文本视图类上实现圆角
文本视图主要是这三类：UILabel, UITextField, UITextView。其中 UITextField 类自带圆角风格的外型，UILabel 和 UITextView 要想显示圆角需要表现出与周围不同的背景色才行。想要在 UILabel 和 UITextView 上实现低成本的圆角(不触发离屏渲染)，需要保证 layer 的contents呈现透明的背景色，文本视图类的 layer 的contents默认是透明的(字符就在这个透明的环境里绘制、显示)，此时只需要设置 layer 的backgroundColor，再加上cornerRadius就可以搞定了。不过 UILabel 上设置backgroundColor的行为被更改了，不再是设定 layer 的背景色而是为contents设置背景色，UITextView 则没有改变这一点，所以在 UILabel 上实现圆角要这么做：
//不要这么做：label.backgroundColor = aColor 以及不要在 IB 里为 label 设置背景色
label.layer.backgroundColor = aColor;
label.layer.cornerRadius = 5;
总结
- 光栅化(Rasterization)可以有效提高帧率，前提是layer的contents不频繁更新。
- 裁剪图片可以一劳永逸地解决生成图片圆角的问题，但仅限于图片，不能有多个视图叠加在图片之上。同时一旦裁剪完成，圆角大小就不可更改，适用范围很窄。
- 圆角遮罩方法在目标视图上再添加一层视图，可以盖住底层所有的视图，可扩展性强，但要求父视图是纯色背景。
- 没有哪种方法可以cover所有的情况，总有一种情况没有办法做任何优化，听天由命吧……
