Swift: Switch between NSViewController inside Container View / NSView

Question

I want to achieve a really simple task—changing the ViewController of a Container View by pressing a button:

In my example the ViewController1 is embedded into the Container View using Interface Builder. By pressing the Button ViewController2 I want to change the view to the second ViewController.

I’m confused because the Container View itself seems to be a NSView if I create an Outlet and as far as I know a NSView can’t contain a VC. Really appreciate your help!

score 14 · Accepted Answer · edited Jul 07 '19 at 20:22

14

Just note that in order for this to work you have to add storyboard identifiers to your view controllers, which can by going to your storyboard then selecting the Identity Inspector in the right hand pane and then entering the Storyboard ID in the Identity subcategory.

Then this implementation of ViewController would achieve what you are looking for.

import Cocoa

class ViewController: NSViewController {

    // link to the NSView Container
    @IBOutlet weak var container : NSView!

    var vc1 : ViewController1!
    var vc2 : ViewController2!

    var vc1Active : Bool = false

    override func viewDidLoad() {
        super.viewDidLoad()

        // Make sure to set your storyboard identiefiers on ViewController1 and ViewController2
        vc1 = NSStoryboard(name: "name", bundle: nil).instantiateController(withIdentifier: "ViewController1") as! ViewController1
        vc2 = NSStoryboard(name: "name", bundle: nil).instantiateController(withIdentifier: "ViewController2") as! ViewController2

        self.addChild(vc1)
        self.addChild(vc2)
        vc1.view.frame = self.container.bounds
        self.container.addSubview(vc1.view)
        vc1Active = true

    }

    // You can link this action to both buttons
    @IBAction func switchViews(sender: NSButton) {

        for sView in self.container.subviews {
            sView.removeFromSuperview()
        }

        if vc1Active == true {

            vc1Active = false
            vc2.view.frame = self.container.bounds
            self.container.addSubview(vc2.view)

        } else {

            vc1Active = true
            vc1.view.frame = self.container.bounds
            self.container.addSubview(vc1.view)
        }

    }
}

edited Jul 07 '19 at 20:22

Matt Hampel

5,088
12
52
78

answered Nov 24 '16 at 19:36

Wes

1,032
7
11

Thank you @Wes for your detailed answer! I’ve got an error in the line `self.container.addSubview(vc1.view)`: »There are unexpected subviews in the container view«. So I tried to remove all subviews (like you did in yours func `switchViews` first but it didn’t worked (error remains the same). Any ideas? – ixany Nov 24 '16 at 23:10
@ixany a couple of things. First, change your code to reflect the edits I made (minor changes to prevent confusing views). Also, remove the embed relationship between `Container` and `ViewController1`. Do this by right-clicking `Container` in IB and deleting the connection. – Wes Nov 24 '16 at 23:17
Thanks again @Wes! You were right, I had to delete the embed/segue to `ViewController1` in IB. I accepted your answer, but have one additional question: Is adding & removing subviews for this task the best practice? While implementing it I also found `.removeChildViewController()` and thought it may would be better in terms of performance. In the subview-solution the app loads all possible VCs even when they’re never will appear. Are there other advantages adding/removing subviews? – ixany Nov 27 '16 at 10:47
This way everything is already calculated and resources are loaded before you would ever need them so there is no calculation/resource loading done at the last second. That being said you are correct, if you may never need a certain vc this is not the best approach and it would be better to lazily declare them at load them only when needed and then tear them down. However if you are certain you will need these controllers, the performance load of keeping reference to two controllers in pretty small and can preloading can offer some small performance increases. – Wes Nov 27 '16 at 22:22
@Wes @ixany I know it's been awhile but I love this solution for what I'm doing but I keep getting the following error and was wondering if you know how to solve it: `Ambiguous use of 'instantiateController(identifier:creator:)'`. Then when I click on it there's two candidates found and both are `AppKit.NSStoryBoard` – Kyra May 31 '21 at 16:33

score 7 · Answer 2 · edited Apr 03 '20 at 11:16

maybe this is a late answer but I will post my solution anyways. Hope it helps someone.

I embedded NSTabViewController in ContainerView. Then, in order not to see tabs on the top I did this:

go to NSTabViewController in storyboard
in Attributes inspector change style to be Unspecified
then click on TabView in Tab Bar View Controller, and set style to be "tabless":

After this you need to:

store tabViewController reference to mainViewController in order to select tabs from code
add a button to mainViewController (where your container is) with which you will change tabs in tabViewController.

You do this by storing the reference to tabViewController when overriding prepare for segue function. Here is my code:

first add property to the mainViewController

private weak var tabViewController: NSTabViewController?

then override this function and keep the reference to tabViewController:

    override func prepare(for segue: NSStoryboardSegue, sender: Any?) {
            guard let tabViewController = segue.destinationController
                as? NSTabViewController else { return }

            **self.tabViewController = tabViewController as? NSTabViewController**

        }

After this you will have reference to tabViewController all set up. Next (last) thing you have to do is make an action for button in order to move to first (or second) view controller, like this:

@IBAction func changeToSecondTab(_ sender: Any) {
        self.tabViewController?.selectedTabViewItemIndex = 0 // or 1 for second VC 
    }

All the best!

Swift: Switch between NSViewController inside Container View / NSView

2 Answers2

Linked