BLACK FRIDAY SALE: Save 50% on all my Swift books and bundles! >>

How to draw custom views in Interface Builder using IBDesignable

Swift version: 5.6

Paul Hudson    @twostraws   

You've always been able to have custom views inside your apps, but if you're having a hard time visualizing how they look at design time then you should try @IBDesignable: it lets you see exactly how your custom views look inside IB, and if you combine it with @IBInspectable you can even adjust your view's design there too.

This example view draws an ellipse that fills itself. If you add this to your project, create a view, then set that view to have this custom subclass, you'll see an ellipse appear immediately. You can move the view or resize it, and the ellipse will be updated. Plus, because I used @IBInspectable you can adjust the colors and stroke width right inside the attributes inspector, helping you make sure your UI looks exactly as you expect.

@IBDesignable class EllipseView: UIView {
    @IBInspectable var strokeWidth: CGFloat = 0
    @IBInspectable var fillColor: UIColor = UIColor.black
    @IBInspectable var strokeColor: UIColor = UIColor.clear

    override func draw(_ rect: CGRect) {
        guard let context = UIGraphicsGetCurrentContext() else { return }
        let rectangle = bounds.insetBy(dx: strokeWidth / 2, dy: strokeWidth / 2)

        context.setFillColor(fillColor.cgColor)
        context.setStrokeColor(strokeColor.cgColor)
        context.setLineWidth(strokeWidth)

        context.addEllipse(in: rectangle)
        context.drawPath(using: .fillStroke)
    }
}
Hacking with Swift is sponsored by Guardsquare

SPONSORED AppSweep by Guardsquare helps developers automate the mobile app security testing process with fast, free scans. By using AppSweep’s actionable recommendations, developers can improve the security posture of their apps in accordance with security standards like OWASP.

Learn more

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

Available from iOS 8.0

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 Pro SwiftUI 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 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 Beyond Code

Was this page useful? Let us know!

Average rating: 4.0/5

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.