Playing with IBInspectables in Interface Builder
This is a screenshot of a storyboard in the IB(interface builder). You can see a UILabel, UIImageView and a UIButton with some UI features such as border color, border width, background color, corner radius in this image. Let’s see how we can achieve this from the IB it self without even building and running the iOS app. Here IBInspectable stands for Interface Builder Inspectable and IBDesignable for Interface Builder Designable.
Here IBDesignable annotation is used for a component of UIKit. Here I have used UILabel, UIButton and UIImageView which comes under UIKit. IBInspectable is to annotate that a property of a component which we will be using to inspect from the IB.
Here I have shown the UILabel from IB and inspectable properties in the attribute inspector panel. I have tried to change border color, border width, background color, corner radius from the inspector while designing the UI. This method is very easy because it allows the developer to have an idea of the UI design even before running the app.
Now will see how the code works here.
Below code was used to make the UILabel inspectable from the IB. Border color, border width, background color, corner radius are some properties that belongs to UILabel. So here we are assigning the new value that comes from the Attribute Inspector (given by developer) using set method.
Below code allows to inspect some properties that belongs to UIButton.
Below code allows to inspect some properties that belongs to UIImageView.
Here I have used few properties only to make this article short and sweet. You can inspect any number of properties from the IB. But when number of inspectable increase you may face some indexing and updating performance issues from Xcode.
