IBDesignable and IBInspectable

IBDesignable and IBInspectable, yes i know its a long overdue feature but better late then never. So IBDesignable and IBInspectable allowed us to live preview the design right in the Interface Builder, they came with Xcode 6. IBDesignable and IBInspectable are new interface builder declaration attributes. IBInspectable : exposes class properties in the interface builder Attribute Inspector, and IBDesignable : updates the view in realtime.

IBDesignable

To mark a custom view as IBDesignable, prefix the class name with @IBDesignable or theIB_DESIGNABLE macro in Objective-C.

IBDesignable: when applied to a UIView or NSView subclass, the @IBDesignable designation lets Interface Builder know that it should render the view directly in the canvas. This allows us to see how our custom views will appear without building and running our app after every small change in UI.

 

 

IBInspectable

IBInspectable properties provide visual access  to an old feature i.e user-defined runtime attributes. These attributes have been available since before Interface Builder was integrated into Xcode. They are a powerful mechanism for configuring any key-value coded property of an instance in a NIB, XIB, or storyboard.

The value of an attribute ,key path and type need to be set on each instance. IBInspectable properties solve this problem outright, you can now specify any property as inspectable and get a user interface built just for your custom class. Below are valid types for IBInspectable :

  • Int
  • CGFloat
  • Double
  • String
  • Bool
  • CGPoint
  • CGSize
  • CGRect
  • UIColor
  • UIImage

In your class write the properties you want to be changed from Interface builder, for eg :

 

IBDesignable and IBInspectable
As you can see at the Top Right corner in Interface Builder there are options which we mention using @IBInspectable we can change the values and see the outcome on story board in real time.

IBDesignable and IBInspectable with Extension

Sounds interesting, right. Yes we can use IBDesignable and IBInspectable with Extension like below.

It will be available for all the UIViews. Give it a try, now if you click on 2nd UIView the gray color square. You will see options for cornerRadius and backGroundImage too. Unfortunately, the changes to the cornerRadius or backGroundImage property are not rendered in real time but only when you run the app. The @IBDesignable and @IBInspectable live rendering is only supported on custom controls using subclasses.

Today we learn about IBDesignable and IBInspectable, and how much they are helpful and time saving for creating beautiful UI. happy Coding 🙂

Add a Comment

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.