Member preview

A storyboard is worth a thousand words

How @IBDesignable and @IBInspectable can help you speed up iOS front-end development

If you’re used to work in Sketch and you’ve never approached any kind of software development, you should be used to the concept of immediacy and the fact that the changes you make to your design apply directly and straightaway to your artboard. There’s no time gap in between your action and your eyes seeing the result.
In the code world though this is often not the case and people working in it accept the fact that some undefined time (seconds or many minutes) will pass in between a change in the code and the output ready to appear in front of their eyes.

This time gap is mainly due to the code being slowly compiled by the program used to develop and build the software itself.

The purpose of this post is to help you create a UI component (for example a button) and remove that annoying wasted time in between from when you edit to when you see the result.

You’re going to achieve this is by using @IBDesignable and @IBInspectable.
I’ll explain what they are in a moment, but for now, just know that these 2 friends combined serve the purpose of enhancing efficiency by replacing an interface that requires you to type code with one made of simple UI controllers that you can see and use directly to tweak your design in Xcode.


The following tutorial is easy to put in practice and can provide great achievements for 2 different type of people:

  1. If you’re a designer who wants to start coding, this is the perfect first step for you as it’s going to be very simple and useful at the same time.
  2. If you already know how to code, this will still help you improve your efficiency and save lots of time when developing UI components. Either if you need to speed up your coding process or you just want to make it easier for everyone in the future to tweak your work, you’re reading the right post.
Efficiency is always a must in whatever job or task you’re trying to accomplish.

If you’re impatient to start, skip to the actual tutorial down here. If you’re reading this while sipping a cup of tea, then you might take some time to understand what this magic is about and read the following short intro paragraphs.


Oh, Those @ Thingys

Before actually using them, let’s understand what @IBDesignable and @IBInspectable are.
To keep it short: @IBDesignable and @IBInspectable are 2 of the many attributes (otherwise known in the developers community as “Oh, Those @ Thingys”) that Swift offers.
Attributes are used to provide more information that can dictate everything from compiler warnings to how something is handled in memory.

All you need to know at this stage is that they’ll allow us to create custom UI controllers in our Xcode Utilities panel, like these ones:

Think about making your own sketch controllers in Xcode.

If you’ve played around with Xcode storyboards before, you know that not everything is customisable from the default interface. With the @IBDesignable and @IBInspectable attributes, we can bring more customisation directly to the storyboards, without the need of rebuilding the app on the simulator to see the results of a change.

As said above: UI controllers like in Sketch, brought in Xcode. Which translates into more efficiency.


Ok, but what are we EXACTLY going to do?

We’re going to create a button that is fully customisable from the Xcode User Interface and that won’t require any code to be modified. We will also be able to see the preview of it in real time directly in the storyboard without having to rebuild or rerun the app in our phones or simulators.

For the purpose of this tutorial, the properties that we want to see and customise directly in the Storyboard for our button are:
1) border colour
2) border thickness (a.k.a. border width)
3) border radius
(you can think of any other property that the Xcode Attributes Inspector doesn’t provide already by default)


Insert Coin and Press Start

Assuming you know how to start a new project in Xcode (just use the Single View App from the templates), let’s jump onto the fun part.

The first thing we need to do is to create a subclass for the element we want to edit in the storyboard. Since our purpose is to create and and play around with a button, let’s create a custom class that extends from UIButton:

1- Create a new file and choose Cocoa Touch Class:

2- select UIButton from the subclass drop menu and give it a name:

You can delete the comments that print by default, and you should have your clean UIButton subclass:


Now, I know I’ve said that we wouldn’t need to type code to customise our button, but keep in mind that every big achievement and has its little efforts.
In our case it’s just a few lines of code to tell the storyboard interpreter what to do with our button when we’re going to edit it from the Xcode UI instead than using code.

Little code, lots of time saved

Before we forget, add the attribute @IBDesignable to our class by typing it in front of the class declaration:

This is very easy to forget, but it’s fundamental as otherwise the storyboard won’t be able to communicate properly with the code and won’t build the results in real time.

IBInspectable

To make the magic possible, we’ll now use the other attribute mentioned before: @IBInspectable.
Every IBInspectable property we’ll add in code, will result in a field in the storyboard attributes that we can control from the UI.

The possible types for IBInspectable properties are:

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

You can investigate all these properties in the Swift Documentation provided by Apple.
In our case we’ll use only 2:
- UIColor for the border colour
- and CGFloat for the border width and radius.

Inside the class, start by adding a variable with the @IBInspectable attribute and give it the default value of your choice (typically 0 or clear/no colour)

@IBInspectable var borderColor: UIColor = UIColor.clear {
}

Then within the variable, set the border colour of the button to be any of the colours we’re going to choose from the Storyboard Inspector. The result should be like this:

@IBInspectable var borderColor: UIColor = UIColor.clear {
   didSet {
layer.borderColor = borderColor.cgColor
}
}

Let’s repeat this for each of the remaining properties we’ve decided at the beginning (border width and border radius):

@IBInspectable var borderWidth: CGFloat = 0 {
   didSet {
layer.borderWidth = borderWidth
}
}
@IBInspectable var cornerRadius: CGFloat = 0 {
   didSet {
layer.cornerRadius = cornerRadius
}
}

And…we’re done with the coding part. Quite quick and painless.

This should be the class in full:

Now let’s finally move on to the storyboard file (by default it’s called Main.storyboard and you can find it in the Project Navigator on the left).


Show me the magic

1- Open the storyboard and drag a UIButton on it from the templates you can find in the bottom right part of the Xcode interface:

2- Name the button as you like by double clicking on it + give the button the width and height you prefer from the Size inspector:

3- Go to the Identity inspector (the 3rd icon that looks like a newspaper) and set the class to be the same subclass that we created before in code:

REMEMBER: the class name to specify here is the same UIButton subclass you created in code at the beginning of this tutorial.

4- Finally click on the Attribute inspector (the tab/icon to the right of the Identity inspector) and you’ll see our 3 special attributes we created before: Border Color, Border Width and Border Radius.

(If you’re new to Xcode or Swift, feel free to check the rest of the long list of attributes that Xcode already offers by default).


Final Result

For nicer results, first add a background and tint (text) colour to the button and then start playing with the new 3 attributes we just created:

As you can expect, if you give a round corner half the height of your button you can easily achieve a rounded button:

As you can see from the GIFs, the results of what we change show up immediately in the storyboard and Xcode doesn’t need to rebuild the whole app to display it (as it would normally happen instead if we wouldn’t have created special IBInspectables).


Closing up

Designers talk a different language than developers and @IBDesignable and @IBInspectable are a great tool to fill some of that gap.
In the same way you applied this tutorial to a button, you can put it in practice with any UIView or subclasses of it, so there’s a number of possibilities!

You can download the project of this tutorial from my GitHub.
Feel free to play around with it.

If you enjoyed the reading and/or found this article useful, please show some claplove 👏 👏 !
Find me on
Dribbble, Twitter or just anywhere else.

Like what you read? Give Matteo Giuzzi a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.