iOS - 圆角的设计策略 - 及绘画出没有离屏渲染的圆角
- 设计圆角时候为什么需要策略
在我们做APP开发的过程中，设计圆角应该是最为基础的功能之一。就是因为时常需要用到，所以就有必要考虑到，圆角的设计是否会对我们APP的流畅性有影响。我们一般设计圆角的通用方法：
someView.layer.corneRadius = 10;
someView.maskToBounds = Yes;
由于
maskToBounds会触发离屏渲染，所以就有可能导致APP的fps下降，从而使APP产生卡顿的现象，所以遵从某些简单的策略在我们的开发过程中会更加有利于APP的流畅。
具体的策略
- 当界面中只有view(不包括view的子类控件)需要设计圆角
UIView *someView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
someView.layer.cornerRadius = 10;
注意到：如果仅仅是view需要设置圆角，是不要设置maskToBounds的，并且someView.layer.cornerRadius并不会触发离屏渲染(很多的文章提到了会触发，其实这是对该cornerRadius属性的错误认识，可能也误导了许多新手开发者)，所以可以安心的设置
- 当界面中有其他的包含子控件的view，如label，imageView等，需要设置圆角，但是数量并不多。此时可以安心的使用如下的方法，这里虽然会触发离屏渲染，但是由于数量比较少，所以对全局的影响一般不会很大。
someLabel.layer.cornerRadius = 10;
someLabel.maskToBounds = Yes;
-
但是当界面中有非常多需要设置圆角，比如tableView中。当界面中的tableView有超过25个圆角(使用上面的方法)，那么那么fps将会下降很多，特别是对某些控件还设置了阴影的效果，更加会加剧界面卡顿的现象。此时对于不同的控件将采用不同的方法进行处理，如下
- 对于label类，可以通过CoreGraphics来画出一个圆角的label
- 对于imageView类，通过CoreGraphics对绘画出来的image进行裁边处理，从而形成一个圆角的imageView
对如label类，可以用如下方法进行绘制，仅给出核心的OC代码，项目示例代码可以在github中找到CornerRadius
给UILabel绘画圆角
- (UIImage *)dr_drawRectWithRoundedCornerRadius:(CGFloat)radius
borderWidth:(CGFloat)borderWidth
backgroundColor:(UIColor *)backgroundColor
borderCorlor:(UIColor *)borderColor {
CGSize sizeToFit = CGSizeMake([DrCorner pixel:self.bounds.size.width], self.bounds.size.height);
CGFloat halfBorderWidth = borderWidth / 2.0;
UIGraphicsBeginImageContextWithOptions(sizeToFit, NO, [UIScreen mainScreen].scale);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, borderWidth);
CGContextSetStrokeColorWithColor(context, borderColor.CGColor);
CGContextSetFillColorWithColor(context, backgroundColor.CGColor);
CGFloat width = sizeToFit.width, height = sizeToFit.height;
CGContextMoveToPoint(context, width - halfBorderWidth, radius + halfBorderWidth); // 准备开始移动坐标
CGContextAddArcToPoint(context, width - halfBorderWidth, height - halfBorderWidth, width - radius - halfBorderWidth, height - halfBorderWidth, radius);
CGContextAddArcToPoint(context, halfBorderWidth, height - halfBorderWidth, halfBorderWidth, height - radius - halfBorderWidth, radius); // 左下角角度
CGContextAddArcToPoint(context, halfBorderWidth, halfBorderWidth, width - halfBorderWidth, halfBorderWidth, radius); // 左上角
CGContextAddArcToPoint(context, width - halfBorderWidth, halfBorderWidth, width - halfBorderWidth, radius + halfBorderWidth, radius);
CGContextDrawPath(UIGraphicsGetCurrentContext(), kCGPathFillStroke);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
之后用绘画出来的image生成imageView，并将其插入到view的最底层
- (void)dr_addCornerRadius:(CGFloat)radius
borderWidth:(CGFloat)borderWidth
backgroundColor:(UIColor *)backgroundColor
borderCorlor:(UIColor *)borderColor {
UIImageView *imageView = [[UIImageView alloc] initWithImage:[self dr_drawRectWithRoundedCornerRadius:radius borderWidth:borderWidth backgroundColor:backgroundColor borderCorlor:borderColor]];
[self insertSubview:imageView atIndex:0];
}
** 之后在你需要圆角的地方就可以放心的调用此方法了 **
给UIImageVIew绘画圆角-裁边处理，如下
- (UIImage*)dr_imageAddCornerWithRadius:(CGFloat)radius andSize:(CGSize)size{
CGRect rect = CGRectMake(0, 0, size.width, size.height);
UIGraphicsBeginImageContextWithOptions(size, NO, [UIScreen mainScreen].scale);
CGContextRef ctx = UIGraphicsGetCurrentContext();
UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(radius, radius)];
CGContextAddPath(ctx,path.CGPath);
CGContextClip(ctx);
[self drawInRect:rect];
CGContextDrawPath(ctx, kCGPathFillStroke);
UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
示例代码CornerRadius中还对这些核心方法进行了简单的封装，可以下载下来再仔细的看看。
声明：如果你觉得该文章对有一点点帮助，请移步到iOS 高效添加圆角效果实战讲解中点赞，该文章的最初想法来自于该大大bestswifter的这篇博文。并且该大大bestswifter用swift实现了所有的核心代码。本文使用的全部是OC。
参考大大们的文章
iOS 高效添加圆角效果实战讲解
接下来会介绍使用Core Animation的UI的调试方法，欢迎一起讨论
喜欢请随意
iOS - 圆角的设计策略 - 及绘画出没有离屏渲染的圆角
