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

原文

写在前面

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

一、对于网络图片，大多数要提早设置展位图，若是美工没有提供圆角占位图片，你须要相应的对占位图片进行圆角处理；

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

图片上有Label.png

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

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

 

个人方案

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

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

带边框.png

不带边框.png

先来看看绘制代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

/**我建立了一个分类用于建立相应的遮罩图片*/ @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彻底相同的效果！

二、对于绘制的图片，咱们应该进行保存，当遇到颜色，圆角以及边框等属性彻底相同的绘制请求时候，咱们能够及时复用，避免屡次建立

优缺点

优势的话，主要是避免了去解决上面说道提到的几个问题，若是你有遇到上面3个问题的困扰，我以为这是至关不错的方案

再罗列缺点：

一、因为建立图片须要一个背景色，该背景色源于须要遮盖视图的父视图的颜色，若是该父视图的颜色不是纯色或者存在透明的话，此时该方式就不适用了，此时仍是应该采起处理图片的方式来解决；

二、若是父视图的颜色会变化，好比点击cell的时候，此刻你须要同时更新遮罩图片为相应颜色的图片，因此须要多写一些代码。

封装

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

/**   设置一个四角圆角     @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就能完成一个圆角 + 边框的遮罩效果，相同遮罩图片的复用我也作了相关处理了，具体使用以下：

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

demo列表.gif