I know I can round all four corners using:
myBtn.layer.cornerRadius = 8 myBtn.layer.masksToBounds = true
Since I only want to round two, I did some research and found this:
extension UIView { func roundCorners(corners:UIRectCorner, radius: CGFloat) { let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius)) let mask = CAShapeLayer() mask.path = path.CGPath self.layer.mask = mask } }
Which is called like this:
view.roundCorners([.TopLeft , .TopRight], radius: 10)
Yet this doesn't work for a UIButton. When I switch the extension to be for type UIButton and pass it a button , the output looks like this:
The question is, how do I adapt this to work on a UIButton?
If you start with a regular UIView it has square corners. You can give it round corners by changing the cornerRadius property of the view's layer . and smaller values give less rounded corners. Both clipsToBounds and masksToBounds are equivalent.
Swift 4: For latest iOS 11 onwards
override func viewDidLoad() { super.viewDidLoad() if #available(iOS 11.0, *) { self.viewToRound.clipsToBounds = true viewToRound.layer.cornerRadius = 20 viewToRound.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner] } else { // Fallback on earlier versions } }
Earlier iOS (10,9 etc) Versions (works for iOS 11 too)
override func viewDidLayoutSubviews() { self.viewToRound.clipsToBounds = true let path = UIBezierPath(roundedRect: viewToRound.bounds, byRoundingCorners: [.topRight, .topLeft], cornerRadii: CGSize(width: 20, height: 20)) let maskLayer = CAShapeLayer() maskLayer.path = path.cgPath viewToRound.layer.mask = maskLayer }
Adding Extension of UIButton:
extension UIButton{ func roundedButton(){ let maskPath1 = UIBezierPath(roundedRect: bounds, byRoundingCorners: [.topLeft , .topRight], cornerRadii: CGSize(width: 8, height: 8)) let maskLayer1 = CAShapeLayer() maskLayer1.frame = bounds maskLayer1.path = maskPath1.cgPath layer.mask = maskLayer1 } }
Calling in viewDidAppear/viewDidLayoutSubviews:
btnCorner.roundedButton()
Button Corner OutPut:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With