IB_DESIGNABLE and IBInspectable

From the beginning of Xcode 6, we can achieve real-time rendering of a custom view through the IB_DESIGNABLE and IBInspectable properties, the function is added in the code, you can directly view and modify custom view in Interface Builder, and run the program to see the view effect.

IB_DESIGNABLE and IBInspectable
IBDesignable& IBInspectable.gif

Here we’re talking about using IB_DESIGNABLE and IBInspectable in the Objective-C language, and if you’re in Swift, you should use @IBDesignable and @IBInspectable instead.

1 IB_DESIGNABLE

IB_DESIGNABLE is used to mark the design of custom views, which can be easily adjusted when a class definition is used to get the exact results desired. When applied to the UIView subclass, IB_DESIGNABLE can let Interface Builder know it can render directly on the canvas view, any change, either from the code or the attributes inspector, will immediately appear on the canvas. For example, in CoreGraphics in the process of drawing, the use of IB_DESIGNABLE markers in front of the class name, when we update the view in drawRect:, do not have to compile and run the application, it will immediately update the results displayed on the storyborad.

IB_DESIGNABLE and IBInspectable
IBDesignable& IBInspectable.png

Notice that the IB_DESIGNABLE above is added to the class’s implementation file (.M file) and, in addition, you can add it to the class header file (.H file), as follows:

#import < UIKit/UIKit.h> IB_DESIGNABLE @interface testView: UIView @end

2 IBInspectable

IBInspectable is used to tag attributes for observability. Using the IBInspectable attribute tag will display at the top of the attributes inspector in storyboard, allowing us to change its contents, if combined with the use of the IBDesignable, it will change the results displayed in real-time on the canvas. However, IBInspectable is not applicable to all attributes, and only the type specified in Runtime Attributes can be marked in IB. Currently, IBInspectable supports only the following types:

  • BOOL
  • NSNumber
  • NSString
  • NSRange
  • CGFloat
  • CGPoint
  • CGSize
  • CGRect
  • UIColor
  • UIImage

3 example

Here’s a simple example of how to use IB_DESIGNABLE and IBInspectable.

3.1 create projects

First, open Xcode and create a new project (File/New/Project…), select the Single View Application template in Application under the iOS column, and then click Next to fill in the project options. In Product Name, fill in IBDesignableDemo, select the language Objective-C, click Next, select the file location, and click Create to create the project.

IB_DESIGNABLE and IBInspectable
createProject.png

3.2 draw custom views

Drawing custom views generally requires creating a subclass of UIView that is implemented by overriding the drawRect: method and adding some Core Graphics graphical code.

Here, we first create a new file (File/New/File…), iOS/Source/Cocoa Touch Class and named the new CustomView class, make it become a sub class of UIView, and make sure that the language is Objective-C, click Next, then click Create to create.

IB_DESIGNABLE and IBInspectable
createView.png

Open Main.storyboard, select the controller of View, find the Custom Class column in the right side of the Identity Inspector, this kind of change to just create a CustomView class, so we will be the main view controller into our custom view.

IB_DESIGNABLE and IBInspectable
changeClass.png

Open the CustomView.m file, cancel the annotation, use UIBezierPath to draw two concentric circles in the drawRect: method, the code is as follows:

- (void) drawRect: (CGRect rect) {/ / draw the innermost circle UIBezierPath *innerPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:60 startAngle:0 endAngle:2 * M_PI clockwise:YES] [innerPath [[UIColor greenColor] setStroke]; setLineWidth:20]; [innerPath; stroke]; / / draw the outside circle UIBezierPath *outterPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:120 startAngle:0 endAngle:2 * M_PI clockwise:YES] [outterPath setLineWidth:20]; [[UIColor redColor]; setStroke]; [outterPath stroke];}

Run the program, and we’ll see the drawing in the figure below:

IB_DESIGNABLE and IBInspectable
drawCircles.png

For information about using UIBezierPath drawing, you can refer to documents or related articles.

3.3 use IB_DESIGNABLE to view the rendering results

If you do not want to run the simulator, we can add IB_DESIGNABLE in storyboard can be seen in the same rendering results, even better, when we modify the code, the contents of the storyboard will update.

Let’s first click the auxiliary editor in the upper right corner to show the storyboard on the right side of the code, as shown below:

IB_DESIGNABLE and IBInspectable
showStoryboard.gif

You can also select the View/Assistant Editor/Show Assistant Editor at the top to open the auxiliary editor.

Now we see the storyboard is blank, and then we will add IB_DESIGNABLE keyword before the implementation section, and then look at storyboard, yes, the code drawn concentric circles have been displayed:

IB_DESIGNABLE and IBInspectable
addIBDesignable.png

Try to set the drawing colors in the code to other colors!

3.4 use IBInspectable to customize attributes in storyboard

In order to set the color, we declare the properties of the two UIColor, and use IBInspectable tags to add the following code before @implementation CustomView:

#import "CustomView.h" IB_DESIGNABLE @interface CustomView / / new code (@property) (nonatomic) IBInspectable UIColor *innerColor @property (nonatomic); IBInspectable UIColor *outterColor; @end @implementation CustomView

Then the two circles are drawn to this property, and the following code is modified in the drawRect: method:

- (void) drawRect: (CGRect rect) {/ / draw the innermost circle... [self.innerColor setStroke]; [innerPath stroke]; / / draw the outer circle... [self.outterColor setStroke]; [outterPath stroke];}

Then open the property inspector, and we’ll see the properties we just declared, modify the contents of the property to other colors, and see the changes in storyboard:

IB_DESIGNABLE and IBInspectable
colorProperty.png

Next, we continue to add some properties to set the radius and width of the circle:

@interface (CustomView) @property (nonatomic) IBInspectable UIColor *innerColor @property (nonatomic); IBInspectable UIColor *outterColor; / / add new properties of @property (nonatomic) IBInspectable CGFloat innerRadius @property (nonatomic); IBInspectable CGFloat outterRadius; @property (nonatomic) IBInspectable CGFloat innerWidth @property (nonatomic); IBInspectable CGFloat outterWidth; @end

Then modify the drawRect: method to set the radius of the circle and the line width plotted to the properties above:

- (void) drawRect: (CGRect rect) {/ / draw the innermost circle UIBezierPath *innerPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:self.innerRadius startAngle:0 endAngle:2 * M_PI clockwise:YES] [innerPath [self.innerColor setStroke]; setLineWidth:self.innerWidth]; [innerPath; stroke]; / / draw the outside circle UIBezierPath *outterPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:self.outterRadius startAngle:0 endAngle:2 M_PI [outterPath setLineWidth: * clockwise:YES]; self.outterWidth]; [self.outterColor setStroke]; [outterPath stroke]};

When you open the property inspector and modify the properties, you can freely define the color, size, and width of the circle:

IB_DESIGNABLE and IBInspectable
IBDesignableDemo.gif

At this point, we’ve learned how to use IB_DESIGNABLE and IBInspectable, which saves a lot of time in drawing using the function instead of running simulators. However, it also has limitations. Generally, we use it to draw simple code. For creating complex designs, storyboard often goes out of time, in which case Playground can be a better choice.

Finally, if you have problems creating demo, you can download the IBDesignableDemo to see the full code.