Why navigation structures app flow in iOS Swift - Build It to Prove It

Build: Simple Navigation Demo

This screen shows how navigation helps users move between pages in an app. It has a main screen with a button that opens a detail screen. The detail screen has a back button to return.

Target UI

Main Screen
+---------------------+
|                     |
|   Welcome Screen     |
|                     |
|   [Go to Details]    |
|                     |
+---------------------+

Detail Screen
+---------------------+
|  Detail Screen       |
|                     |
|  [Back]             |
|                     |
+---------------------+

Create a main screen with a title and a button labeled 'Go to Details'.

When the button is tapped, navigate to a detail screen.

The detail screen should have a title and a back button to return to the main screen.

Use UINavigationController to manage navigation stack.

Show how navigation structures app flow by moving between screens.

Starter Code

iOS Swift

import UIKit

class MainViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        title = "Welcome Screen"

        // TODO: Add button and navigation action here
    }
}

class DetailViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        title = "Detail Screen"

        // Back button is provided automatically by UINavigationController
    }
}

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        window = UIWindow(frame: UIScreen.main.bounds)
        let mainVC = MainViewController()
        let navController = UINavigationController(rootViewController: mainVC)
        window?.rootViewController = navController
        window?.makeKeyAndVisible()
        return true
    }
}

Task 1

Task 2

Solution

iOS Swift

import UIKit

class MainViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        title = "Welcome Screen"

        let button = UIButton(type: .system)
        button.setTitle("Go to Details", for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.addTarget(self, action: #selector(goToDetails), for: .touchUpInside)
        view.addSubview(button)

        NSLayoutConstraint.activate([
            button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            button.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }

    @objc func goToDetails() {
        let detailVC = DetailViewController()
        navigationController?.pushViewController(detailVC, animated: true)
    }
}

class DetailViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        title = "Detail Screen"
        // Back button appears automatically
    }
}

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        window = UIWindow(frame: UIScreen.main.bounds)
        let mainVC = MainViewController()
        let navController = UINavigationController(rootViewController: mainVC)
        window?.rootViewController = navController
        window?.makeKeyAndVisible()
        return true
    }
}

This app uses a UINavigationController to manage the flow between screens. The main screen has a button labeled "Go to Details". When tapped, it pushes the detail screen onto the navigation stack, showing the new screen with a back button automatically provided by the navigation controller. This back button lets users return to the main screen. This structure helps organize app flow by stacking screens and allowing easy navigation back and forth, just like pages in a book.

Final Result

Completed Screen

Main Screen
+---------------------+
|                     |
|   Welcome Screen     |
|                     |
|   [Go to Details]    |
|                     |
+---------------------+

Detail Screen
+---------------------+
|  < Back  Detail Screen |
|                     |
|                     |
|                     |
+---------------------+

User taps 'Go to Details' button on main screen.

App navigates to detail screen with a back button in the top-left.

User taps back button to return to main screen.

Stretch Goal

Add a third screen called 'Summary Screen' that can be reached from the Detail Screen with a button labeled 'Show Summary'.

💡 Hint

Add a UIButton on DetailViewController and push a new UIViewController when tapped.

Practice

1. What is the main purpose of using a navigation structure like UINavigationController in an iOS app?

easy

A. To manage the flow between different screens smoothly

B. To store user data permanently

C. To change the app's background color

D. To handle network requests

Solution

1. Step 1: Understand navigation role

   Navigation structures like UINavigationController help move between screens in an app.

2. Step 2: Identify unrelated options

   Storing data, changing colors, or handling network requests are not related to navigation.

3. Final Answer:

   To manage the flow between different screens smoothly -> Option A

4. Quick Check:

   Navigation = Manage screen flow [OK]

Hint: Navigation controls screen moves, not data or colors [OK]

Common Mistakes:

• Confusing navigation with data storage
• Thinking navigation changes app appearance only
• Mixing navigation with network handling

2. Which of the following is the correct way to push a new view controller onto the navigation stack in Swift?

easy

A. navigationController.push(newVC, animated: true)

B. navigationController.pushViewController(newVC, animated: true)

C. navigationController.present(newVC, animated: true)

D. navigationController.show(newVC)

Solution

1. Step 1: Recall UINavigationController method

   The correct method to add a view controller to the stack is pushViewController(_:animated:).

2. Step 2: Check method signatures

   navigationController.pushViewController(newVC, animated: true) matches the correct method and parameters exactly.

3. Final Answer:

   navigationController.pushViewController(newVC, animated: true) -> Option B

4. Quick Check:

   Push new screen = pushViewController [OK]

Hint: Use pushViewController to add screens in navigation [OK]

Common Mistakes:

• Using push instead of pushViewController
• Confusing present with push
• Omitting animated parameter

3. Given this Swift code snippet inside a view controller, what will happen when the button is tapped?

let newVC = UIViewController()
newVC.view.backgroundColor = .blue
navigationController?.pushViewController(newVC, animated: true)

medium

A. A new screen with a blue background will slide in

B. Nothing will happen because pushViewController is incorrect

C. The app will crash because newVC is not initialized properly

D. The current screen's background will change to blue

Solution

1. Step 1: Analyze code behavior

   A new UIViewController is created with a blue background color.

2. Step 2: Understand navigation push

   The newVC is pushed onto the navigation stack, so the app shows the new screen sliding in.

3. Final Answer:

   A new screen with a blue background will slide in -> Option A

4. Quick Check:

   pushViewController shows new screen [OK]

Hint: pushViewController shows new screen, not change current [OK]

Common Mistakes:

• Thinking pushViewController changes current screen color
• Assuming newVC is uninitialized
• Confusing pushViewController with present

4. Identify the error in this Swift code snippet that tries to navigate to a new screen:

let detailVC = DetailViewController()
navigationController.pushViewController(detailVC, animated: true)

medium

A. pushViewController method does not exist

B. DetailViewController() is not a valid initializer

C. Missing question mark after navigationController

D. animated parameter should be false

Solution

1. Step 1: Check navigationController usage

   navigationController is an optional, so it needs a question mark before calling methods.

2. Step 2: Verify method and parameters

   pushViewController exists and DetailViewController() is valid if defined.

3. Final Answer:

   Missing question mark after navigationController -> Option C

4. Quick Check:

   Optional navigationController needs ? before method [OK]

Hint: Use ? after navigationController to avoid nil errors [OK]

Common Mistakes:

• Forgetting navigationController is optional
• Assuming pushViewController is invalid
• Changing animated parameter unnecessarily

5. You want to create an app flow where the user can go from a list screen to a detail screen and then back. Which navigation structure best supports this flow and why?

hard

A. Use modal presentation because it replaces the entire screen without navigation

B. Use a UITabBarController because it shows multiple tabs at once

C. Use a UISplitViewController because it only works on iPads

D. Use a UINavigationController because it manages a stack of screens allowing push and pop transitions

Solution

1. Step 1: Understand app flow needs

   The user moves forward to detail and back to list, which is a stack navigation pattern.

2. Step 2: Match navigation structure

   UINavigationController manages a stack allowing push (forward) and pop (back) transitions smoothly.

3. Step 3: Eliminate other options

   UITabBarController is for tabs, UISplitViewController is for iPad split views, modal replaces screen without back navigation.

4. Final Answer:

   Use a UINavigationController because it manages a stack of screens allowing push and pop transitions -> Option D

5. Quick Check:

   Stack navigation = UINavigationController [OK]

Hint: Stack navigation for forward/back flow uses UINavigationController [OK]

Common Mistakes:

• Choosing tab bar for forward/back flow
• Confusing modal with navigation stack
• Ignoring device-specific controllers