接线元素

创建一个 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 ）