Search code examples
iosuiviewstoryboardxib

Load view from an external xib file in storyboard


I want to use a view throughout multiple viewcontrollers in a storyboard. Thus, I thought about designing the view in an external xib so changes are reflected in every viewcontroller. But how can one load a view from a external xib in a storyboard and is it even possible? If thats not the case, what other alternatives are availble to suit the situation abouve?


Solution

  • My full example is here, but I will provide a summary below.

    Layout

    Add a .swift and .xib file each with the same name to your project. The .xib file contains your custom view layout (using auto layout constraints preferably).

    Make the swift file the xib file's owner.

    enter image description here Code

    Add the following code to the .swift file and hook up the outlets and actions from the .xib file.

    import UIKit
    class ResuableCustomView: UIView {
    
        let nibName = "ReusableCustomView"
        var contentView: UIView?
    
        @IBOutlet weak var label: UILabel!
        @IBAction func buttonTap(_ sender: UIButton) {
            label.text = "Hi"
        }
    
        required init?(coder aDecoder: NSCoder) {
            super.init(coder: aDecoder)
    
            guard let view = loadViewFromNib() else { return }
            view.frame = self.bounds
            self.addSubview(view)
            contentView = view
        }
    
        func loadViewFromNib() -> UIView? {
            let bundle = Bundle(for: type(of: self))
            let nib = UINib(nibName: nibName, bundle: bundle)
            return nib.instantiate(withOwner: self, options: nil).first as? UIView
        }
    }
    

    Use it

    Use your custom view anywhere in your storyboard. Just add a UIView and set the class name to your custom class name.

    enter image description here