使用 Swift 和 Xcode 6 制作超棒的 UI 組件

本文翻譯自：http://www.weheartswift.com/make-awesome-ui-components-ios-8-using-swift-xcode-6/

原作者：Andrei Puni

譯者：@nixzhu

Apple 在 Xcode 6 里介紹了兩個新的 Interface Buidler 聲明屬性：IBInspectable 和 IBDesignable；IBInspectable 將類的屬性暴露在 Interface Buidler 的 Attribute Inspector 里，而用了 IBDesignable 后就可以實時更新視圖了！這簡直就像魔法！

我實在等不及看到你會做出怎樣炫酷的東西來。

我們也制作了一個簡短的視頻（需KX上網）來介紹 IBInspectable 和 IBDesignable，大概只需要 10 分鐘你就可以走完所有的步驟。而代碼在 GitHub 上。

IBInspectable

我目前找到的，IBInspectable 可以處理的類型如下：

• Int
• CGFloat
• Double
• String
• Bool
• CGPoint
• CGSize
• CGRect
• UIColor
• UIImage

例子：

class OverCustomizableView : UIView {
    @IBInspectable var integer: Int = 0
    @IBInspectable var float: CGFloat = 0
    @IBInspectable var double: Double = 0
    @IBInspectable var point: CGPoint = CGPointZero
    @IBInspectable var size: CGSize = CGSizeZero
    @IBInspectable var customFrame: CGRect = CGRectZero
    @IBInspectable var color: UIColor = UIColor.clearColor()
    @IBInspectable var string: String = "We Swift"
    @IBInspectable var bool: Bool = false
}

在對應 View 的 Attribute Inspector 的頂部，你將看到：

做完這些就添加了一些用戶定義的運行時屬性，這樣就可以在 IB 里設置的它們的初始值，之后視圖加載時就可以使用了。

創建好的運行時屬性：

IBDesignable

現在到了有趣的的部分了。IBDesignable 告訴 Interface Builder 它可以加載視圖并渲染視圖；而要這個功能正常工作，視圖類必須位于一個框架（framework）內。但這并不會帶來很大的不便，我們馬上就會看到。我認為在后面，Interface Builder 將 UIView 代碼轉換為 NSView 代碼，這樣它就能動態加載框架并渲染其組件了。

譯者注：估計不久我們就會看到大量的第三方 UI 組件，都可以直接在 IB 里顯示和修改，更加直觀。

創建一個新項目

打開 Xcode 6，創建一個新的“Single Page Application”并選擇 Swift 作為編程語言。

添加一個新的 target 到項目中

從導航欄選擇你的項目文件并通過點擊 + 添加一個新的 target：

選擇 Framework & Application Library 并選中 Cocoa Touch Framework：

將其命名為 MyCustomView。Xcode 會自動鏈接 MyCustomView.framework 到你的項目中。

創建一個自定義個視圖類

創建一個新的 Swift 文件并將其添加到 MyCustomView 框架。

在框架文件夾上右鍵單擊：

選擇 Cocoa Touch 文件：

將其命名為 CustomView，且為 UIView 的子類：

在上面的視圖控制器類里編寫一個類定義。

使用 @IBDesignable 關鍵字來告訴 Xcode 渲染你的視圖。

添加三個屬性：borderColor: UIColor、borderWidth: CGFloat 以及 cornerRadius: CGFloat。

設置它們的默認值并讓它們可視察（Inspectable）：

@IBDesignable class CustomView : UIView {
    @IBInspectable var borderColor: UIColor = UIColor.clearColor()
    @IBInspectable var borderWidth: CGFloat = 0
    @IBInspectable var cornerRadius: CGFloat = 0
}

為 Layer 屬性添加邏輯

為每個屬性都添加一個屬性觀察者（Property Observer）從而更新 layer：

class CustomView : UIView {
    @IBInspectable var borderColor: UIColor = UIColor.clearColor() {
        didSet {
            layer.borderColor = borderColor.CGColor
        }
    }

    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet {
            layer.cornerRadius = cornerRadius
        }
    }
}

用快捷鍵 ? Cmd+B 構建框架。

測試自定義視圖

打開 Main.storyboard 并從組件庫里添加一個視圖。

使用 Identity Inspector 修改其視圖類為 CustomView：

安排好視圖的位置并添加所需的 AutoLayout 約束：

Tip：按住 Crtl 然后點擊視圖并拖拽鼠標指針以添加其相對于另外一個視圖的約束。

玩耍了一陣 cornerRadius 之后，我發現在使用較大的值時，它創造了一種有趣的的模式：

你可以在 GitHub 上獲取代碼。

祝你玩得愉快

一個快速演示（“需KX上網”，我希望在不遠的將來我不需要寫這一句）：

挑戰

• 制作一個復選框（Checkbox）組件
• 制作一個有 angle: CGFloat 屬性的組件，可以旋轉視圖。
• 在 Interface Builder 里渲染一個分形圖
  

如果你發現這篇文章很有用，記得和你的朋友分享哦

譯者注：歡迎非商業轉載，但請一定注明出處：https://github.com/nixzhu/dev-blog ！

歡迎轉發此條微博 http://weibo.com/2076580237/B8nNYAEV4 以分享給更多人！