Custom view (xib) not visible on storyboard

Question

I have a custom view xib where I have multiple TableViews. I am loading this inside a ViewController as a nested view:

ViewController
   |_ View
       |_ View (This is where I load my Custom View)

When I run my app, I can see the empty tables on screen, so my xib is loading correctly.
So far so good.

My problem is, I am unable to see my tables in the storyboard. So I am not able to ctrl+drag and proceed further.

How can I see my custom view inside the storyboard view?

Moskowitz

You can't see xib views inside storyboard. You can use the file's owner to create IBOutlets and IBActions. – Queenhood

DON'T FORGET @IBDesignable !!!! – Konikow

@FabioFelici , that's wrong. Nowadays it is perfectly possible. GentBerani gives the exact code. Cheers! – Konikow

@Konikow I think it wasn't possible when I commented, look at the date... – Queenhood

ciao, right @FabioFelici , notice I said "Nowadays ..." ! Cheers! – Konikow

Answer 1

Storyboards can only contain ViewControllers and Segues. If you want to access something in your xib from the ViewController to set the delegates etc., then you have to do it from code. You can't, for example, set the delegate of a UITableView from within IB when the target ViewController is in a Storyboard and the UITableView is in another xib.

Undesigned

Answer 2

For example, we have TopView (my CustomView):

1. TopView.xib, set TopView class in File's Owner

2. TopView.swift

Note: Don't forget the @IBDesignable tag.

import UIKit
@IBDesignable
class TopView: UIView {

    //MARK:- IB Outlets
    var contentView:UIView?

    //MARK:- Lifecycle
    override func awakeFromNib() {
        super.awakeFromNib()
    }

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

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupThisView()
    }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        setupThisView()
        contentView?.prepareForInterfaceBuilder()
    }

    //MARK:- Lifecycle methods
    private func setupThisView(){
        guard let view = loadViewFromNib() else { return }
        view.frame = bounds
        view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        addSubview(view)
        contentView = view
    }

    func loadViewFromNib() -> UIView? {
        let nibName = String(describing: TopView.self)
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: nibName, bundle: bundle)
        return nib.instantiate(withOwner: self,options: nil).first as? UIView
    }
}

3.Add UIView in Storyboard and set the class of the view as TopView

If the TopView has not yet appeared in Storyboard then (this happens usually):

1. Enable Editor -> Automatically Refresh Views
2. Click on Editor -> Refresh All Views

Still?

1. Clean the project: ⌘ + K
2. Build the project ⌘ + B

Result in Storyboard:

Demarche