Rounding corners on iOS is a perennial and difficult problem, and Apple has also improved the cornerRadius property in iOS 9 to improve frame rates quite a bit. However, the high frequency with which rounded corners are used in iOS applications requires that we find a better way to solve this problem. I read a lot of blogs about how to effectively add rounded corners and summed up how to deal with rounded corners.

How to set rounded corners

There are three modes for adding rounded corners in iOS:

  1. Sets the layer.cornerRadius property of the view
imageView.layer.cornerRadius = imageView.frame.size.width / 2;
imageView.layer.masksToBounds = YES;
Copy the code
  1. – Use CAShapeLayer and UIBezierPath to set rounded corners
UIBezierPath *maskBezierPath = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:imageView.bounds.size];
CAShapeLayer *maskShapeLayer = [[CAShapeLayer alloc]init];
maskShapeLayer.frame = imageView.bounds;
maskShapeLayer.path = maskBezierPath.CGPath;
imageView.layer.mask = maskShapeLayer;
Copy the code
  1. Draw a rounded corner using the UIBezierPath and CoreGraphics framework
UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, [UIScreen mainScreen].scale);
[[UIBezierPath bezierPathWithRoundedRect:imageView.bounds cornerRadius:imageView.frame.size.width] addClip];
[imageView drawRect:imageView.bounds];
imageView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
Copy the code

Performance impact

  1. Sets the layer.cornerRadius property of the view. The first method is suitable for pages with less rounded corners. For example, on a personal-centered page, only the picture has rounded corners. Cutting and drawing a corner is not as fast as setting the cornerRedius property for two pieces of code, and the performance loss is negligible.

  2. – Use CAShapeLayer and UIBezierPath to set rounded corners. This method also changes the layer layer of the view and adds a mask on top of the view to make the view look rounded. However, through the practical tests of various iOS developers, the performance loss of this method even exceeds that of the first method, which is not easy to please, so we refuse to use it!

  3. Draw a rounded corner using the UIBezierPath and CoreGraphics framework. If you have a tableView, a collectionView, and you want to add rounded corners to their cells, or a lot of rounded corners to the controls, then using the first cornerRadius property is not going to be the right thing to do. This is especially true when excessive memory consumption can reduce the number of frames on your machine from 50 or 60 to 10 or 20, which is a very bad user experience. Using UIBezierPath and CoreGraphics does not manipulate the layer layer, but also adds rounded corners efficiently. So I’m just going to write a category for UIImageView that I can use in my project.

Use the third method to add rounded code using categories

Write a UIImageView class and add it using the following code to make sure that imageView.image is not nil when rounded corners are added (because the essence of the method is to crop UIImage).

[imageView quickSetCornerRadius:50];
Copy the code

UIImageView+cornerRadius.h

#import <UIKit/UIKit.h>

@interface UIImageView (cornerRadius)

- (void)quickSetCornerRadius:(CGFloat)cornerRadius;

@end

@interface UIImage (cornerRadius)

- (UIImage *)imageAddCornerWithRadius:(CGFloat)radius andSize:(CGSize)size;

@end
Copy the code

UIImageView+cornerRadius.m

#import "UIImageView+cornerRadius.h"@implementation UIImageView (cornerRadius) - (void)quickSetCornerRadius:(CGFloat)cornerRadius { self.image = [self.image  imageAddCornerWithRadius:cornerRadius andSize:self.bounds.size]; } @end @implementation UIImage (cornerRadius) - (UIImage *)imageAddCornerWithRadius:(CGFloat)radius andSize:(CGSize)size  { CGRect rect = CGRectMake(0, 0, size.width, size.height); UIGraphicsBeginImageContextWithOptions(size, NO, [UIScreen mainScreen].scale); CGContextRef contextRef = UIGraphicsGetCurrentContext(); UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(radius, radius)]; CGContextAddPath(contextRef,path.CGPath); CGContextClip(contextRef); [self drawInRect:rect]; CGContextDrawPath(contextRef, kCGPathFillStroke); UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext();return image;
}

@end
Copy the code