接線元素

建立一個 XIB 檔案

Xcode 選單欄>檔案>新建>檔案。
選擇 iOS，使用者介面，然後選擇檢視：

給你的 XIB 一個名字（是的，我們正在做一個口袋妖怪的例子👾）。
記得檢查你的目標並點選建立。

設計你的觀點

為了簡化操作，請設定：

• 尺寸：自由形態
• 狀態列：無
• 頂欄：無
• 底欄：無

單擊大小檢查器並調整檢視大小。
對於此示例，我們將使用寬度 321 和高度 256。

將一些元素放入 XIB 檔案中，如下所示。
在這裡，我們將新增一個影象檢視 （256x256）和一個開關。

單擊解決自動佈局問題（右下角）並選擇所有檢視下的新增缺失約束，新增自動佈局約束。

單擊顯示助理編輯器（右上角），然後單擊預覽，預覽所做的更改。
你可以通過單擊加號按鈕新增 iPhone 螢幕。
預覽應如下所示：

子類 UIView

建立要管理 XIB 檔案的類。
Xcode 選單欄>檔案>新建>檔案。
選擇 iOS / Source / Cocoa Touch Class。點選下一步。

為類提供一個名稱，該名稱必須與 XIB 檔案（Pokemon）的名稱相同。
選擇 UIView 作為子類型別，然後單擊下一步。

在下一個視窗中，選擇目標並點選建立。

通過檔案所有者屬性將 Pokemon.xib 連線到 Pokemon.swift

單擊 Xco​​de 中的 Pokemon.xib 檔案。
單擊檔案所有者插座。
在身份檢查器（右上角）中，將 Class 設定為我們最近建立的 Pokemon.swift 檔案。

小寵物！

是! 將一些 Pokemons 拖放到你的專案中以完成我們的基礎設施。
這裡我們新增兩個 PGN 檔案，256x256，透明。

給我看程式碼。

好吧，好吧。
是時候為我們的 Pokemon.swift 類新增一些程式碼了。

它實際上非常簡單：

1. 實現所需的初始化程式
2. 載入 XIB 檔案
3. 配置將顯示 XIB 檔案的檢視
4. 顯示上面的檢視

將以下程式碼新增到 Pokemon.swift 類：

import UIKit

class Pokemon: UIView {
    
    // MARK: - Initializers
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupView()
    }
    
    // MARK: - Private Helper Methods
    
    // Performs the initial setup.
    private func setupView() {
        let view = viewFromNibForClass()
        view.frame = bounds

        // Auto-layout stuff.
        view.autoresizingMask = [
            UIViewAutoresizing.flexibleWidth,
            UIViewAutoresizing.flexibleHeight
        ]

        // Show the view.
        addSubview(view)
    }
    
    // Loads a XIB file into a view and returns this view.
    private func viewFromNibForClass() -> UIView {
        
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: String(describing: type(of: self)), bundle: bundle)
        let view = nib.instantiate(withOwner: self, options: nil).first as! UIView
        
        /* Usage for swift < 3.x
        let bundle = NSBundle(forClass: self.dynamicType)
        let nib = UINib(nibName: String(self.dynamicType), bundle: bundle)
        let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView
        */

        return view
    }
}

@IBDesignable 和 @IBInspectable

通過將 @IBDesignable 新增到你的類中，你可以在 Interface Builder 中進行實時渲染。
通過將 @IBInspectable 新增到類的屬性，你可以在修改這些屬性後立即在 Interface Builder 中看到自定義檢視的更改。

讓我們的自定義檢視 Inspectable 的 Image View。

首先，將 Image View 從 Pokemon.xib 檔案連線到 Pokemon.swift 類。

撥打插座 imageView，然後新增以下程式碼（注意類名前的 @IBDesignable）：

@IBDesignable class Pokemon: UIView {
    
    // MARK: - Properties
    
    @IBOutlet weak var imageView: UIImageView!
    
    @IBInspectable var image: UIImage? {
        get {
            return imageView.image
        }
        set(image) {
            imageView.image = image
        }
    }

    // MARK: - Initializers
    ...

使用自定義檢視

進入主故事板檔案，將 UIView 拖入其中。
將檢視大小調整為 200x200。集中。
轉到 Identity 檢查器（右上角）並將 Class 設定為 Pokemon。

要選擇一個神奇寶貝，請轉到屬性檢查器（右上角），然後使用真棒 @IBInspectable 影象屬性選擇之前新增的一個神奇寶貝影象。

現在複製你的自定義口袋妖怪檢視。
給它一個不同的尺寸，比如 150x150。
選擇另一個 Pokemon 影象，觀察：

現在我們將為自包含的自定義 UI 元素新增更多邏輯。
該按鈕將允許啟用/禁用 Pokemons。

從 Switch 按鈕建立一個 IBAction 到 Pokemon.swift 類。
將行動稱為 switchTapped。
將以下程式碼新增到其中：

// MARK: - Actions

@IBAction func switchTapped(sender: UISwitch) {
    imageView.alpha = sender.on ? 1.0 : 0.2
}

// MARK: - Initializers
...

最後結果：

https://i.stack.imgur.com/DQJvO.gif

你完成了！
現在，你可以建立複雜的自定義檢視，並在任何地方重複使用它
這將提高生產力，同時將程式碼隔離到自包含的 UI 元素中。

最終專案可以在 Github 中克隆。
（ 更新為 Swift 3.1 ）