storyboard中能夠插入xib定義的view,并能夠預覽,xib中插入xib使用方法和storyboard是一樣的方法.(Swift3.0版)

1. 先新建好自定義的xib和對應的類,注意類名必須和xib中綁定的類名一致,否則無法在類中關聯xib中的組件(進行連線)

   
   
   Snip20160926_4.png

自定義類的代碼如下:

import UIKit

@IBDesignable
class CustomView: UIView {
    
    @IBOutlet weak var label: UILabel!
    @IBAction func onTouchUp(_ sender: UIButton) {
        onButtonRun?()
    }
    
    @IBInspectable
    var name:String?{
        get{
            return label.text
        }
        set{
            label.text = newValue
        }
    }
    
    var onButtonRun:(()->Void)?
    //初始化時將xib中的view添加進來
    var contentView:UIView!
    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
    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
    }
    //設置好約束
    func addConstraints() {
        contentView.translatesAutoresizingMaskIntoConstraints = false
        
        var constraint = NSLayoutConstraint(item: contentView, attribute: .leading, relatedBy: .equal, toItem: self, attribute: .leading, multiplier: 1, constant: 0)
        addConstraint(constraint)
        constraint = NSLayoutConstraint(item: contentView, attribute: .trailing, relatedBy: .equal, toItem: self, attribute: .trailing, multiplier: 1, constant: 0)
        addConstraint(constraint)
        constraint = NSLayoutConstraint(item: contentView, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1, constant: 0)
        addConstraint(constraint)
        constraint = NSLayoutConstraint(item: contentView, attribute: .bottom, relatedBy: .equal, toItem: self, attribute: .bottom, multiplier: 1, constant: 0)
        addConstraint(constraint)
    }
}

2.在storyboard中拖入一個View組件,然后將class設置為我們自定義的類名"CustomView"

Paste_Image.png

3.這是我在自定義類中增加的可以編輯的屬性,修改也能夠實時預覽它

Snip20160926_6.png

源碼實現:https://github.com/ghyh22/StoryboardInsertXibView

參考:http://swiftdeveloperblog.com/creating-custom-user-interface-files-with-xib-in-xcode-6-and-swift/