NEW: Subscribe to Hacking with Swift+ and accelerate your learning! >>

How to render example content using prepareForInterfaceBuilder()

Swift version: 5.2

Paul Hudson    @twostraws   

Whenever you create a custom UIView subclass using @IBDesignable, it’s usually a good idea to provide it with some sample content so it can render meaningfully at design time.

For example, here’s a simple ShapeView class that renders a UIBezierPath inside a view, using CAShapeLayer:

@IBDesignable class ShapeView: UIView {
    @IBInspectable var strokeColor: UIColor = UIColor.black
    @IBInspectable var fillColor: UIColor = UIColor.clear
    var path: UIBezierPath?

    override class var layerClass: AnyClass {
        return CAShapeLayer.self
    }

    override func layoutSubviews() {
        guard let layer = layer as? CAShapeLayer else { return }
        layer.path = path?.cgPath
        layer.strokeColor = strokeColor.cgColor
        layer.fillColor = fillColor.cgColor
    }
}

While that might work well enough at runtime, you won’t be able to see anything when used with Interface Builder because it relies on a bezier path being set. So, while you can adjust the stroke and fill colors all you want, you can’t see how those changes look.

To fix this, Xcode lets us add a special method in the view called prepareForInterfaceBuilder(). If present, this is called by Interface Builder when your custom view is being drawn, and it’s your chance to provide some example content so others can see how it looks.

In this instance, setting the path property to a default shape does the job neatly:

override func prepareForInterfaceBuilder() {
    let drawRect = CGRect(x: 0, y: 0, width: 128, height: 128)
    path = UIBezierPath(rect: drawRect)
}

This method is only called at design time, so you don’t have to worry about it being run in shipping code.

Hacking with Swift is sponsored by Instabug

SPONSORED Are you tired of wasting time debugging your Swift app? Instabug’s SDK is here to help you minimize debugging time by providing you with complete device details, network logs, and reproduction steps with every bug report. All data is attached automatically, and it only takes a line of code to setup. Start your free trial now and get 3 months off exclusively for the Hacking with Swift Community.

Start your free trial!

Sponsor Hacking with Swift and reach the world's largest Swift community!

Available from iOS

Similar solutions…

About the Swift Knowledge Base

This is part of the Swift Knowledge Base, a free, searchable collection of solutions for common iOS questions.

BUY OUR BOOKS
Buy Pro Swift Buy Swift Design Patterns Buy Testing Swift Buy Hacking with iOS Buy Swift Coding Challenges Buy Swift on Sundays Volume One Buy Server-Side Swift (Vapor Edition) Buy Advanced iOS Volume One Buy Advanced iOS Volume Two Buy Advanced iOS Volume Three Buy Hacking with watchOS Buy Hacking with tvOS Buy Hacking with macOS Buy Dive Into SpriteKit Buy Swift in Sixty Seconds Buy Objective-C for Swift Developers Buy Server-Side Swift (Kitura Edition) Buy Beyond Code

Was this page useful? Let us know!

Link copied to your pasteboard.