Friday, 27 November 2015

IBInspectable and IBDesignable in action

Apple has introduced an awesome feature called IBInspectable and IBDesignable with xCode6, but few of people is using this a productive and awesome feature.

Let's start!

  • IBInspectable: A property that provides access of user defined runtime attributes, so now you can update all user defined runtime attributes from "Attribute Inspector".
    - By adding IBInspectable property in your file you can see that in Interface builder instantly.

  • IBDesignable: This will notify the interface builder to render view in canvas live, no need to run and check borderWidth,cornerRadius etc.

  1. IBInspectable,
     - Currently these types are supported as IBInspectable.

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

    2. IBDesignable,

    -  In Swift adding @IBDesignable keyword before class declaration does everything to render view live on Interface Builder,


Use it:
  • Create UIView subclass and add this below code there.
CustomView.swift

import UIKit

@IBDesignable
class CustomView: UIView {
    
@IBInspectable var cornerRadius: CGFloat = 0{
    didSet{
       layer.cornerRadius = cornerRadius
       layer.masksToBounds = cornerRadius > 0
     }
}

@IBInspectable var borderWidth: CGFloat = 0{
       didSet{
       layer.borderWidth = borderWidth
     }
}

@IBInspectable var borderColor: UIColor?{
       didSet{
       layer.borderColor = borderColor!.CGColor
     }
}

@IBInspectable var layerBackgroundColor: UIColor?{
        didSet{
       layer.backgroundColor = layerBackgroundColor?.CGColor
     }
   }
}


  • Here didSet is Swift property observer and called whenever a value changes.
  • Now, go to your storyboard or xib and add one UIView object
  • Then go to file inspector of UIView and add class name "CustomView"
  • Now go to Attribute inspector and see IBInspectable and IBDesignable in action.