本文将分两个部分内容：基于代码的自定义控件和基于XIB的自定义控件。

基于代码的自定义控件

实现的基本步骤（纯文字版, 阅读障碍者请跳过~）

1. 创建一个新类，基类选择UIView
2. 实现init(frame:)方法

override init(frame: CGRect) {
    super.init(frame: frame)
    setupSubviews()
}
func setupSubviews() {
// ..
}

3. 实现init()方法

convenience init() {
    self.init(frame: CGRect.zero)
}

4. 实现init(coder:)方法
   基本逻辑跟init(frame:)是类似的

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    setupSubviews()
}

init(coder:)和init(frame:)是在两个不同的情境下被调用的。前者是当自定义控件在XIB中使用的时候被调用，后者是使用代码直接创建自定义控件时被调用的。
当自定义控件在XIB中使用时候还有一个方法会被触发：awakeFromeNib，此方法是当控件从NIB文件加载完毕之后触发的, 它和init(coder:)的触发机制是不同的, init(coder:)要做真正的反序列化的工作, awakeFromNib是反序列化完毕并且设置好相关的Outlet变量之后被调用的。

5. 重写layoutSubviews方法，调整子View的大小。

override func layoutSubviews() {
    asubview.bounds = self.bounds
    // ...
}

有时候也可以在上述创建子View的时候设置相关的大小和约束，但是如果子View的大小或约束需要依赖self的大小的话，就只有在这个方法里进行, 因为之后这个方法被调用的时候self的frame才是正确的, 同时, 在self的frame发生变化的时候(包括发生了旋转), 这个方法也会再次被调用。

基于XIB创建自定义控件

我们假设想写一个类似百度个税计算机的App, 想让其中的税率条目做成自定义控件

自定义控件界面

1. 创建一个新类MyCustomView，派生类选择UIView

   
   创建新类

2. 创建一个和类同名的XIB文件

   
   创建XIB文件

3. 修改XIB文件中View的Size 为Freedom, Status bar为None

   
   Metrices属性

4. 设计自定义控件的视图布局和约束

   
   设计布局和约束
5. 在XIB的File's Owner界面的Custom Class中选择自定义类的名字
   File's Owner
   注意：不是在View自身的Custom Class中填写，如果你调试的时候出现init(coder:)递归调用了的话，那就是这个地方弄错了
   错误的示范

File's Owner设置的CustomView是设定子View关联Outlet变量到哪个类的对象, 这个对象跟后面通过UINib加载Xib文件传递的Owner对象的关系就是"类"与"对象"的关系.
而View的CustomView是指当Xib文件被加载进来的时候其跟View对象的类型. 默认是UIView, 后面我们会展示在Xib中使用我们的自定义控件MyCustomView的时候, 我们就会用到这个特性.

6. 给子View拉线关联必要的Outlet变量。

    @IBOutlet weak var titleLabel: UILabel!
    
    @IBOutlet weak var selfTaxRateInput: UITextField!

    @IBOutlet weak var selfTaxResultLabel: UILabel!
    
    @IBOutlet weak var companyTaxRateInput: UITextField!

    @IBOutlet weak var companyTaxResultLabel: UILabel!

7. 定义一个加载XIB文件的方法和一个完整的初始化子类的方法

// load view from xib
    func loadViewFromNib() -> UIView {
        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
    }
// setup view's auto resize to fill parent, and add a % view to input view    
    func setupSubviews() {
        view = loadViewFromNib()
        view.autoresizingMask = [UIViewAutoresizing.FlexibleWidth, UIViewAutoresizing.FlexibleHeight]
        addSubview(view)
        
        selfTaxRateInput.rightViewMode = .Always
        let labelMaker:()->UIView = {
            let precentLabel = UILabel();
            precentLabel.text = "%";
            return precentLabel
        }
        selfTaxRateInput.rightView = labelMaker()
        companyTaxRateInput.rightViewMode = .Always
        companyTaxRateInput.rightView = labelMaker()
    }
// reset subview's frame
    override func layoutSubviews() {
        view.frame = bounds
        let precentRect = CGRect(x: 0, y: 0, width: 20, height: bounds.size.height)
        selfTaxRateInput.rightView?.bounds = precentRect
        companyTaxRateInput.rightView?.bounds = precentRect
    }

这里需要一个添加一个view的属性, 用来保存从Xib中加载得到的View, 然后作为子View添加给self. 这里可能有点迷惑, 我们不就是一个view吗? 其实, 在现在这个用法里面, self只是一个容器, 它的作为就是作为Xib中View的容器

8. 编写我们的各个初始化函数

    weak var view: UIView!
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupSubviews()
    }
    
    convenience init() {
        self.init(frame: CGRect.zero)
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupSubviews()
    }

---

上面的步骤已经完成了自定义控件的编写了, 下面接着介绍如何在Xib中使用它?

1. 打开我们主界面的Xib文件, 拖入一个UIView 设置好大小位置和约束

   
   使用自定义控件

2. 把这个UIView的CustomView设置为我们上面开发的"MyCustomView"

   
   设置CustomView

这里设置了子View的CustomView为MyCustomView, 那么当主Xib被加载的时候, 解析到这个子View的时候, 就会用这个CustomView的类型来创建对象. 伪代码类似这样:

let theClass: AnyClass! = NSClassFromString(CustomClassName)
let classObject: NSObject.Type! = theClass as! NSObject.Type!
let obj = classObject.init()
rootView.addSubview(obj)   

3. 好, 运行一下看看效果.

   
   效果

---

上面的使用就介绍的差不多了, 但是有个美中不足的地方, 那就是不能在设计阶段看到大致的效果. 也不能在设计阶段修改一些属性 -- 比方说设置title.

下面我们来修改一下MyCustomView, 让它可以支持一些设计时实时展示的特性.

1. 首先, 我们在MyCustomView的定义前面加上 @IBDesignable

@IBDesignable
class MyCustomView: UIView {
    
    @IBOutlet weak var titleLabel: UILabel!
    
    @IBOutlet weak var selfTaxRateInput: UITextField!

2. 定义一个title的属性, 并使用@IBInspectable修饰

    @IBInspectable var title: String = "" {
        didSet {
            self.titleLabel.text = title
        }
    }

实时设计

完成之后, 我们再次打开主Xib的Interface Builder界面, 这时候, 我们就已经可以实时看到控件的界面了, 并且在属性面板里头, 我们也多了一个叫"Title"的属性可以设置, 我们试着设置成"公积金", 设计界面就自动更新了. 是不是很有点标准控件的感觉呢?

注意, 你必须给变量定义一个明确的类型, 否则在IB上是看不到的

错误的示范:
 @IBInspectable var title = "" {
        didSet {
            self.titleLabel.text = title
        }
    }

如果你对实时设计感兴趣的话, 还可以阅读文章《如何创建iOS可视化控件》