Link multiple view controllers into one container view and switch between them using segmented control using Swift.

Open Xcode6 and create a new Single View Application. For product name, use container and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

Single View Application

Single View Application

Choose options for your new project

Choose options for your new project

Set to Compact Width | Any Height.

Compact Width | Any Height

Compact Width | Any Height

Go to the Storyboard and drag an Segmented Control to the main View. Select the Segmented Control and go to the Size inspector and fill in the following values.

Open document outline, select the Segmented Control again and drag from inside the Segmented Control just to to left and right will still in the Segmented Control. Hold down the Ctrl key and select the Leading Space to Container Margin and Trailing Space to Container Margin Auto Layout options. Select the Segmented Control again and drag from the Segmented Control to the top of the view. Hold down the Ctrl key and select Top space to Top Layout Guide in Container options.

Document Outline and Constraints

Document Outline and Constraints

Go to the Storyboard and drag an Container View to the main View. Select the Container View and go to the Size inspector and fill in the following values.

Open document outline, select the Container View again and drag from inside the Container View just to to left and right will still in the Container View. Hold down the Ctrl key and select the Leading Space to Container Margin and Trailing Space to Container Margin Auto Layout options. Select the Container View again and drag from the Container View to the top of the view. Hold down the Ctrl key and select Top space to Top Layout Guide and Aspect Ratio in Container options.

Document Outline and Constraints

Document Outline and Constraints

The Storyboard will look like this.

Main.Storyboard

Main.Storyboard

Do one more time for another Container View. Make sure it’s overlapping with previous Container View.

After that put two Labels in both View Controllers that connected with Container View.

View Controller

View Controller

Select the Assistant Editor and make sure the ViewController.swift is visible. Ctrl and drag from the Segmented Control to the ViewController class and create the following Outlet. Same goes to both Container Views.

Segmented Control property outlet

Segmented Control property outlet

First Container View

First Container View

Second Container View

Second Container View

Ctrl and drag from the Segmented Control again to the ViewController class and create the following Action.

indexChanged Segmented Control action

indexChanged Segmented Control action

Go to the ViewController.swift file and change the viewDidLoad method.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var segmentedControl: UISegmentedControl!
    @IBOutlet weak var firstView: UIView!
    @IBOutlet weak var secondView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()

        firstView.hidden = false
        secondView.hidden = true
        // Do any additional setup after loading the view.
    }

}

Then change the indexChanged action.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var segmentedControl: UISegmentedControl!
    @IBOutlet weak var firstView: UIView!
    @IBOutlet weak var secondView: UIView!

    @IBAction func indexChanged(sender: UISegmentedControl) {
        switch segmentedControl.selectedSegmentIndex
        {
        case 0:
            firstView.hidden = false
            secondView.hidden = true
        case 1:
            firstView.hidden = true
            secondView.hidden = false
        default:
            break;
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        firstView.hidden = false
        secondView.hidden = true
        // Do any additional setup after loading the view.
    }

}

Build and Run the project. You can download the source code here, https://github.com/datomnurdin/com.revivalx.container.

18 thoughts on “Link multiple view controllers into one container view and switch between them using segmented control using Swift.

  1. When I put a TableView with a SearchBar into a Container, when the SearchBar active, the SearchBar’s position is incorrect, how to solve this problem?

  2. Thanks for the post. I was actually expecting it as per the title of the post promises: Link multiple view controllers into one container view. But you are using two containers instead of one.

    Actually I had to link almost 6 viewcontrollers to a single container.

  3. Hello,

    I don’t understand how can I link two view controllers with the same container view, I can’t do that using “embed segue” or “show segue” either.

    That is the only point that I don’t get it about your explanation.

      1. You can not link two views to one container but instead of that you have to overlap two different containers and use their respective views 🙂

  4. When i run the same kind of project it stops on the third line of view did load() that is ‘secondView.hidden = true’ and throw a error ‘fatal error: unexpectedly found nil while unwrapping an Optional value’.

    Please help……..

Leave a Reply

Your email address will not be published. Required fields are marked *