Different cornerRadius for each corner of Swift 3 - iOS

Question

I want to set a different corner angle for the presentation in Swift -3, I can set the radius for each corner with the same value as that indicated in the next message, how to set cornerRadius only for the upper left and upper right corner of the UIView?

Is there a way to set the radius of the angle in the following format? Radius top left: 18 Radius top right: 18 Radius bottom right: 3 Radius bottom left: 18

Answer 1

You can set the default value of layer.cornerRadius to the smallest value, and then set the layer mask border to a larger value.

 let demoView = UIView(frame: CGRect(x: 100, y: 200, width: 100, height: 100)) demoView.backgroundColor = UIColor.red demoView.layer.cornerRadius = 3.0 let maskPath = UIBezierPath(roundedRect: demoView.bounds, byRoundingCorners: [.topLeft, .topRight, .bottomLeft], cornerRadii: CGSize(width: 18.0, height: 0.0)) let maskLayer = CAShapeLayer() maskLayer.path = maskPath.cgPath demoView.layer.mask = maskLayer view.addSubview(demoView) 

Answer 2

Want to add a unique angle value for each angle?

Do you want to add a border after that?

I have a solution that would look like this:

First , add the UIBezierPath extension that I did:

 extension UIBezierPath { convenience init(shouldRoundRect rect: CGRect, topLeftRadius: CGSize = .zero, topRightRadius: CGSize = .zero, bottomLeftRadius: CGSize = .zero, bottomRightRadius: CGSize = .zero){ self.init() let path = CGMutablePath() let topLeft = rect.origin let topRight = CGPoint(x: rect.maxX, y: rect.minY) let bottomRight = CGPoint(x: rect.maxX, y: rect.maxY) let bottomLeft = CGPoint(x: rect.minX, y: rect.maxY) if topLeftRadius != .zero{ path.move(to: CGPoint(x: topLeft.x+topLeftRadius.width, y: topLeft.y)) } else { path.move(to: CGPoint(x: topLeft.x, y: topLeft.y)) } if topRightRadius != .zero{ path.addLine(to: CGPoint(x: topRight.x-topRightRadius.width, y: topRight.y)) path.addCurve(to: CGPoint(x: topRight.x, y: topRight.y+topRightRadius.height), control1: CGPoint(x: topRight.x, y: topRight.y), control2:CGPoint(x: topRight.x, y: topRight.y+topRightRadius.height)) } else { path.addLine(to: CGPoint(x: topRight.x, y: topRight.y)) } if bottomRightRadius != .zero{ path.addLine(to: CGPoint(x: bottomRight.x, y: bottomRight.y-bottomRightRadius.height)) path.addCurve(to: CGPoint(x: bottomRight.x-bottomRightRadius.width, y: bottomRight.y), control1: CGPoint(x: bottomRight.x, y: bottomRight.y), control2: CGPoint(x: bottomRight.x-bottomRightRadius.width, y: bottomRight.y)) } else { path.addLine(to: CGPoint(x: bottomRight.x, y: bottomRight.y)) } if bottomLeftRadius != .zero{ path.addLine(to: CGPoint(x: bottomLeft.x+bottomLeftRadius.width, y: bottomLeft.y)) path.addCurve(to: CGPoint(x: bottomLeft.x, y: bottomLeft.y-bottomLeftRadius.height), control1: CGPoint(x: bottomLeft.x, y: bottomLeft.y), control2: CGPoint(x: bottomLeft.x, y: bottomLeft.y-bottomLeftRadius.height)) } else { path.addLine(to: CGPoint(x: bottomLeft.x, y: bottomLeft.y)) } if topLeftRadius != .zero{ path.addLine(to: CGPoint(x: topLeft.x, y: topLeft.y+topLeftRadius.height)) path.addCurve(to: CGPoint(x: topLeft.x+topLeftRadius.width, y: topLeft.y) , control1: CGPoint(x: topLeft.x, y: topLeft.y) , control2: CGPoint(x: topLeft.x+topLeftRadius.width, y: topLeft.y)) } else { path.addLine(to: CGPoint(x: topLeft.x, y: topLeft.y)) } path.closeSubpath() cgPath = path } } 

Then add this UIView extension:

 extension UIView{ func roundCorners(topLeft: CGFloat = 0, topRight: CGFloat = 0, bottomLeft: CGFloat = 0, bottomRight: CGFloat = 0) {//(topLeft: CGFloat, topRight: CGFloat, bottomLeft: CGFloat, bottomRight: CGFloat) { let topLeftRadius = CGSize(width: topLeft, height: topLeft) let topRightRadius = CGSize(width: topRight, height: topRight) let bottomLeftRadius = CGSize(width: bottomLeft, height: bottomLeft) let bottomRightRadius = CGSize(width: bottomRight, height: bottomRight) let maskPath = UIBezierPath(shouldRoundRect: bounds, topLeftRadius: topLeftRadius, topRightRadius: topRightRadius, bottomLeftRadius: bottomLeftRadius, bottomRightRadius: bottomRightRadius) let shape = CAShapeLayer() shape.path = maskPath.cgPath layer.mask = shape } } 

Finally, the method call

 myView.roundCorners(topLeft: 10, topRight: 20, bottomLeft: 30, bottomRight: 40) 

And add the border. Obviously, layer.borderRadius will not work properly, so create a border using CAShapeLayer and the previously created path.

 let borderLayer = CAShapeLayer() borderLayer.path = (myView.layer.mask! as! CAShapeLayer).path! // Reuse the Bezier path borderLayer.strokeColor = UIColor.red.cgColor borderLayer.fillColor = UIColor.clear.cgColor borderLayer.lineWidth = 5 borderLayer.frame = myView.bounds myView.layer.addSublayer(borderLayer) 

Voila!