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.