iOS development view provided to the same four different rounded corners

1. Performance Optimization fillet

In the development of APP, rounded picture or recurring. If only a small rounded picture may not have a very big impact on the performance of a single interface, but when more rounded picture of when it will have a significant impact APP performance. We set the fillet is generally the following manner:

imageView.layer.cornerRadius=CGFloat(10);

imageView.layer.masks ToBounds=YES;

Rendering mechanism of this process is outside the current screen buffer GPU opened a new render buffer to work, which is off-screen rendering, which will give us additional performance loss, if such operations reached a fillet - given the number of frequent mergers and context will trigger a buffer of frequent switching costs will now macroscopic surface properties of the user experience eleven dropped frames.

Optimization: Bezier UIBezierPath draw frame and a rounded Core Graphics

extension UIView {
    
    /// BezierPath 圆角设置
    func roundCorners(_ corners: UIRectCorner = .allCorners, radius: CGFloat) {
        let maskPath = UIBezierPath(
            roundedRect: bounds,
            byRoundingCorners: corners,
            cornerRadii: CGSize(width: radius, height: radius))
        
        let shape = CAShapeLayer()
        shape.path = maskPath.cgPath
        layer.mask = shape
    }
}

2. Set the fillet of different sizes

iOS development can occasionally encounter the needs of different sizes need to set the fillet, then you need to draw the path to achieve the specific code is as follows

the UIView {Extension
     // add four different sizes rounded 
    FUNC addCorner (cornerRadii: CornerRadii) { 
       the let path = createPathWithRoundedRect (bounds: self.bounds, cornerRadii: cornerRadii) 
       the let shapLayer = CAShapeLayer () 
       shapLayer.frame = self.bounds 
       shapLayer .path = path 
       self.layer.mask = shapLayer 
    } 
    // each fillet size 
    struct CornerRadii {
         var topLeft: CGFloat = 0 
        var Topright: CGFloat = 0 
        var bottomleft: CGFloat = 0
        var bottomRight: CGFloat = 0 
    } 
    // cut fillet lines plotted as a function 
    FUNC createPathWithRoundedRect (bounds: the CGRect, cornerRadii: CornerRadii) -> CGPath 
    { 
        the let minX = bounds.minX 
        the let minY = bounds.minY 
        the let maxX = bounds.maxX 
        the let maxY = bounds.maxY 
        
        // get four circle 
        the let topLeftCenterX = minX +   cornerRadii.topLeft 
        the let topLeftCenterY = minY + cornerRadii.topLeft 
         
        the let topRightCenterX = maxX - cornerRadii.topRight
        topRightCenterY the let = minY + cornerRadii.topRight 
        
        the let bottomLeftCenterX = minX +   cornerRadii.bottomLeft 
        the let bottomLeftCenterY = maxY - cornerRadii.bottomLeft 
         
        the let bottomRightCenterX = maxX -   cornerRadii.bottomRight 
        the let bottomRightCenterY = maxY - cornerRadii.bottomRight 
        
        // Although clockwise parameter is YES, in in iOS UIView, the actual counterclockwise where 
        the let path: CGMutablePath = CGMutablePath ();
          // top left 
        path.addArc (center: CGPoint (x: topLeftCenterX, y: topLeftCenterY), radius: cornerRadii.topLeft, startAngle: CGFloat .pi, endAngle: CGFloat.pi * 3 / 2, clockwise: false)
        //顶右
        path.addArc(center: CGPoint(x: topRightCenterX, y: topRightCenterY), radius: cornerRadii.topRight, startAngle: CGFloat.pi * 3 / 2, endAngle: 0, clockwise: false)
        //底右
        path.addArc(center: CGPoint(x: bottomRightCenterX, y: bottomRightCenterY), radius: cornerRadii.bottomRight, startAngle: 0, endAngle: CGFloat.pi / 2, clockwise: false)
        //底左
        path.addArc(center: CGPoint(x: bottomLeftCenterX, y: bottomLeftCenterY), radius: cornerRadii.bottomLeft, startAngle: CGFloat.pi / 2, endAngle: CGFloat.pi, clockwise: false)
        path.closeSubpath();
         return path;
    }
}