Search code examples
iosswiftuiviewibinspectable

How to control an UIView's rounded corners separately using @IBInspectable in Swift 3?


Here is my current code:

override func viewDidLoad() {
    super.viewDidLoad()

    let rect = Draw(frame: CGRect(
        origin: CGPoint(x: 50, y: 50),
        size: CGSize(width: 100, height: 100)))
    self.view.addSubview(rect)
}

Solution

  • Use this custom class, basically you need create a bezier path, using lines and quad curves, handling every corner with values in @IBInspectable properties.

    This is the code

    //
    //  CornerView.swift
    //  UIViewCornerRounded
    //
    //  Created by Reinier Melian on 21/07/2017.
    //  Copyright © 2017 Pruebas. All rights reserved.
    //
    
    import UIKit
    
    
    @IBDesignable
    class CornerView: UIView {
        
        @IBInspectable var leftTopRadius : CGFloat = 0{
            didSet{
                self.applyMask()
            }
        }
        @IBInspectable var rightTopRadius : CGFloat = 0{
            didSet{
                self.applyMask()
            }
        }
        @IBInspectable var rightBottomRadius : CGFloat = 0{
            didSet{
                self.applyMask()
            }
        }
        
        @IBInspectable var leftBottomRadius : CGFloat = 0{
            didSet{
                self.applyMask()
            }
        }
    
        
        override func layoutSubviews() {
            super.layoutSubviews()
            self.applyMask()
        }
        
        // Only override draw() if you perform custom drawing.
        // An empty implementation adversely affects performance during animation.
        /*override func draw(_ rect: CGRect) {
            super.draw(rect)
    
        }*/
        
        func applyMask()
        {
            let shapeLayer = CAShapeLayer(layer: self.layer)
            shapeLayer.path = self.pathForCornersRounded(rect:self.bounds).cgPath
            shapeLayer.frame = self.bounds
            shapeLayer.masksToBounds = true
            self.layer.mask = shapeLayer
        }
        
        func pathForCornersRounded(rect:CGRect) ->UIBezierPath
        {
            let path = UIBezierPath()
            path.move(to: CGPoint(x: 0 + leftTopRadius , y: 0))
            path.addLine(to: CGPoint(x: rect.size.width - rightTopRadius , y: 0))
            path.addQuadCurve(to: CGPoint(x: rect.size.width , y: rightTopRadius), controlPoint: CGPoint(x: rect.size.width, y: 0))
            path.addLine(to: CGPoint(x: rect.size.width , y: rect.size.height - rightBottomRadius))
            path.addQuadCurve(to: CGPoint(x: rect.size.width - rightBottomRadius , y: rect.size.height), controlPoint: CGPoint(x: rect.size.width, y: rect.size.height))
            path.addLine(to: CGPoint(x: leftBottomRadius , y: rect.size.height))
            path.addQuadCurve(to: CGPoint(x: 0 , y: rect.size.height - leftBottomRadius), controlPoint: CGPoint(x: 0, y: rect.size.height))
            path.addLine(to: CGPoint(x: 0 , y: leftTopRadius))
            path.addQuadCurve(to: CGPoint(x: 0 + leftTopRadius , y: 0), controlPoint: CGPoint(x: 0, y: 0))
            path.close()
            
            return path
        }
        
    }
    

    Here is the results

    enter image description here

    Using this values

    enter image description here

    Hope this helps