转载

iOS一个简单的设置圆角不引起性能问题的分类

写在前面

iOS设置圆角的性能探究已经是一个老生常谈的问题了，众所周知，如果直接使用layer的cornerRadius + masksToBounds虽然可以很方便的完成圆角设置，但会引起离屏渲染，导致性能问题，在列表视图中过多的圆角设置就会导致滑动卡顿，现在主流的方案就是在获取图片的一刻开启异步线程对图片进行相应的圆角处理，把图片处理成想要的图片在返回主线程进行显示，想要便捷的达成此目的推荐YY大神的YYWebImage，其在获取图片的时候的时候提供了一个transform的block，在此block中你可以完成图片的处理工作，但是在实际的使用中，我觉得第二种方案还是有些不方便的地方，具体如下：

1、对于网络图片，大多数要提前设置展位图，如果美工没有提供圆角占位图片，你需要相应的对占位图片进行圆角处理；

2、对于混合视图需要圆角的，比如下图，图片上有一个Label，label也需要圆角化，你也得对label进行单独的处理（这里我有个小tip：如果必须使用这种方式，我的做法是生成一张左下角和右下角圆角化的黑色背景图片，然后使用colorWithPatternImage 将图片设置label的背景色，这样你不需要为这个黑色的圆角地图另外创建一个视图）

图片上有Label.png

3、如果多处需要重复使用同一个图片地址，使用YYWebImage时，其会将tranform后的图片缓存起来，所以就会出现，如果你在一个地方圆角化了该图片，在另一个地方使用时依然会是圆角化的图片，这显然在有时候是不满足需求的，不过你可以使用不同的YYWebImageManager来管理相同图片地址而需要不同transform的图片；

综上所述，虽然可以通过一些方式解决上述问题，如果有一个性能优秀且能避免上诉问题产生的圆角化方案就更好了。

我的方案

要避免上述问题，我们就不能从修改图片入手了，还是需要从视图层次入手，我采取的方案其实也相当简单，如果某个视图需要圆角化，我只需要在该视图上添加一个子layer到最上层，用于遮盖该视图及其子视图，设置layer的图片为刚好能够遮盖成所需圆角样子并且图片颜色刚好是该视图父视图的背景颜色就达到达到想要的效果的，由于该遮罩layer在最上层，所以对于上面所提到的第二个缺点中的Label，也顺带着遮罩了，所以无需再次处理，当然由于我们是在视图层次而非图片层次处理的圆角，上面的第一个和第三个缺点也不存在了，这样其实很简单的解决的上诉三个缺点，下面来看看相关的代码：

1、首先是绘制遮盖layer的图层图片，当然我们可以让美工切图给我们，但是如果对于每个尺寸的视图都去切图的话，工作量就相应增大了，其实我们值需要绘制一张如下的图片，如果是空白，请点击图片查看

iOS一个简单的设置圆角不引起性能问题的分类

带边框.png

iOS一个简单的设置圆角不引起性能问题的分类

不带边框.png

先来看看绘制代码

/**我创建了一个分类用于创建相应的遮罩图片*/
@implementation UIImage (XWAddForRoundedCorner)

/**提供一个在一个指定的size中绘制图片的便捷方法*/
+ (UIImage *)xw_imageWithSize:(CGSize)size drawBlock:(void (^)(CGContextRef context))drawBlock {
    if (!drawBlock) return nil;
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    CGContextRef context = UIGraphicsGetCurrentContext();
    if (!context) return nil;
    drawBlock(context);
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

/**绘制方法的具体逻辑，遮罩图片的逻辑是绘制一个矩形，然后在绘制一个相应的圆角矩形，然后填充矩形和圆角矩形的中间部分为父视图的背景色*/
+ (UIImage *)xw_maskRoundCornerRadiusImageWithColor:(UIColor *)color cornerRadii:(CGSize)cornerRadii size:(CGSize)size corners:(UIRectCorner)corners borderColor:(UIColor *)borderColor borderWidth:(CGFloat)borderWidth{
    return [UIImage xw_imageWithSize:size drawBlock:^(CGContextRef  _Nonnull context) {
        CGContextSetLineWidth(context, 0);
        [color set];
        CGRect rect = CGRectMake(0, 0, size.width, size.height);
        //绘制一个矩形，这里发-0.3是为了防止边缘的锯齿，
        UIBezierPath *rectPath = [UIBezierPath bezierPathWithRect:CGRectInset(rect, -0.3, -0.3)];
        //绘制圆角矩形，这里的0.3是为了防止内边框的锯齿
        UIBezierPath *roundPath = [UIBezierPath bezierPathWithRoundedRect:CGRectInset(rect, 0.3, 0.3) byRoundingCorners:corners cornerRadii:cornerRadii];
        [rectPath appendPath:roundPath];
        CGContextAddPath(context, rectPath.CGPath);
        //注意要用EOFill方式进行填充而非Fill方式
        CGContextEOFillPath(context);
        //如下是绘制边框，原理依旧是绘制一个外边框然后根据边框宽度绘制一个内边框同样采取EOFill的方式进行填充即可
        if (!borderColor || !borderWidth) return;
        [borderColor set];
        UIBezierPath *borderOutterPath = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:corners cornerRadii:cornerRadii];
        UIBezierPath *borderInnerPath = [UIBezierPath bezierPathWithRoundedRect:CGRectInset(rect, borderWidth, borderWidth) byRoundingCorners:corners cornerRadii:cornerRadii];
        [borderOutterPath appendPath:borderInnerPath];
        CGContextAddPath(context, borderOutterPath.CGPath);
        CGContextEOFillPath(context);
    }];
}

@end

上述的绘制方法充分利用了系统绘制圆角的方法bezierPathWithRoundedRect + EOFill,其实最开始我是考虑自己绘制四分之一的圆弧来构建圆角的，后来发现不但代码多了不少，而且绘制出来的圆角始终没有系统这个绘制方法的圆润，我打印的系统的圆角路径，发现其应该不是四分之一圆弧，发现他的控制点取值有些奇怪，我也不太清楚是如何取的，但是效果的确要好一点，总之采取如上的EOFill方式取巧，绘制的圆角图片可以达到和系统的cornerRadius完全相同的效果！

2、对于绘制的图片，我们应该进行保存，当遇到颜色，圆角以及边框等属性完全相同的绘制请求时候，我们可以及时复用，避免多次创建

优缺点

优点的话，主要是避免了去解决上面说道提到的几个问题，如果你有遇到上面3个问题的困扰，我觉得这是相当不错的方案

再罗列缺点：

1、由于创建图片需要一个背景色，该背景色源于需要遮盖视图的父视图的颜色，如果该父视图的颜色不是纯色或者存在透明的话，此时该方式就不适用了，此时还是应该采取处理图片的方式来解决；

2、如果父视图的颜色会变化，比如点击cell的时候，此刻你需要同时更新遮罩图片为相应颜色的图片，所以需要多写一些代码。

封装

对于此方案，我封装了一个简单的UIView的分类UIView+XWAddForRoundedCorner来达到目的，github地址是XWCornerRadius ，此分类分成简单只有3个API ，且代码只有200行，没有其它依赖，具体API如下：

/**
 设置一个四角圆角

 @param radius 圆角半径
 @param color  圆角背景色
 */
- (void)xw_roundedCornerWithRadius:(CGFloat)radius cornerColor:(UIColor *)color;

/**
 设置一个普通圆角

 @param radius  圆角半径
 @param color   圆角背景色
 @param corners 圆角位置
 */
- (void)xw_roundedCornerWithRadius:(CGFloat)radius cornerColor:(UIColor *)color corners:(UIRectCorner)corners;
44
/**
 设置一个带边框的圆角
44
 @param cornerRadii 圆角半径cornerRadii
 @param color       圆角背景色
 @param corners     圆角位置
 @param borderColor 边框颜色
 @param borderWidth 边框线宽
 */
- (void)xw_roundedCornerWithCornerRadii:(CGSize)cornerRadii cornerColor:(UIColor *)color corners:(UIRectCorner)corners borderColor:(UIColor *)borderColor borderWidth:(CGFloat)borderWidth;

你只需要调用相应的API就能完成一个圆角 + 边框的遮罩效果，相同遮罩图片的复用我也做了相关处理了，具体使用如下：

[headerView xw_roundedCornerWithCornerRadii:XWSizeMake(40, 40) cornerColor:[UIColor whiteColor] corners:UIRectCornerAllCorners borderColor:[UIColor redColor] borderWidth:widthRatio(2)];

iOS一个简单的设置圆角不引起性能问题的分类

demo列表.gif

写在最后

对于此方法我已经做了简单的测试，性能还是相当不错的，虽然有图层混合，但是相对于离屏渲染，都是小问题，如上图在我的老ipod的上也相当流畅，大家可以自行尝试，更多的关于这几种方案的性能比较，网上也已经很多了，大家可以自行查找，当然你也可以使用YYWebImage来处理图片的尺寸来进一步优化图片的展示，如果在某些非常复杂的场景想要进一步提高流畅度，YYKit的源码以及 YY大神关于性能的相关文章绝对值得反复阅读，不过对于优化的态度，我觉得还是先考虑需求的实现，再来考虑性能优化最好，所谓过早的性能优化都是魔鬼嘛~~~对于该圆角思路如果有疑问欢迎提出，如果觉得有帮助，感谢star，再复习一遍github地址：XWCornerRadius

正文到此结束