How to use IBDesignable in Swift 3.0

@IBDesignable available from iOS 8.0 and Xode 6 or later.  The @IBDesignable properties applied to the UIView or NSView subclass. and it render the view directly in StoryBoard, So that we can easily identify about the view before run the app. Before this tutorial you study @IBInspectable tutorial.


Step 1 : Create a class DesignableView Parents of UIView. Adding prefix of @IBDesignable of the class. Inside the DesignableView class define the property of color, cornerRadius, backColor(background color) with @IBDesignable. 

How To @IBInspectable In Swift.
@IBDesignable
class DesignableView: UIView {
    // Corner Radius.
    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet {
            layer.cornerRadius = cornerRadius
            layer.masksToBounds = cornerRadius > 0
        }
    }
    //Background Color.
    @IBInspectable var backColor: UIColor? {
        didSet {
            backgroundColor = backColor
        }
    }
    //Border Width.
    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }
    //Border Color.
    @IBInspectable var borderColor: UIColor? {
        didSet {
            layer.borderColor = borderColor?.cgColor
        }
    }
}

Step 2 : In the StoryBoard you take the UIView and given the class name DesignableView which is you define already define programmatically. See below image.


Step 3 :  Whenever you give the parents class as DesignableView then its defined properties are display in the property inspection. now user can easily change the define value from the property inspection. and the view also render according to value. see below image.
Step 4 :  After set of the all property, you can see the view of behavior in stotyboard before the run. now run the app you get the result.


How to use IBDesignable in Swift 3.0 How to use IBDesignable in Swift 3.0 Reviewed by Kirit Modi on 08:12:00 Rating: 5

No comments:

Powered by Blogger.