在Xcode6中使用IBDesignable建立自定義控件(翻譯)

英文原文地址

在 Xcode 的舊版本中，試圖建立一個自定義控件，並非很容易，由於在IB中，並不能實時預覽到你的設計成果，只能在模擬器中測試。對於設計一個單一組件，可能須要花費大量時間。

Xcode6 的發佈，蘋果爲開發者構建自定義控件推出了新功能IBDesignable和IBInspectable，容許在IB中實時預覽設計成果。很明顯，這會給實際開發提高很高效率。

在本教程中，將介紹IBDesignable IBInspectable，以及展現如何利用這個新功能。除過建立demo示例沒有更好地方式來闡述這一新特性，所以，建立一個"Rainbow"自定義界面。

---

IBDesignable和IBInspectable

使用IBDesignable和IBInspectable，開發者建立界面(或視圖)能夠實時呈如今IB中。通常來講，爲了使用這個新特性，你須要作的是建立一個UIView或者UIControl的子類，而後在定義類的前面加上@IBDesignable關鍵字。若是是OC，使用IB_DESIGNABLE宏。下面是Swift示例代碼:

@IBDesignable
class Rainbow: UIView {
}
複製代碼

在Xcode舊版本中，你能夠在IB中編輯User Defined Runtime Attributes來改變一個對象的屬性(例如:layer.cornerRadius)，問題是你須要確切知道屬性名。IBInspectable只須要一步，對一個可視化類的屬性前面加上IBInspectable關鍵字前綴，該屬性會在暴露在IB中，這就是一個更改屬性值更簡單的方法。

你若是使用Swift開發app，你須要作的只是在你選擇的屬性前面加上@IBInspectable關鍵字，下面是個示例代碼片斷:

@IBInspectable var firstColor: UIColor = UIColor.blackColor() {
   // 值改變時更新UI
}
複製代碼

建立Xcode項目

建立一個新的Xcode項目，選擇Single View Application模板，起名爲RainbowDemo，在此項目中，將使用Swift語言，所以，建立項目時不要忘記勾選。

完成後，選擇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添加布局約束。

---

建立自定義View類

如今，你已經在storyboard中建立了一個View，是時候建立自定義View類了。使用Cocoa Touch Class文件模板，建立自定義類文件，繼承自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的子類，讓自定義類實時呈現，須要override上述兩個方法。而後，打開輔助編輯器，更改新拖的View的自定義類爲Rainbow類。

---

實現IBDesignable控制

爲了實現實時預覽，在自定義類前面加一個前綴@IBDesignable關鍵字

@IBDesignable 
class Rainbow: UIView {
    ...
}
複製代碼

這個關鍵字確實簡單，可是這簡單地關鍵字將使你的開發更加容易。接下來，添加一些設置顏色的屬性。在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)
複製代碼

在這裏，咱們預先定義每一個屬性一個默認顏色，每次用戶更改它們的值時會重繪視圖。更重要的是，咱們爲每一個屬性加了一個@IBInspectable關鍵字前綴，如今去IB的屬性檢查器，你能夠直觀地發現這些屬性:

很酷，對吧？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)
}
複製代碼

爲了保證代碼的簡潔和可讀性，咱們定義了依據方法調用者傳入參數來繪製一個完整的圓或者半圓的公共方法。利用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此方法來實現本身的繪製代碼。addCircle:方法有三個參數：arcRadius，capRadius和color。arcRadius是圓弧的半徑，capRadius是圓弧邊緣半徑。

addCircle:方法利用UIBezierPath畫圓弧的簡單工做原理:

1. 首先，在底部畫了個半圓弧
2. 接下來，在圓弧邊緣畫了一個完整的小圓
3. 最後，畫了另外一半圓弧

在drawRect:方法中，咱們調用了addCircle:方法三次，傳入的參數指定圓弧該怎樣畫：

利用IBInspectable屬性，你能夠在IB中自由改變每一個圓弧的顏色，而不須要寫代碼:

顯然，你能夠進一步利用@IBInspectable暴露arcRadius屬性，即可以在IB中修改繪製圓弧半徑。

---

總結

經過本教程後，你如今瞭解了在Xcode6中如何利用IBDesignable和IBInspectable實時預覽界面。利用這個新特性，你能夠更高效建立自定義組件。

RainbowDemo地址