Short description guide for implementing IBInspectible & IBDesignale in Xcode.

1. Presenter Intro.
IBDesignable and IBInspectable
By: Gagan Vishal Mishra

2. Introduction
IBDesignable & IBInspectable
2
• In Xcode 6, Apple has introduced the live rendering feature of Interface Builder
that allows developer to design and inspect a custom view on the Interface
Builder canvas.
• This feature provides ability to preview and modify custom components at design
time via @IBDesignable and @IBInspectable.
• IBDesignable and IBInspectable are related to each other, first one applies to the
class definition, the second one applies to the properties.
• Every time you open the Interface Builder, Xcode quickly compiles the nib. This
uses the initializers and the drawing methods to update the xib/storyboard in real
time.

3. IBDesignable
IBDesignable & IBInspectable
3
• Prefixing class with the @IBDesignable keyword to inform Interface Builder that
the class instances will try to design themselves when added to the storyboard.
• Adding a class with the @IBDesignable keyword allows compiler that any
problems can be debugged without compiling and running the whole project. To
kick off a debugging session right in place
1. Simply set a breakpoint in your code.
2. Select the view in Interface Builder.
3. Choose Editor ➔ Debug Selected Views.

4. IBDesignable
IBDesignable & IBInspectable
4
IBDesignable uses the initializers and the drawing methods to update the
xib/storyboard in real time. IBDesignable attribute can be added to the class
declaration, class extension, or category for a custom view. It can be added as below
Objective-C
IB_DESIGNABLE
@interface YourView: UIView
Swift
@IBDesignable
class YourView: UIView

5. IBDesignable
IBDesignable & IBInspectable
5
Some time the custom view won’t have the full data of the app when rendered in
Interface Builder, we may need to generate the data later for displaying in view e.g.
user image from server etc. There are two ways to implement it
1.prepareForInterfaceBuilder() : compiles with the rest of your code but is only
executed when your view is being prepared for display in Interface Builder.
2.TARGET_INTERFACE_BUILDER: Add run time condition check
#if !TARGET_INTERFACE_BUILDER
// this code will run in the app itself
#else
// this code will execute only in IB
#endif

6. IBInspectable
IBDesignable & IBInspectable
6
• Prefixing any properties of the class with @IBInspectable, we ensure that
Interface Builder can read and write the value of these properties directly in the
inspector view.
• These properties will allow you to change the outlet class in real time.
• Properties can be created as below
Objective-C
@property (nonatomic) IBInspectable
Type * yourVariable;
Swift
@IBInspectable var yourVariable: Type()
=Type()

7. IBInspectable
IBDesignable & IBInspectable
7
• Only a limited data types can be set to IBInspectable
1. Int
2. CGFloat
3. Double
4. String
5. Bool
6. CGPoint
7. CGSize
8. CGRect
9. UIColor
10. UIImage

8. IBInspectable
IBDesignable & IBInspectable
8
• Making Existing Types Inspectable: Built-in Cocoa types can also be extended to
have inspectable properties beyond the ones already in Interface Builder’s
attribute inspector. If you like rounded corners then we create an extension for
UIView as below
extension UIView {
@IBInspectable var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
layer.masksToBounds = newValue > 0
}
}
}

9. 9
Thank you !