What I Learned Last Week: How to Display a Custom UIKit Subclass in the Xcode Interface Builder

In my opinion, one of the most exciting aspects of iOS development is the ability to subclass and customize Apple’s UIKit classes, such as UIButton and UIImageView. A developer can create subclasses to fit the “flavor and feel” of the app they envision. However, the only way to see those wonderful customized subclasses is by running the app in the Simulator or on a hardware device, making UI design/refinement quite painful. Or, so I thought. In reality, it is rather simple to see your custom UIKit subclasses in the Xcode Interface Builder. Are you interested? If so, keep reading.

Just what kind of subclasses can a developer create? What about a rounded-corner button instead of the square-corner default button shape? Here’s an example from a recent app project I built:

import UIKit
class RoundedButton: UIButton {
     override func awakeFromNib() {
          super.awakeFromNib()
          // round the corners and clip
          layer.cornerRadius = 50.0
          clipsToBounds = true
     }
}

Unfortunately, you don’t see the result of the rounded-button shape after updating the button class to “RoundedButton” in the Interface Builder:

RoundedButton subclass in Interface Builder

But, you do see the results when you run the app in the Simulator:

RoundedButton subclass in Simulator

So how do you integrate your custom UIKit class to be visible in Xcode’s Interface Builder to streamline your design process? You’ll be pleased to know it’s not nearly as hard as you might think. Here are the basic steps:

1. Add the keyword @IBDesignable to the top of the subclass file (below the import statement(s) and before the start of the class definition.
2. Refactor the awakeFromNib() function by moving the custom class details into a new function called customizeView().
3. Add the function override func prepareForInterfaceBuilder() and include a call to super.prepareForInterfaceBuilder() at the top of the function.
4. Add a call to customizeView() to the awakeFromNib function after the call to super.awakeFromNib().
5. Add a call to customizeView() to the prepareForInterfaceBuilder function after the call to super.prepareForInterfaceBuilder.
6. Save the updated class.

Note: Be sure you save the class file before attempting to display the custom class in the Interface Builder. If you don’t save the file, the custom class will probably not display, and you’ll be troubleshooting something that is a non-issue if you had only saved the file.

Here’s what the updated class should look like after the above steps:

import UIKit
@IBDesignable
class RoundedButton: UIButton {
     override func prepareForInterfaceBuilder() {       
          super.prepareForInterfaceBuilder()
          customizeView()
     }
     override func awakeFromNib() {
          super.awakeFromNib()
          customizeView()
     }
     func customizeView() {
          // round the corners and clip
          layer.cornerRadius = 50.0
          clipsToBounds = true
     }
}

Now, when you click on the main.storyboard file to display the Interface Builder, you should see the custom class is applied and visible:

RoundedButton subclass enabled in Interface Builder

The above process enabled me to quickly experiment with changes to my subclass and see the results directly in the Interface Builder without the need to run the app. I hope you find the process helpful in your iOS development workflow.

Until next time, stay safe and keep learning!