TabView for tab navigation in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

TabView selection behavior

What will be the visible tab label when the user taps the second tab in this SwiftUI TabView?

iOS Swift

import SwiftUI

struct ContentView: View {
  @State private var selection = 1

  var body: some View {
    TabView(selection: $selection) {
      Text("Home Screen")
        .tabItem {
          Label("Home", systemImage: "house")
        }
        .tag(1)

      Text("Settings Screen")
        .tabItem {
          Label("Settings", systemImage: "gear")
        }
        .tag(2)
    }
  }
}

A The tab label "Home" remains visible.

B Both tab labels "Home" and "Settings" are visible simultaneously.

C The tab label "Settings" becomes visible.

D No tab label is visible after tapping.

💡 Hint

The selection state controls which tab is active and visible.

The TabView uses the selection binding to track the active tab. When the user taps the second tab, the selection changes to 2, so the "Settings" tab label and content become visible.

📝 Syntax

intermediate

Correct syntax for TabView with three tabs

Which option shows the correct SwiftUI code to create a TabView with three tabs labeled "First", "Second", and "Third"?

A

TabView {
  Text("First Tab").tabItem { Label("First", systemImage: "1.circle") }
  Text("Second Tab").tabItem { Label("Second", systemImage: "2.circle") }
  Text("Third Tab").tabItem { Label("Third", systemImage: "3.circle") }
}

B

TabView {
  Text("First Tab").tabItem { Label("First") }
  Text("Second Tab").tabItem { Label("Second") }
  Text("Third Tab").tabItem { Label("Third") }
}

C

TabView {
  Text("First Tab").tabItem { "First" }
  Text("Second Tab").tabItem { "Second" }
  Text("Third Tab").tabItem { "Third" }
}

D

TabView {
  Text("First Tab").tabItem(Label("First", systemImage: "1.circle"))
  Text("Second Tab").tabItem(Label("Second", systemImage: "2.circle"))
  Text("Third Tab").tabItem(Label("Third", systemImage: "3.circle"))
}

💡 Hint

tabItem expects a view builder with a Label for accessibility and icon.

Option A correctly uses the tabItem modifier with a Label view including text and systemImage. Other options have syntax errors or missing required parameters.

❓ lifecycle

advanced

State preservation in TabView

In a SwiftUI TabView with multiple tabs, what happens to the state of a tab's view when the user switches to another tab?

A The state is preserved as long as the TabView remains in memory.

B The state is reset to initial values every time the tab is selected.

C The state is saved to disk and restored when the tab is selected again.

D The state is lost immediately when switching tabs.

💡 Hint

Think about how SwiftUI keeps views alive inside TabView.

SwiftUI keeps the views of all tabs alive in memory while the TabView exists, so their state is preserved when switching tabs.

❓ navigation

advanced

Programmatic tab selection

How can you programmatically switch to the third tab in a SwiftUI TabView?

iOS Swift

import SwiftUI

struct ContentView: View {
  @State private var selection = 1

  var body: some View {
    VStack {
      TabView(selection: $selection) {
        Text("First Tab").tabItem { Label("First", systemImage: "1.circle") }.tag(1)
        Text("Second Tab").tabItem { Label("Second", systemImage: "2.circle") }.tag(2)
        Text("Third Tab").tabItem { Label("Third", systemImage: "3.circle") }.tag(3)
      }
      Button("Go to Third Tab") {
        // What code goes here?
      }
    }
  }
}

A selection = 3

B self.selection = 3

C selection.set(3)

D TabView.selection = 3

💡 Hint

Use the @State variable to update the selected tab.

Inside the View struct, you must use self.selection = 3 to update the @State variable and switch tabs programmatically.

🔧 Debug

expert

Why does the TabView not switch tabs?

Given this SwiftUI code, why does tapping the tab items not change the visible tab?

iOS Swift

import SwiftUI

struct ContentView: View {
  @State private var selection = 1

  var body: some View {
    TabView(selection: .constant(selection)) {
      Text("First Tab").tabItem { Label("First", systemImage: "1.circle") }.tag(1)
      Text("Second Tab").tabItem { Label("Second", systemImage: "2.circle") }.tag(2)
    }
  }
}

A The @State variable selection is not initialized.

B The tags are not unique integers.

C The tabItem labels are missing accessibility identifiers.

D The selection binding uses .constant, so it is read-only and does not update.

💡 Hint

Check how the selection binding is passed to TabView.

Using .constant(selection) creates a read-only binding, so TabView cannot update the selection state when tabs are tapped, preventing tab switching.

Practice

1. What is the main purpose of using TabView in a SwiftUI app?

easy

A. To create a tab bar for switching between different views

B. To display a list of items in a scrollable view

C. To handle user input forms

D. To show a single full-screen view without navigation

Solution

1. Step 1: Understand the role of TabView

   TabView is designed to create a tab bar interface that lets users switch between multiple views easily.

2. Step 2: Compare with other UI components

   Other options like lists or forms serve different purposes, not tab navigation.

3. Final Answer:

   To create a tab bar for switching between different views -> Option A

4. Quick Check:

   TabView = Tab bar navigation [OK]

Hint: TabView always creates tabs for multiple views [OK]

Common Mistakes:

• Confusing TabView with List or NavigationView
• Thinking TabView shows only one view
• Assuming TabView handles forms or inputs

2. Which of the following is the correct syntax to add a tab item with a label and system image inside a TabView in SwiftUI?

easy

A. Text("Home").tabItem(Label("Home", systemImage: "house"))

B. Text("Home").tabItem(Label("Home", image: "house"))

C. Text("Home").tabItem { Label("Home", image: "house") }

D. Text("Home").tabItem { Label("Home", systemImage: "house") }

Solution

1. Step 1: Recall the correct Label initializer

   The Label view uses the initializer Label("text", systemImage: "iconName") to show text with a system icon.

2. Step 2: Check tabItem syntax

   The tabItem modifier takes a trailing closure with the Label view inside braces {}.

3. Final Answer:

   Text("Home").tabItem { Label("Home", systemImage: "house") } -> Option D

4. Quick Check:

   tabItem uses Label with systemImage inside braces [OK]

Hint: Use Label("text", systemImage: "icon") inside tabItem braces [OK]

Common Mistakes:

• Using image: instead of systemImage:
• Missing braces {} around tabItem content
• Passing tabItem parameters incorrectly

3. Given the code below, what will be displayed when the app runs?

TabView {
  Text("First Tab").tabItem { Label("First", systemImage: "1.circle") }
  Text("Second Tab").tabItem { Label("Second", systemImage: "2.circle") }
}

medium

A. Only the text 'First Tab' is shown without any tabs

B. A tab bar with two tabs labeled 'First' and 'Second', showing respective texts when selected

C. A runtime error because TabView needs a NavigationView

D. A tab bar with icons but no labels

Solution

1. Step 1: Analyze the TabView structure

   There are two tabs, each with a Text view and a tabItem with label and icon.

2. Step 2: Understand TabView behavior

   TabView shows a tab bar with the labels and icons, switching the displayed Text accordingly.

3. Final Answer:

   A tab bar with two tabs labeled 'First' and 'Second', showing respective texts when selected -> Option B

4. Quick Check:

   TabView shows tabs with labels and content [OK]

Hint: TabView shows tabs with label and content views [OK]

Common Mistakes:

• Thinking TabView requires NavigationView
• Expecting only one tab to show
• Assuming labels won't appear

4. Identify the error in this SwiftUI TabView code:

TabView {
  Text("Home")
    .tabItem(Label("Home", systemImage: "house"))
  Text("Settings")
    .tabItem { Label("Settings", systemImage: "gear") }
}

medium

A. The first tabItem is missing braces {} around Label

B. The second tabItem uses incorrect systemImage name

C. TabView cannot have more than one tabItem

D. Text views cannot be used inside TabView

Solution

1. Step 1: Check tabItem syntax for each tab

   The first tabItem uses parentheses without braces, which is incorrect; it needs braces {} around the Label.

2. Step 2: Verify the second tabItem syntax

   The second tabItem correctly uses braces with Label inside.

3. Final Answer:

   The first tabItem is missing braces {} around Label -> Option A

4. Quick Check:

   tabItem requires braces around content [OK]

Hint: Always use braces {} for tabItem content [OK]

Common Mistakes:

• Using parentheses instead of braces for tabItem
• Assuming systemImage names cause errors
• Thinking TabView limits number of tabs

5. You want to create a TabView with three tabs: Home, Search, and Profile. Each tab should show a different view and have a label with a system icon. Which code snippet correctly implements this with minimal repetition?

hard

A. TabView {
HomeView().tabItem { Text("Home") }
SearchView().tabItem { Text("Search") }
ProfileView().tabItem { Text("Profile") }
}

B. TabView {
HomeView().tabItem(Label("Home", systemImage: "house"))
SearchView().tabItem(Label("Search", systemImage: "magnifyingglass"))
ProfileView().tabItem(Label("Profile", systemImage: "person"))
}

C. TabView {
HomeView().tabItem { Label("Home", systemImage: "house") }
SearchView().tabItem { Label("Search", systemImage: "magnifyingglass") }
ProfileView().tabItem { Label("Profile", systemImage: "person") }
}

D. TabView {
HomeView().tabItem { Label("Home") }
SearchView().tabItem { Label("Search") }
ProfileView().tabItem { Label("Profile") }
}

Solution

1. Step 1: Check tabItem syntax for each tab

   TabView { HomeView().tabItem { Label("Home", systemImage: "house") } SearchView().tabItem { Label("Search", systemImage: "magnifyingglass") } ProfileView().tabItem { Label("Profile", systemImage: "person") } } correctly uses braces with Label including both text and systemImage for each tab.

2. Step 2: Review other options for errors

   TabView { HomeView().tabItem(Label("Home", systemImage: "house")) SearchView().tabItem(Label("Search", systemImage: "magnifyingglass")) ProfileView().tabItem(Label("Profile", systemImage: "person")) } misses braces, causing syntax errors. TabView { HomeView().tabItem { Text("Home") } SearchView().tabItem { Text("Search") } ProfileView().tabItem { Text("Profile") } } uses Text instead of Label, so no icons. TabView { HomeView().tabItem { Label("Home") } SearchView().tabItem { Label("Search") } ProfileView().tabItem { Label("Profile") } } uses Label without systemImage, so no icons.

3. Final Answer:

   TabView { HomeView().tabItem { Label("Home", systemImage: "house") } SearchView().tabItem { Label("Search", systemImage: "magnifyingglass") } ProfileView().tabItem { Label("Profile", systemImage: "person") } } -> Option C

4. Quick Check:

   Use Label with text and systemImage inside braces for tabItem [OK]

Hint: Use Label with text and systemImage inside braces for tabs [OK]

Common Mistakes:

• Omitting braces {} around tabItem content
• Using Text instead of Label for icons
• Forgetting systemImage parameter