IOS 使用XIB制作Storyboard使用的自定义控件

开发环境：IOS8.0+ Swift 2.3

创建一个UIView

遗憾的是Also create XIB file是灰色的。没办法，只能分开创建了
新建文件，选择User Interface中的View然后命名为CustomTest。
在CustomTest.Xib中的File’s Owner的属性面板的Customer class选择CustomTest，
记住是File’s Owner，而不是其他的任何地方

然后就是对Xib进行布局和约束，然后将其中的控件与CustomTest.Swift进行连线。CustomTest 的class 前面需要加上@IBDesignable，表示在属性面板中可见。

需要暴露的属性，前面需要加上 @IBInspectable，如：

@IBInspectable var realBackColor:UIColor = UIColor.orangeColor() {
        didSet {
            self.viewRealNameBack.backgroundColor = realBackColor
        }
    }

关于控件的初始化，分为可视化调用和代码调用两种方式，将会调用不同的init

    //代码创建
    override init(frame: CGRect) {
        super.init(frame: frame)
        contentView = loadViewFromNib()
        addSubview(contentView)
        addConstraints()
    }

    //可视化
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        contentView = loadViewFromNib()
        addSubview(contentView)
        addConstraints()
    }

关于加载Xib的方法，swift2.3

func loadViewFromNib() -> UIView {
        let bundle = NSBundle(forClass: self.classForCoder)
        let nib = UINib(nibName: String(self.classForCoder), bundle: bundle)
        let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView
        return view
    }

swif3.0

func loadViewFromNib() -> UIView {
        let className = type(of: self)
        let bundle = Bundle(for: className)
        let name = NSStringFromClass(className).components(separatedBy: ".").last
        let nib = UINib(nibName: name!, bundle: bundle)
        let view = nib.instantiate(withOwner: self, options: nil).first as! UIView
        return view
    }

加载完Xib后，需要与Self做好约束，否则会造成在Xib中的约束无效。
下面是完整的代码例子：

import UIKit

@IBDesignable
class CustomTest: UIView {

    @IBOutlet weak var lbRealName: UILabel!
    @IBOutlet weak var lbLimit: UILabel!
    @IBOutlet weak var lbValDate: UILabel!
    @IBOutlet weak var lbPrice: UILabel!

    @IBOutlet weak var viewRealNameBack: UIView!


    var contentView:UIView!

    @IBInspectable var backColor:UIColor = Jiajiao.Color.Clr09aeb0 {
        didSet {
            self.contentView.backgroundColor = backColor
        }
    }

    @IBInspectable var realBackColor:UIColor = UIColor.orangeColor() {
        didSet {
            self.viewRealNameBack.backgroundColor = realBackColor
        }
    }


    //初始化时将xib中的view添加进来
    override init(frame: CGRect) {
        super.init(frame: frame)
        contentView = loadViewFromNib()
        addSubview(contentView)
        addConstraints()
    }

    //初始化时将xib中的view添加进来
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        contentView = loadViewFromNib()
        addSubview(contentView)
        addConstraints()
    }

    func loadViewFromNib() -> UIView {
        let bundle = NSBundle(forClass: self.classForCoder)
        let nib = UINib(nibName: String(self.classForCoder), bundle: bundle)
        let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView
        return view
    }

    func addConstraints() {
        contentView.translatesAutoresizingMaskIntoConstraints = false

        let l = NSLayoutConstraint(item: contentView, attribute: .Leading, relatedBy: .Equal, toItem: self, attribute: .Leading, multiplier: 1, constant: 0)
        l.active = true

        let r = NSLayoutConstraint(item: contentView, attribute: .Trailing, relatedBy: .Equal, toItem: self, attribute: .Trailing, multiplier: 1, constant: 0)
        r.active = true

        let t = NSLayoutConstraint(item: contentView, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1, constant: 0)
        t.active = true

        let b = NSLayoutConstraint(item: contentView, attribute: .Bottom, relatedBy: .Equal, toItem: self, attribute: .Bottom, multiplier: 1, constant: 0)
        b.active = true
    }
}

调用，这个比较简单了，拖一个普通的View到storyboard中，然后修改属性，将Class选择为CustomTest

然后在属性面板中就可以看到自定义的属性了。

对了，还有一点

注意，Editor -> Automatically Refresh Views
当这个选择的时候才会即时的编译，在Storyboard中看到效果，不过带来的负面影响就是，在打开辅助编辑器的时候，输入代码的时候会不停的编译造成卡顿。
当不需要直接在Storyboard中看效果的时候，建议先关掉。

写的比较粗糙，有疑问可以吐槽