簡介

@IBDesignable和@IBInspectable是iOS8的新特性，可以實時渲染在interface builder上，并且直接修改就能發生變化。
因為UIView.layer.borderWidth、borderColor、cornerRadius這些屬性在xib上是不能直接設置的，但是@IBDesignable和@IBInspectable利用運行時機制，可以把這些屬性映射到xib上，同時還可以映射自定義的屬性。
更底層的原理可以參考Nate Cook的文章

邊框button的例子

import UIKit

@IBDesignable  //@IBDesignable關鍵字用來聲明一個類是可以被設計的，可以實時渲染在interface builder 上
class BorderButton: UIButton {
  
  //@IBInspectable關鍵字用來聲明一個屬性，可以在interface builder上修改該屬性，就可以實時渲染border的變化
    @IBInspectable var borderColor: UIColor = UIColor.black {
        didSet {
            layer.borderColor = borderColor.cgColor
        }
    }
    
    @IBInspectable var opacity: Float = 0.0 {
        didSet {
            layer.opacity = opacity
        }
    }
    
    
    @IBInspectable var borderWidth: CGFloat = 0.0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }
    
    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            layer.cornerRadius = cornerRadius
        }
    }
}

下面為xib上的示例圖，可以看到右邊直接顯示了我們在BorderButton類中自定義的IBInspectable屬性，可以直接調整，就會實時渲染了

demo.png

View的陰影例子

import UIKit

@IBDesignable
class HeaderMiddleView: UIView {

    @IBInspectable var shadowColor: UIColor = UIColor.black {
        didSet {
            layer.shadowColor = shadowColor.cgColor
        }
    }
    
    @IBInspectable var shadowOpacity: Float = 0.0 {
        didSet {
            layer.shadowOpacity = shadowOpacity
        }
    }
    
    @IBInspectable var shadowOffset: CGSize = CGSize.init(width: 0, height: -3) {
        didSet {
            layer.shadowOffset = shadowOffset
        }
    }
    
    @IBInspectable var shadowRadius: CGFloat = 3.0 {
        didSet {
            layer.shadowRadius = shadowRadius
        }
    }
}