在 Xcode 的舊版本中大磺，試圖創(chuàng)建一個自定義控件贡歧，并不是很容易滩租，因為在IB中，并不能實時預覽到你的設計成果利朵，只能在模擬器中測試律想。對于設計一個單一組件，可能需要花費大量時間绍弟。
Xcode6 的發(fā)布技即，蘋果為開發(fā)者構建自定義控件推出了新功能IBDesignable和IBInspectable，允許在IB中實時預覽設計成果樟遣。很明顯而叼，這會給實際開發(fā)提升很高效率。
在本教程中豹悬，將介紹IBDesignable IBInspectable葵陵，以及展示如何利用這個新功能。除過創(chuàng)建demo示例沒有更好地方式來闡述這一新特性瞻佛，因此脱篙，創(chuàng)建一個"Rainbow"自定義界面。
IBDesignable和IBInspectable
使用IBDesignable和IBInspectable涤久，開發(fā)者創(chuàng)建界面(或視圖)可以實時呈現(xiàn)在IB中涡尘。一般來說，為了使用這個新特性响迂，你需要做的是創(chuàng)建一個UIView或者UIControl的子類考抄，然后在定義類的前面加上@IBDesignable關鍵字。如果是OC蔗彤，使用IB_DESIGNABLE宏川梅。下面是Swift示例代碼:
@IBDesignable
class Rainbow: UIView {
}在Xcode舊版本中疯兼，你可以在IB中編輯User Defined Runtime Attributes來改變一個對象的屬性(例如:layer.cornerRadius)，問題是你需要確切知道屬性名贫途。IBInspectable只需要一步吧彪，對一個可視化類的屬性前面加上IBInspectable關鍵字前綴，該屬性會在暴露在IB中丢早，這就是一個更改屬性值更簡單的方法姨裸。
你如果使用Swift開發(fā)app，你需要做的只是在你選擇的屬性前面加上@IBInspectable關鍵字怨酝，下面是個示例代碼片段:
@IBInspectable var firstColor: UIColor = UIColor.blackColor() {
// 值改變時更新UI
}創(chuàng)建Xcode項目
創(chuàng)建一個新的Xcode項目傀缩，選擇Single View Application模板，起名為RainbowDemo农猬，在此項目中赡艰，將使用Swift語言，因此斤葱，創(chuàng)建項目時不要忘記勾選慷垮。
完成后，選擇Main.storyboard文件揍堕，設置View Controller的根視圖View的背景顏色Hex Color值為38334C(或者任何你想要的顏色)料身。然后從對象庫中拖一個View放進View Controller，設置它的大小Width為600衩茸，Height為434惯驼，然后把它放在根視圖的中心，設置新視圖View和根視圖相同背景顏色递瑰。
提示：如果想改變RGB顏色值，只需打開調色板和切換到滑塊標簽來改變RGB值
在Xcode6中隙畜，為了適配各個iOS設備抖部，你必須為視圖View配置自動布局約束。對于簡單的約束议惰，你可以在自動布局菜單單擊Issues選項慎颗，選擇Add Missing Contraints，Xcode將自動為View添加布局約束言询。
創(chuàng)建自定義View類
現(xiàn)在俯萎，你已經(jīng)在storyboard中創(chuàng)建了一個View，是時候創(chuàng)建自定義View類了运杭。使用Cocoa Touch Class文件模板夫啊，創(chuàng)建自定義類文件，繼承自UIView辆憔，起名為"Rainbow"撇眯。
在自定義類中插入以下代碼:
import UIKit
class Rainbow: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
}
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
}如前所述报嵌，這個可視化類是UIView的子類，讓自定義類實時呈現(xiàn)熊榛，需要override上述兩個方法锚国。然后，打開輔助編輯器玄坦，更改新拖的View的自定義類為Rainbow類血筑。
實現(xiàn)IBDesignable控制
為了實現(xiàn)實時預覽，在自定義類前面加一個前綴@IBDesignable關鍵字
@IBDesignable
class Rainbow: UIView {
...
}這個關鍵字確實簡單煎楣，但是這簡單地關鍵字將使你的開發(fā)更加容易豺总。接下來，添加一些設置顏色的屬性转质。在Rainbow類中插入以下代碼:
@IBInspectable var firstColor: UIColor = UIColor(red: (37.0/255.0), green: (252.0/255), blue: (244.0/255.0), alpha: 1.0)
@IBInspectable var secondColor: UIColor = UIColor(red: (171.0/255.0), green: (250.0/255), blue: (81.0/255.0), alpha: 1.0)
@IBInspectable var thirdColor: UIColor = UIColor(red: (238.0/255.0), green: (32.0/255), blue: (53.0/255.0), alpha: 1.0)在這里园欣，我們預先定義每個屬性一個默認顏色，每次用戶更改它們的值時會重繪視圖休蟹。更重要的是沸枯，我們?yōu)槊總€屬性加了一個@IBInspectable關鍵字前綴，現(xiàn)在去IB的屬性檢查器赂弓，你可以直觀地發(fā)現(xiàn)這些屬性:
很酷绑榴，對吧？IBInspectable通過指示屬性盈魁，你可以使用顏色選擇器可視化地編輯它們翔怎。
在Rainbow類中，為了在屏幕上畫一個圓杨耙，插入以下代碼:
func addOval(lineWidth: CGFloat, path: CGPathRef, strokeStart: CGFloat, strokeEnd: CGFloat, strokeColor: UIColor, fillColor: UIColor, shadowRadius: CGFloat, shadowOpacity: Float, shadowOffset: CGSize) {
let arc = CAShapeLayer()
arc.lineWidth = lineWidth
arc.path = path
arc.strokeStart = strokeStart
arc.strokeEnd = strokeEnd
arc.strokeColor = strokeColor.CGColor
arc.fillColor = fillColor.CGColor
arc.shadowRadius = shadowRadius
arc.shadowOpacity = shadowOpacity
arc.shadowOffset = shadowOffset
layer.addSublayer(arc)
}為了保證代碼的簡潔和可讀性赤套，我們定義了依據(jù)方法調用者傳入?yún)?shù)來繪制一個完整的圓或者半圓的公共方法。利用CAShapeLayer類可以很簡單的畫一個圓或圓弧珊膜。你可以使用strokeStart和strokeEnd屬性控制渲染的開始和結束容握。通過改變strokeEnd的值在0.0到1.0之間，你可以繪制一個完整或者部分的圓车柠。其余的屬性是只是用于設置渲染顏色剔氏，陰影顏色等，在CAShaperLayer官方文檔中可以查看更詳細的所有可用屬性竹祷。
接下來谈跛，添加以下方法:
override func drawRect(rect: CGRect) {
// 添加圓弧
addCircle(80, capRadius: 20, color: firstColor)
addCircle(150, capRadius: 20, color: secondColor)
addCircle(215, capRadius: 20, color: thirdColor)
}
func addCircle(arcRadius: CGFloat, capRadius: CGFloat, color: UIColor) {
let x = CGRectGetMidX(bounds)
let y = CGRectGetMidY(bounds)
// 底部圓弧
let pathBottom = UIBezierPath(ovalInRect: CGRectMake((x - (arcRadius/2)),
(y - (arcRadius/2)), arcRadius, arcRadius)).CGPath
addOval(20.0, path: pathBottom, strokeStart: 0, strokeEnd: 0.5,
strokeColor: color, fillColor: UIColor.clearColor(),
shadowRadius: 0, shadowOpacity: 0, shadowOffset: CGSizeZero)
// 中間圓弧
let pathMiddle = UIBezierPath(ovalInRect: CGRectMake((x - (capRadius/2)) - (arcRadius/2),
(y - (capRadius/2)), capRadius, capRadius)).CGPath
addOval(0.0, path: pathMiddle, strokeStart: 0, strokeEnd: 1.0,
strokeColor: color, fillColor: color,
shadowRadius: 5.0, shadowOpacity: 0.5, shadowOffset: CGSizeZero)
// 頂部圓弧
let pathTop = UIBezierPath(ovalInRect: CGRectMake((x - (arcRadius/2)),
(y - (arcRadius/2)), arcRadius, arcRadius)).CGPath
addOval(20.0, path: pathTop, strokeStart: 0.5, strokeEnd: 1.0,
strokeColor: color, fillColor: UIColor.clearColor(),
shadowRadius: 0, shadowOpacity: 0, shadowOffset: CGSizeZero)
}drawRect:方法默認什么也不做，為了在自定義View中畫圓塑陵，我們override此方法來實現(xiàn)自己的繪制代碼感憾。addCircle:方法有三個參數(shù)：arcRadius，capRadius和color令花。arcRadius是圓弧的半徑吹菱，capRadius是圓弧邊緣半徑巍虫。
addCircle:方法利用UIBezierPath畫圓弧的簡單工作原理:
- 首先，在底部畫了個半圓弧
- 接下來鳍刷，在圓弧邊緣畫了一個完整的小圓
- 最后占遥，畫了另一半圓弧
在drawRect:方法中，我們調用了addCircle:方法三次输瓜，傳入的參數(shù)指定圓弧該怎樣畫：
利用IBInspectable屬性瓦胎，你可以在IB中自由改變每個圓弧的顏色，而不需要寫代碼:
顯然尤揣，你可以進一步利用@IBInspectable暴露arcRadius屬性搔啊，便可以在IB中修改繪制圓弧半徑。
總結
通過本教程后北戏，你現(xiàn)在了解了在Xcode6中如何利用IBDesignable和IBInspectable實時預覽界面负芋。利用這個新特性，你可以更高效創(chuàng)建自定義組件嗜愈。
