英文原文地址

在 Xcode 的舊版本中，試圖創(chuàng)建一個自定義控件，并不是很容易，因為在IB中，并不能實時預覽到你的設計成果，只能在模擬器中測試。對于設計一個單一組件，可能需要花費大量時間。

Xcode6 的發(fā)布，蘋果為開發(fā)者構(gòu)建自定義控件推出了新功能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中，這就是一個更改屬性值更簡單的方法。

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顏色值，只需打開調(diào)色板和切換到滑塊標簽來改變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"。

創(chuàng)建自定義View類

在自定義類中插入以下代碼:

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)這些屬性:

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)
}

為了保證代碼的簡潔和可讀性，我們定義了依據(jù)方法調(diào)用者傳入?yún)?shù)來繪制一個完整的圓或者半圓的公共方法。利用CAShapeLayer類可以很簡單的畫一個圓或圓弧。你可以使用strokeStart和strokeEnd屬性控制渲染的開始和結(jié)束。通過改變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畫圓弧的簡單工作原理:

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

在drawRect:方法中，我們調(diào)用了addCircle:方法三次，傳入的參數(shù)指定圓弧該怎樣畫：

畫圓弧原理

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

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

修改半徑

總結(jié)

通過本教程后，你現(xiàn)在了解了在Xcode6中如何利用IBDesignable和IBInspectable實時預覽界面。利用這個新特性，你可以更高效創(chuàng)建自定義組件。

RainbowDemo地址