Using IBDesignable and IBInspectable in Swift

See your stuff in the Storyboard

Image for post
Image for post
Photo by Molly Belle on Unsplash

Difficulty: Beginner | Easy | Normal | Challenging

If you are using Storyboards to create your App, it is rather lovely to see your work (layout and design) all come together. You can also see your new subclass do exactly the same, and this is what IBDesignable and IBInspectable are for!

Let us get started!

Prerequisites:

Terminology

IBDesignable: An attribute that allows the Storyboard file to see and compile a custom UI element

IBInspectable: An attribute that allows the Storyboard file to allow properties of a custom UI element to be altered in the Storyboard

Storyboard: A visual representation of the User Interface of an Application

Motivation

The Storyboard is a fantastic feature of the iOS SDK, and it allows us to see the user interface right in the Storyboard — without needing to fully compile and run a project.

A simple UIView subclass

Subclassing in Swift is actually pretty simple — as we actually get a little bit of help when we do so.

When we create through File>New>File we can choose to make our new file a subclass:

Image for post
Image for post

So in this case UpdateCornersView

Image for post
Image for post
Click for Gist

In this particular tutorial we don’t need to perform custom drawing, so thanks Swift but we won’t override draw(_ rect: CGRect).

Instead we will use the attribute @IBInspectable to se the corner radius using the didSet property setter

Image for post
Image for post
Click for Gist

this gives us the ability in the storyboard to see the UpdateCornersView. This is a multi-step process — we need to drag and drop a UIView onto the storyboard, set the class as UpdateCornersView.

Image for post
Image for post

Giving the following result:

Image for post
Image for post

Now by selecting the following icon:

Image for post
Image for post

And then adjusting the corner radius (and having selected a background color so we can see what is going on) as follow — which appears to be nothing.

Image for post
Image for post

However this isn’t quite true. Things ARE happening. Running on a device reveals that the UIView does have rounded corners!

Image for post
Image for post

So what is going on? The UIView is updated in the build but not in the storyboard? Well — the truth is that by default the storyboard does not update.

Image for post
Image for post
Click for Gist

It is only using the attribute @IBDesignable that gets the storyboard to update.

You will notice that once you add @IBDesignable and then switch to the storyboard the project will build and then the storyboard will change.

Fantastic!

Image for post
Image for post

Updating the simple UpdateCornersView class

The class created above isn’t all that useful. What about adding on useful functionality.

What about a nice — looking border?

Image for post
Image for post
Click for Gist

We can now update the border width and border color, using the property setters in a similar style to the above.

Image for post
Image for post
Click for Gist

Of course this also updates any compilation in the Simulator. Nice!

But did you notice something else? There is the User Defined Runtime Attributes under the class — that means that your attributes can be altered there too!

Image for post
Image for post

See it? That’s a nice update place (I think)

A UIView subclass with a gradient

Subclassing with a gradient is fun!

Image for post
Image for post

The coding?

Take a look here:

Image for post
Image for post
Click for Gist

Changing the background

After setting the background color, the storyboard is overriding the value. To prevent this issue, we can use func prepareForInterfaceBuilder() and set the background color, and there is an example of that shown in the following code block:

override func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
backgroundColor = UIColor.red
}

Conclusion:

Yes, you can look at the completed repo to see how this can be implemented in a real project. This is an extremely important area, and creating subclasses of views is a great way of seeing how your changes will alter your project in real time. That is, with UIKit.

Want to get stuck in? Certainly, I do too.

The Twitter contact:

Any questions? Get in touch with me on Twitter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store