Practical explanation of efficiently adding rounded corners effect on iOS

[[163500]]

Rounded corners are a very common visual effect. Compared with right angles, they are softer, more beautiful and easier to accept. However, many people do not know the correct way and principle of setting rounded corners. Setting rounded corners will bring certain performance loss. How to improve performance is another topic that needs to be discussed in detail. I consulted some existing materials and gained a lot, but also found some misleading errors. This article summarizes some knowledge points, which are summarized as follows:

• The correct posture and principle for setting rounded corners
• Performance loss of setting rounded corners
• Other ways to set rounded corners, and the best choice

I made a demo for this article, you can clone it from my github: CornerRadius, if you find it helpful, please give it a star to show your support. The project is implemented in Swift, but please believe me that even if you only know Objective-C, you can understand it because the key knowledge has nothing to do with Swift.

I made a demo for this article, you can clone it from my github: CornerRadius, if you find it helpful, please give it a star to show your support. The project is implemented in Swift, but please believe me that even if you only know Objective-C, you can understand it because the key knowledge has nothing to do with Swift.

Correct posture

First of all, I want to make it clear that setting rounded corners is simple and it does not incur any performance loss.

Because it's so simple, it only takes one line of code:

 view.layer.cornerRadius = 5  

Don't rush to close the webpage or reply, let's let the facts speak for themselves. Open Instruments and select Core Animation debugging, you will find that there is no Off-Screen Rendering and no reduction in the frame rate. For more information about using Instruments to analyze applications, you can refer to my article: UIKit Performance Tuning Practical Explanation. From the screenshot, you can see that the third brown view does have rounded corners:

However, if you look at the code, you can find that there is a UILabel that also has rounded corners, but it does not show any changes. For this, you can check the comments of the cornerRadius property:

By default, the corner radius does not apply to the image in the layer's contents property; it applies only to the background color and border of the layer. However, setting the masksToBounds property to true causes the content to be clipped to the rounded corners.

That is to say, by default, this property only affects the background color and border of the view. It has no effect on controls like UILabel that have subviews inside. So in many cases we will see code like this:

 label.layer.cornerRadius = 5  
 label.layer.masksToBounds = true  

We add the second line of code to the constructor of CustomTableViewCell and run the Instrument again to see the rounded corners effect.

Performance loss

If you check Color Offscreen-Rendered Yellow, you will find yellow marks around the label, indicating that off-screen rendering has occurred. For an introduction to off-screen rendering, you can also refer to: UIKit Performance Tuning Practical Explanation, which will not be repeated in this article.

One thing that needs to be emphasized is that off-screen rendering is not caused by setting rounded corners! It is easy to draw this conclusion by controlling variables, because UIView only sets cornerRadius, but it does not render off-screen. Some authoritative articles, such as Stackoverflow and CodeReview, mention that setting cornerRadius will cause off-screen rendering and affect performance. I think this is really unfair to the lovely cornerRadius variable and misleads others.

Although setting masksToBounds will cause off-screen rendering, thus affecting performance, how big will this impact be? On my iPhone 6, even if there are 17 views with rounded corners, the frame rate when sliding still fluctuates around 58-59 fps.

However, this does not mean that iOS 9 has made any special optimizations, or that off-screen rendering has little impact. The main reason is that there are not enough rounded corners. When I set a UIImageView to have rounded corners, that is, when there are 34 rounded corner views on the screen, the fps drops significantly to only about 33. Basically, it has reached the range that affects the user experience. Therefore, any optimization without basis is a hooligan. If you don’t have many rounded corner views and your cells are not complicated, don’t bother to mess with it.

Efficiently rounding corners

Assuming that there are many views with rounded corners (such as in UICollectionView), how can we add rounded corners to the views efficiently? Most online tutorials do not explain it completely, because this matter needs to be considered in two cases. The principle of setting rounded corners for ordinary UIView is completely different from that of setting rounded corners for UIImageView.

One approach is to try to achieve the effect of cornerRadius = 3:

 override func drawRect(rect: CGRect) {
    let maskPath = UIBezierPath(roundedRect: rect,
                                byRoundingCorners: .AllCorners,
                                cornerRadii: CGSize(width: 3 , height: 3 ))
    let maskLayer = CAShapeLayer()
    maskLayer.frame = self.bounds
    maskLayer.path = maskPath.CGPath
    self.layer.mask = maskLayer
 }

But this is an extremely wrong way of writing!

First of all, we should try to avoid overriding the drawRect method. Improper use of this method will cause a surge in memory usage. For example, a UIView on an iPhone 6 that is the same size as the screen will take up at least 750 * 1134 * 4 bytes ≈ 3.4 Mb of memory even if an empty drawRect method is overridden. In the Memory Demon drawRect and its sequel, the author introduced the principle in detail. According to his test, overriding the drawRect method on an empty view that is the same size as the screen on an iPhone 6 will consume 5.2 Mb of memory. In short, avoid overriding the drawRect method as much as possible.

Secondly, this method is essentially implemented using a mask layer, so it will inevitably lead to off-screen rendering. I tried to use this method to implement the rounded corners of the previous 34 views, and the fps dropped to around 11. It was already a very slow pace.

Forget about this way of writing. Here are the correct and efficient ways to set rounded corners.

Add rounded corners to UIView

The principle of this method is to draw rounded corners manually. Although we have said before that we can directly set the cornerRadius property for ordinary views, if it is inevitable to use masksToBounds, you can use the following method. Its core code is as follows:

 func kt_drawRectWithRoundedCorner(radius radius: CGFloat,
                       borderWidth: CGFloat,
                                  backgroundColor: UIColor,
                                  borderColor: UIColor) -> UIImage {
     UIGraphicsBeginImageContextWithOptions(sizeToFit, false , UIScreen.mainScreen().scale)
     let context = UIGraphicsGetCurrentContext() 
      
 CGContextMoveToPoint(context, start position); // Start from the right side of the start coordinate  
 CGContextAddArcToPoint(context, x1, y1, x2, y2, radius); // This type of code is repeated four times   
    
     CGContextDrawPath(UIGraphicsGetCurrentContext(), .FillStroke)
     let output = UIGraphicsGetImageFromCurrentImageContext();
     UIGraphicsEndImageContext();
 return output
 }

This method returns a UIImage, which means we use Core Graphics to draw a rounded rectangle. In addition to some necessary codes, the core is the CGContextAddArcToPoint function. The four parameters in the middle represent the coordinates of the starting and ending points of the curve, and the last parameter represents the radius. After calling the function four times, the rounded rectangle can be drawn. Finally, get the image from the current drawing context and return it.

With this image in hand, we create a UIImageView and insert it at the bottom of the view hierarchy:

 extension UIView {
    func kt_addCorner(radius radius: CGFloat,
                      borderWidth: CGFloat,
                      backgroundColor: UIColor,
                      borderColor: UIColor) {
        let imageView = UIImageView(image: kt_drawRectWithRoundedCorner(radius: radius,
                                    borderWidth: borderWidth,
                                    backgroundColor: backgroundColor,
                                    borderColor: borderColor))
        self.insertSubview(imageView, atIndex: 0 )
 }
 }

The complete code can be found in the project. To use it, you only need to write:

 let view = UIView(frame: CGRectMake( 1 , 2 , 3 , 4 ))
 view.kt_addCorner(radius: 6 )

Add rounded corners to UIImageView

Compared with the above implementation method, adding rounded corners to UIImageView is more commonly used. Its implementation idea is to directly capture the image:

 extension UIImage {
    func kt_drawRectWithRoundedCorner(radius radius: CGFloat, _ sizetoFit: CGSize) -> UIImage {
        let rect = CGRect(origin: CGPoint(x: 0 , y: 0 ), size: sizetoFit) 
          
        UIGraphicsBeginImageContextWithOptions(rect.size, false , UIScreen.mainScreen().scale)
        CGContextAddPath(UIGraphicsGetCurrentContext(),
            UIBezierPath(roundedRect: rect, byRoundingCorners: UIRectCorner.AllCorners,
                cornerRadii: CGSize(width: radius, height: radius)).CGPath)
        CGContextClip(UIGraphicsGetCurrentContext()) 
          
 self.drawInRect(rect)
        CGContextDrawPath(UIGraphicsGetCurrentContext(), .FillStroke)
        let output = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext(); 
          
 return output
 }
 }

The rounded corner path is drawn directly with Bezier curves. An unexpected bonus is that you can also choose which corners have rounded corners. The effect of this function is to cut the original UIImage into rounded corners. With this function, we can expand a method for setting rounded corners for UIImageView:

 extension UIImageView {
 /**
 / !!!Calling this method will only work if imageView is not nil
 :param: radius fillet radius
 */  
    override func kt_addCorner(radius radius: CGFloat) {
        self.image = self.image?.kt_drawRectWithRoundedCorner(radius: radius, self.bounds.size)
 }
 }

The complete code can be found in the project. To use it, you only need to write:

 let imageView = let imgView1 = UIImageView(image: UIImage(name: "" ))
 imageView.kt_addCorner(radius: 6 )

remind:

No matter which method you use, you need to be careful when using the background color. Because we did not set masksToBounds at this time, the part beyond the rounded corners will still be displayed. Therefore, you should not use the background color anymore, and you can set the fill color when drawing the rounded rectangle to achieve a similar effect.

When adding rounded corners to a UIImageView, make sure the image property is not nil, otherwise the setting will have no effect.

Field test

Back to the demo, let's test the two methods for setting rounded corners that we just defined. First, uncomment these two lines of code in the setupContent method:

 imgView1.kt_addCorner(radius: 5 )
 imgView2.kt_addCorner(radius: 5 )

Then use a custom method to set the rounded corners for the label and view:

 view.kt_addCorner(radius: 6 )
 label.kt_addCorner(radius: 6 )

Now, we have successfully added the rounded corners while ensuring that performance is not affected:

Performance Testing

Summarize

• If the problem can be solved with just cornerRadius, there is no need for optimization.
• If you must set masksToBounds, you can refer to the number of rounded corner views. If the number is small (only a few on a page), you can consider not optimizing.
• The rounded corners of UIImageView are achieved by directly capturing the image, and the rounded corners of other views can be achieved by drawing rounded rectangles using Core Graphics.

References

Be careful not to let rounded corners become a frame rate killer for your list

Some questions about performance