segunda-feira, 3 de setembro de 2018

What’s IBDesignable / IBInspectable?

IBDesignable and IBInspectable are attributes used by Interface Builder, but different than IBOutlet and IBAction that are attributes too, IBInspectable and IBDesignable are used to render elements directly in Interface Builder.

WWDC 14 by Apple

These attributes showed in WWDC 14 [1] firstly supported Objective-C, but now you can use with Swift too.

Rendering the custom UI component

The IBDesignable attribute is responsible to identifier the class inherits from the UIView that will render in Interface Builder.

For example, I created an ImageView custom using IBDesignable:

You can see the result below:

IBDesignable in action

But to get this result, I need to set in Identity Inspector the UIImageView to CustomImageView:

Identity Inspector

Configuring the UI component by Interface Builder

IBInspectable is another attribute that can be used to configure your UI component (e.g.), just you need to use this attribute in your code together with the property:

and the result is:

IBInspectable in action

IBInspectable, unfortunately, can not use with all the types, see the list below that can support:
  • Int
  • CGFloat
  • Double
  • String
  • Bool
  • CGPoint
  • CGSize
  • CGRect
  • UIColor
  • UIImage

I would like that the next step for XCode is the possibility to create components, deliver and install it to the used inside of XCode the same form that native Apple’s components, but now, we need to use another road to share it (e.g.): GitHub [2], cocoapods [3], Carthage [4], etc…