How to render the custom UIView in interface builder (StoryBoard or xib) iOS ?

It’s possible to build a custom interface for configuring your custom controls and have them rendered in real-time while designing your project.

Yes, we can design the custom control in interface  builder with help of IBInspectable and IBDesignable.

IBDesignable:

IBDesignable custom views also debut in Xcode 6. When applied to a UIView or NSView subclass, the @IBDesignable designation lets Interface Builder know that it should render the view directly in the canvas.

IBInspectable:

IBInspectable properties provide new access to an old feature: user-defined runtime attributes. Currently accessible from the identity inspector, these attributes have been available since before Interface Builder was integrated into Xcode. They provide a powerful mechanism for configuring any key-value coded property of an instance in a NIB, XIB, or storyboard

Steps

1) Add a new visual class.

2) Add the attribute IB_DESIGNABLE above the line beginning with @interface.

Example:

IB_DESIGNABLE

@interface SFChart : UIView

3) Include the attribute IBInspectable with the declarations of properties that store values.

Example :

@property (nonatomic) IBInspectable NSNumber * lineWidth;

We have some limitation for IBInspectable

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
  • nil.

 More details refer below links:

https://developer.apple.com/library/ios/recipes/xcode_help-IB_objects_media/Chapters/CreatingaLiveViewofaCustomObject.html

http://nshipster.com/ibinspectable-ibdesignable/