IOS

How to switch between View Controllers Programmatically IOS Development

Switch between View Controllers is one of the basic and important part of almost every application. In this tutorial, you will learn to switch between View Controllers programmatically. Before getting started, you need to have a basic idea of ios development and layout design.

We will go step by step so you can understand and implement it easily. Moreover, this tutorial also has a complete source code at the end so you can download and use it.

1. Create a new Xcode project.

Open Xcode and click on Create a new Xcode project.

New Project

Choose a Single View Application

Single View App
Choose Template

Enter details for the application including app name and organization name.

Project Details
Project Details

2. Embed Navigation Controller.

Click on Main.storyboard and select View Controller. Now we need to embed Navigation Controller which will work as a container to manage child view controllers.

Embed View Controller
Embed View Controller

3. Add new View Controllers to Main.storyboard

Open object library (shift-command-L) and drag-drop two view controllers on storyboard. We will use these view controllers for navigation.

new view controllers tutorialscache

4. Create New Swift Files.

Now we need to create two new Swift files by pressing (command+N) and name them as

  • FirstController.swift
  • SecondController.swift
Create Swift File
Create Swift File

Add the following codes in your swift files accordingly.

4.1 FirstController.swift

//  FirstController.swift

import UIKit

class FirstController: UIViewController {
    override func viewDidLoad() {
        print("First Controller Loaded")
    }
}

Project structure
FirstController

4.2 SecondController.swift

//  SecondController.swift
//  VC Swith App

import UIKit

class SecondController: UIViewController {
    override func viewDidLoad() {
        print("second VC Loaded")
    }
}

5. Storyboard ID under Identity Inspector

Now we need to assign storyboard ids to our view controller scenes. So firstly, open storyboard so we can select view controller as shown in the picture below. Secondly, add storyboard id with also a custom class that we have already created. As a result, we will be able to access view controllers from the storyboard.

Storyboard ID
Storyboard ID. FirstControllerVC

After that, you need to assign storyboard ids to both controllers.

Storyboard ID SecondControllerVC
Storyboard ID SecondControllerVC

6. Buttons, Labels, and Backgrounds

After that, we need to add two buttons on the main view controllers so we can click on them and move to our first or second view controllers. You can also change backgrounds from the attributes inspector to makes things pretty. Regarding constraints, you can simply align constraints vertically and horizontally center.

Final Layout
Final Layout

7. IBActions of Buttons

This is one of the important part of the project. We need to add clicks on our fly and swim buttons. Its also called tap action of UIButtons. You can follow step by step to complete this procedure.

  1. Click on Fly Button in Story Board
  2. Then click on Assistant Editor from the top right.
  3. After that, click on Fly Button and Ctrl+drag from it down to the space in your code
  4. Enter the name of the action as flyClick
  5. Click on connect
   @IBAction func flyClick(_ sender: Any) {
    }

Similarly, repeat steps for swim button and add swimClick function. The result of this final output will look like the below image.

Fly and Swim Click functions
Fly and Swim Click functions

8. Push View Controller

Once buttons are clicked, we need to add code so we can push our new video controllers and move to them. For this, we need to add the following lines of codes inside flyButton Click.

//Here is where we create an instance of our view controller. instantiateViewController(withIdentifier:) will create an instance of the view controller.  
let firstVC = self.storyboard?.instantiateViewController(withIdentifier: "FirstControllerVC") as! FirstController
        self.navigationController?.pushViewController(firstVC, animated: true)

FirstController is our swift VC file and FirstControllerVC is our storyboard ID. We will also implement our swim button and this is how whole ViewController.swift will look like.

//  ViewController.swift
//  Copyright © 2020 Tutorialscache. All rights reserved.


import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    @IBAction func flyClick(_ sender: Any) {
        let firstVC = self.storyboard?.instantiateViewController(withIdentifier: "FirstControllerVC") as! FirstController
        self.navigationController?.pushViewController(firstVC, animated: true)
    }
    
    @IBAction func swimClick(_ sender: Any) {
        let secondVC = self.storyboard?.instantiateViewController(withIdentifier: "SecondControllerVC") as! SecondController
        self.navigationController?.pushViewController(secondVC, animated: true)
    }
    
    // Hide Topbar
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        navigationController?.setNavigationBarHidden(true, animated: animated)
    }
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        navigationController?.setNavigationBarHidden(false, animated: animated)
    }
}

Switch VC

2 Comments

Write A Comment

Tutorials Cache