Creating a Custom View That Renders in Interface Builder

Design a custom view in Interface Builder while editing the view’s code in the assistant editor.

1. Add a new visual class to your app.
   For the Cocoa Touch framework, for example, choose File > New > File and select the Cocoa Touch Class template. Click Next. Choose UIView from the Subclass pop-up menu, and type a name for your class in the Class field. (For an OS X app, select the Cocoa Class template, and choose NSView from the Subclass pop-up menu.)
   
   

   

   Click Next, and then click Create.
2. Select the header file for the class in the Xcode project navigator, and add the attribute IB_DESIGNABLE above the line beginning with @interface.
   For example, the header file for a Cocoa Touch class named MRButton would look like the following lines of code:
   

   IB_DESIGNABLE

   @interface MRButton : UIButton

   @property (nonatomic, strong) IBInspectable UIColor *strokeColor;

   @property (nonatomic, strong) IBInspectable UIColor *lineColor;

   @property (nonatomic) MRButtonType type;

   @end
3. In the Xcode project navigator, select a storyboard or xib file.
   The file’s contents open in Interface Builder.
4. Drag a View object (for an iOS app) or a Custom View object (for an OS X app) from the Object library to the Interface Builder canvas.
   (To open the Object library, choose View > Utilities > Show Object Library. Scroll to—or type in the filter field for—the View or Custom View object in the library.)
5. Select the view object, and choose View > Utilities > Show Identity Inspector.
6. Enter the name of the class for your custom view in the Class field of the Identity inspector (in the Custom Class area).
   Your custom view overrides the selected object. In the following screenshot, the custom class MRButton overrides the selected view object:
   
   

   

7. Choose View > Assistant Editor > Show Assistant Editor, and use the assistant’s jump bar to navigate to the implementation file for your custom view.
   (See Using the Jump Bar to Navigate Your Workspace for instructions on using the jump bar.)
8. Write the code for your custom view.
   While you write your code in the source editor, you can view the results in Interface Builder.
   
   

   

   As you make changes to your code, Interface Builder rebuilds and rerenders your custom view. (See Defining a Custom View in View Programming Guide for iOS or Creating a Custom View in View Programming Guide for information about writing the code for your custom view.)

   

   To set up individual, inspectable instances of your class, create inspectable properties, as described in the following steps. This procedure also allows Interface Builder to quickly render changes to your custom view.
9. Choose View > Assistant Editor > Add Assistant Editor, and use the assistant editor’s jump bar to navigate to the header file for your custom view.
   You can observe your custom view on the Interface Builder canvas while simultaneously editing the view’s implementation and header files in the assistant editors.
10. Include the attribute IBInspectable with the declarations of properties that store values.
    In the screenshot below, the variables _lineThickness and _strokeColor are used in the implementation file in the upper assistant editor, while the properties are declared in the header file in the lower assistant editor.
    
    

    

11. With the custom view selected in Interface Builder, choose View > Utilities > Show Attributes Inspector.
    Controls for changing the inspectable properties appear at the top of the inspector. The screenshot shows how the properties strokeColor and lineThickness appear in the inspector.
    
    

    

12. Change the values of the properties directly in the Attributes inspector.
    Interface Builder quickly renders updates to the view.
    
    

    

The Interface Builder Live Rendering feature allows you to design and inspect a custom view on the Interface Builder canvas. With this feature, you can incrementally refine your drawing code while visually confirming the changes on the Interface Builder canvas. When you add the IB_DESIGNABLE attribute to the class declaration, class extension, or category for a custom view, Interface Builder renders your custom view on the canvas. When you make changes to your code, Interface Builder rebuilds your custom view and rerenders your custom view. By using the IBInspectable attribute to declare variables as inspectable properties, you allow Interface Builder to quickly rerender your custom view as you change the values of these properties in the Attributes inspector. You can attach the IBInspectable attribute to any property in a class declaration, class extension, or category for any type that’s supported by the Interface Builder defined runtime attributes: boolean, integer or floating point number, string, localized string, rectangle, point, size, color, range, and nil. If you need to create code for a custom view that runs only in Interface Builder, call that code from the method prepareForInterfaceBuilder. For example, while designing an app that uses the iPhone camera, you might want to draw an image that represents what the camera might capture. Although it’s compiled for runtime, code called from prepareForInterfaceBuilder never gets called except by Interface Builder at design time. You can use the preprocessor macro TARGET_INTERFACE_BUILDER to specify code for inclusion with or exclusion from your custom view class.

#if !TARGET_INTERFACE_BUILDER

// connect to the server

#else

// don't connect; instead, draw my custom view

#endif

Download source code.