TabView for tab navigation in iOS Swift - Mini App: Build & Ship

Build: MainTabView

This screen shows a tab bar at the bottom with three tabs: Home, Search, and Profile. Each tab displays a simple label with the tab name.

Target UI

┌─────────────────────────────┐
│          MainTabView        │
├─────────────────────────────┤
│                             │
│          [Home Tab]          │
│                             │
│         "Home Screen"       │
│                             │
├─────────────────────────────┤
│ Home | Search | Profile     │
└─────────────────────────────┘

Use UITabBarController to create tab navigation

Add three tabs labeled Home, Search, and Profile

Each tab shows a centered label with the tab name

Use system icons for each tab: house, magnifyingglass, person

Tabs should be selectable and switch content accordingly

Starter Code

iOS Swift

import UIKit

class MainTabViewController: UITabBarController {
    override func viewDidLoad() {
        super.viewDidLoad()
        // TODO: Setup the tab bar with three tabs
    }
}

// TODO: Create simple UIViewController subclasses for Home, Search, and Profile screens

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

iOS Swift

import UIKit

class HomeViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground
        let label = UILabel()
        label.text = "Home Screen"
        label.font = .systemFont(ofSize: 24, weight: .medium)
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(label)
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }
}

class SearchViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground
        let label = UILabel()
        label.text = "Search Screen"
        label.font = .systemFont(ofSize: 24, weight: .medium)
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(label)
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }
}

class ProfileViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground
        let label = UILabel()
        label.text = "Profile Screen"
        label.font = .systemFont(ofSize: 24, weight: .medium)
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(label)
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }
}

class MainTabViewController: UITabBarController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let homeVC = HomeViewController()
        homeVC.tabBarItem = UITabBarItem(title: "Home", image: UIImage(systemName: "house"), tag: 0)

        let searchVC = SearchViewController()
        searchVC.tabBarItem = UITabBarItem(title: "Search", image: UIImage(systemName: "magnifyingglass"), tag: 1)
        searchVC.tabBarItem.badgeValue = "3"

        let profileVC = ProfileViewController()
        profileVC.tabBarItem = UITabBarItem(title: "Profile", image: UIImage(systemName: "person"), tag: 2)

        viewControllers = [homeVC, searchVC, profileVC]
    }
}

We created three simple view controllers for Home, Search, and Profile. Each shows a centered label with the tab name. In MainTabViewController, we set up the tab bar by assigning these controllers as tabs. We used system icons for each tab bar item for clarity and consistency. This setup allows users to tap the tabs at the bottom to switch between screens easily.

Final Result

Completed Screen

┌─────────────────────────────┐
│          MainTabView        │
├─────────────────────────────┤
│                             │
│          Home Screen         │
│                             │
├─────────────────────────────┤
│ 🏠 Home | 🔍 Search | 👤 Profile │
└─────────────────────────────┘

Tap 'Search' tab to show 'Search Screen' label

Tap 'Profile' tab to show 'Profile Screen' label

Tap 'Home' tab to return to 'Home Screen'

Stretch Goal

Add badge notifications to the Search tab showing number 3

💡 Hint

Set the tabBarItem.badgeValue property of the SearchViewController to "3"