曾經想實現自定義的View，可以想系統自帶那樣擁有屬性，并且實時渲染，動態更新內容，現在在Xcode6終于讓你可以輕松的做到。

你不用編譯就能實時預覽，現在配置自定義界面方便多了，IBInspectable和IBDesignable使它成為可能。

IBInspectable

IBInspectable屬性提供訪問舊功能的新方法：用戶自定義的運行時屬性。從目前的身份檢查器（identity inspector）中訪問，這些屬性在Interface Builder整合到Xcode。可以通過它來配置Nib，Xib，storyboard實例中的任何鍵值編碼（key-value-coded）屬性：

runtime Attributes setting

以前想實現，只能點+號手動添加例如想給UIView添加一個圓角半徑，設置Key Path 為：layer.cornerRadius,

type為Number ，Value為4，如果使用IBInspectable只需要在@property 聲明后加上IBInspectable（或者swift 加上@IBInspectable），就可以在IB的觀察面板中（inspector pannel）里直接編輯。其他交由Xcode自動完成，屬性名字會自動分組，名稱從駝峰（camel-）轉換成 title-模式。

inspector pannel

目前可檢查屬性支持

supported ?types

備注

1.經本人親測，除NSNumber,NSRange不會產生觀察面板屬性，NSRange不會在runtime Attributes 中自動添加，其他都會自動生成。

2.支持顏色類型UIColor但是不支持CALayer的CGColor，設置顏色時只需設置UIColor，不要要設置CGColor，系統會自動將UIColor轉換，例如設置borderColor。

IBDesignable

當你應用到UIView或者UIView的子類中的時候，只需加上IBDesignable，就可以讓IB在畫布上實時渲染視圖。當你更新屬性后，視圖會自動更新不需要重新運行程序。

標記一個自定義視圖為IBDesignable，只需要在類名前面加上IB_DESIGNABLE（swift里加上@IBDesignable）。你的初始化，布置和繪制方法都將用來在畫布上渲染你的自定義視圖:

IB_DESIGNABLE

@interface CustomView :UIView {

@property (nonatomic, strong) IBInspectable UIColor *borderColor;

@property (nonatomic, assign) IBInspectable CGFloat borderWidth;

...

}

@end

實時效果：

custom view

有了這個功能，一個設計師或者開放人員可以輕松調整自定義的控件呈現。任何改變，都將立即呈現，有的想swift里面的playground功能，實現：所見即所得。

由于在 Interface Builder 中呈現自定義視圖不會有應用程序的完整上下文，你可能需要生成模擬數據以便顯示，例如一個默認用戶頭像圖片或仿制的天氣數據。有兩種方法可以為這個特殊的上下文添加代碼：

1.prepareForInterfaceBuilder() :此方法與你代碼的其余部分一起編譯，但只有當視圖正在準備在Interface Builder顯示時執行.

2.TARGET_INTERFACE_BUILDER:#if TARGET_INTERFACE_BUILDER預處理宏在 Objective-C 或 Swift 下都是工作的，它會視情況編譯正確代碼：

#if !TARGET_INTERFACE_BUILDER

? ?// this code will run in the app itself

#else

? ?// this code will execute only in IB

#endif

參考資料

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

Apple 官方介紹

Demo地址

IBInspectable_IBDesignable_Demo