Pro tip: Write custom UI objects for iOS/Mac projects with IBInspectables

 Image: Cory Bohon

If you've ever written a custom view object for inclusion in a Storyboard or XIB, you know how difficult it can be to hop between the class and Interface Builder to change properties on the custom object. While there are many settings in the Interface Builder attributes Inspector, developers have long dreamed of being able to place their custom object's properties in this section. With Xcode 6, that day has finally come. Here's how to work with IBInspectables.

What is an IBInspectable?

An IBInspectable is an attribute you can add to your existing properties in your custom views that exposes the ability to set the properties inside of Interface Builder. Using this method, you can easily set properties on your views that will be read whenever your custom object is displayed inside of an XIB or a Storyboard-backed view controller.

Setting properties this way, and then using those properties inside your custom view objects to define things like background color, size, etc., can make your development and design workflows easier. Let's look at how easily you can define these properties.

Defining IBInspectable properties

In this sample, we'll write a simple custom object that changes the background color and corner radius using IBInspectables.

To begin, open Xcode, and create a new Single View Application project from the New | Project | iOS menu. Once created, create a New File called TRSimpleView using UIView as the base by clicking File | New | File (Figure A).

Figure A

Create a new class using the Cocoa Touch Class template in the iOS file chooser.

Add the following properties to your header file (TRSimpleView.h):

@property (nonatomic, weak) IBInspectable UIColor *foregroundColor; @property (nonatomic) IBInspectable CGFloat borderRadius;

Add the following method to your TRSimpleView.m file:

- (void)drawRect:(CGRect)rect { [super drawRect:rect]; [self.foregroundColor setFill]; self.layer.cornerRadius = self.borderRadius; self.layer.masksToBounds = YES; UIRectFill(rect); }

This method will set the background color using the foregroundColor property that we defined as an IBInspectable; the borderRadius property that is defined as an IBInspectable will be used to set the corner radius on the view.

Pretty simple, right? Let's put it all together to see the true power of this tool.

Setting IBInspectable values in Interface Builder

Open the Main.storyboard file from the Xcode sidebar, and then drag and drop a UIView instance from the Object Library in the Utilities sidebar onto the single View Controller instance in the Storyboard. We'll make the width and height of this view 50 x 50, and center it inside of the view controller (Figure B).

Figure B

For the sake of this example, we'll center align the UIView on the Storyboard view controller.

After you add the view, let's configure it to be an instance of our TRSimpleView by selecting it inside of the view controller, and then clicking the Identity Inspector in the Utilities panel (Figure C). In the Class field, type TRSimpleView.

Figure C

Create a new class using the Cocoa Touch Class template in the iOS file chooser.

As soon as you do this, and then switch over to the Attributes Inspector, you will see the new IBInspectable items displayed. Because we used camel casing to name the properties, Xcode has properly parsed and displayed the names in the Inspector. In addition, because Xcode knows the types, it automatically formats the Foreground Color item to be a color picker (Figure D).

Figure D

Xcode automatically shows all of your available IBInspectable items at the top of the Attributes Inspector.

When you select the items here and then run the application, the view will spring to life with these changes (Figure E). As you can see, this makes your custom views more extensible and available to more easily change values down the road without reconstructing code.

Figure E

When running the application, everything gets put together, and the custom view is properly shown on the screen using the values set in Interface Builder.

Share your experiences and tips

Have you used IBInspectables or IBDesignables in Xcode 6? If so, how do you like them? Do you have any related tips or tricks? Let us know in the discussion.