Configure and Inspect Custom Views with Interface Builder

Developing custom views for your iOS project and want to visualize your updates immediately?  Just want to configure some properties directly in Interface Builder?  Check out IBInspectable and IBDesignable.

When working with views in Xcode you have a couple options for configuration.  Some people prefer to build their view programatically.  There’s also Interface Builder which allows you to create views with a GUI.  Interface Builder is pretty impressive but out-of-the-box it doesn’t really give you a clear example of what your views may look like when running your app.

IBInspectable and IBDesignable are attributes that you can add to your custom view’s interface.  Adding these attributes will add new functionalities to Interface Builder when working with your view.  The two each serve their own purpose and don’t necessarily need to be used for the same view, but they do play so well together.

IBInspectable

IBInspectable is designed to bring customization options into IB.  You can declare custom view properties as being IBInspectable like so:

@property (nonatomic) IBInspectable CGFloat borderWidth;

By doing this, Interface Builder will create a new section for all attributes you’ve labeled as inspectable in the aptly named attributes inspector.

Basically what this does is give a new interface to an older component of Interface Builder, the ‘user defined runtime attributes’, which can be found in the identity inspector for your view.

Supported IBInspectable types

• Int
• CGFloat
• Double
• String
• Bool
• CGPoint
• CGSize
• CGRect
• UIColor
• UIImage

This isn’t magic though… having a borderWidth property and setting a value in IB won’t automatically make it so.  You still need to do something with this value in your code… like when you initialize your view.  For info on initializing and drawing of views, check the docs HERE.

Objective-C example:

#import "IBDBorderButton.h"

@interface IBDBorderButton ()
@property (nonatomic) IBInspectable CGFloat borderWidth;
@property (nonatomic) IBInspectable UIColor borderColor;
@end

@implementation IBDBorderButton

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self != nil) {
        [self setDefaultValues];
    }
    return self;
}
- (id)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self != nil) {
        [self setDefaultValues];
    }
    return self;
}
- (void)setDefaultValues { 
    self.layer.borderWidth = self.borderWidth;
    self.layer.borderColor = self.borderColor;
}
- (void)setBorderWidth:(CGFloat)borderWidth {
    if (_borderWidth != borderWidth) {
    _borderWidth = borderWidth
    }
}
- (void)setBorderColor:(UIColor *)borderColor {
    if (_borderColor != borderColor) {
    _borderColor = borderColor
    }
}

In the example above, IBDBorderButton is a customized subclass of UIButton.  When the view is drawn, it will be given a border with a width and color – of which you would have configured in InterfaceBuilder.  IBInspectable alone won’t show you what your initialized view will look like.  For that you need…

IBDesignable

The job of IBDesignable is to enable live previewing of your custom view right in Interface Builder… that’s it.  With IBDesignable there’s no need to continually re-run your app while making minor tweaks to your view.  Declare your class as IBDesignable, setup any configurations you want (likely with the help of IBInspectable), and take a peek in Interface Builder. Done deal.

#import <UIKit/UIKit.h>

IB_DESIGNABLE
@interface IBDBorderButton : UIButton

@end

Adding a border to a view is only the beginning of what can be done with these tools.  Check the supported inspectable types above and start experimenting by building a view of your own.  To download an example written in objective-c that you can mess around with, go HERE. For more info, check out some documentation from Apple HERE.