How do you display custom UIViews in InterfaceBuilder?

Question

I seem to enjoy designing new UIViews and UIControls that implement their own -drawRect: method. This work well for me, especially when composed using UIViews in Interface Builder.

But composing them in Interface Builder is annoying because they just show up as boring plain rectangles.

It would be great if the views would actually render themselves as the built-in controls do.

Is there any way I can structure my project so that Interface Builder will render my custom views?

Answer 1

In order to do this, you actually have to create a plug-in for Interface Builder that uses your custom class. Once you create and install your plug-in, you will be able to drag and drop instances of your class (your view) onto another window/view/whatever just like any other control. To get started with creating IB Plug-Ins, please see the Interface Builder Plug-In Programming Guide. Also, I recommend taking a look at Aaron Hillegass's book, Cocoa Programming for Mac OS X. As well as being very well written and easy to understand, it has a chapter on creating your own IB Palette controls.

Answer 2

This is achievable by marking your UIView subclass with @IBDesignable. Once you do this, your custom views will render themselves in Interface Builder. You can even add parameters that can be configured by marking them as @IBInspectable. Here's a Swift example:

@IBDesignable class customView: UIView {

    @IBInspectable var count: Int = 0

}

There's an article on NSHipster that provides more detail.