ScrollView in iOS Swift - Mini App: Build & Ship

Build: Simple ScrollView Screen

This screen shows a vertical list of colored boxes inside a scrollable area. The user can scroll up and down to see all boxes.

Target UI

---------------------
| Simple ScrollView  |
|-------------------|
| [Red Box]         |
| [Green Box]       |
| [Blue Box]        |
| [Yellow Box]      |
| [Purple Box]      |
| [Orange Box]      |
|                   |
|                   |
|                   |
---------------------

Use a ScrollView to allow vertical scrolling

Inside the ScrollView, add six colored rectangular views stacked vertically

Each colored box should have a fixed height of 150 points and full screen width

Add some spacing (10 points) between each colored box

The screen should have a navigation title 'Simple ScrollView'

Starter Code

iOS Swift

import SwiftUI

struct ScrollViewScreen: View {
    var body: some View {
        NavigationView {
            // TODO: Add ScrollView with colored boxes here
            Text("Add your ScrollView here")
                .navigationTitle("Simple ScrollView")
        }
    }
}

struct ScrollViewScreen_Previews: PreviewProvider {
    static var previews: some View {
        ScrollViewScreen()
    }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

iOS Swift

import SwiftUI

struct ScrollViewScreen: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack(spacing: 10) {
                    Rectangle().fill(Color.red).frame(height: 150).frame(maxWidth: .infinity)
                    Rectangle().fill(Color.green).frame(height: 150).frame(maxWidth: .infinity)
                    Rectangle().fill(Color.blue).frame(height: 150).frame(maxWidth: .infinity)
                    Rectangle().fill(Color.yellow).frame(height: 150).frame(maxWidth: .infinity)
                    Rectangle().fill(Color.purple).frame(height: 150).frame(maxWidth: .infinity)
                    Rectangle().fill(Color.orange).frame(height: 150).frame(maxWidth: .infinity)
                }
                .padding()
            }
            .navigationTitle("Simple ScrollView")
        }
    }
}

struct ScrollViewScreen_Previews: PreviewProvider {
    static var previews: some View {
        ScrollViewScreen()
    }
}

We use ScrollView to make the content vertically scrollable. Inside it, a VStack stacks six colored rectangles vertically with 10 points spacing. Each rectangle has a fixed height of 150 points and stretches horizontally to fill the screen width using frame(maxWidth: .infinity). Padding is added around the stack for nice spacing from screen edges. The navigation title is set on the NavigationView to show "Simple ScrollView" at the top.

Final Result

Completed Screen

---------------------
| Simple ScrollView  |
|-------------------|
| [Red Box]         |
|                   |
| [Green Box]       |
|                   |
| [Blue Box]        |
|                   |
| [Yellow Box]      |
|                   |
| [Purple Box]      |
|                   |
| [Orange Box]      |
|                   |
|                   |
|                   |
---------------------

User can swipe up and down to scroll through all six colored boxes

The navigation bar title 'Simple ScrollView' stays fixed at the top

Stretch Goal

Add a button in the navigation bar that scrolls the ScrollView back to the top when tapped.

💡 Hint

Use ScrollViewReader with an ID on the first colored box and a button that calls scrollTo on it.

Practice

1. What is the main purpose of using a ScrollView in an iOS app?

easy

A. To create buttons that respond to taps

B. To allow users to scroll content that is larger than the screen

C. To display images without interaction

D. To change the app's background color

Solution

1. Step 1: Understand ScrollView's role

   A ScrollView lets users move through content that doesn't fit on the screen at once.

2. Step 2: Compare options

   Only To allow users to scroll content that is larger than the screen describes scrolling content, which is the ScrollView's purpose.

3. Final Answer:

   To allow users to scroll content that is larger than the screen -> Option B

4. Quick Check:

   ScrollView = scroll content [OK]

Hint: ScrollView enables scrolling for big content [OK]

Common Mistakes:

• Thinking ScrollView creates buttons
• Confusing ScrollView with static image display
• Assuming ScrollView changes colors

2. Which of the following is the correct way to create a vertical ScrollView in SwiftUI?

easy

A. ScrollView(.vertical) { Text("Hello") }

B. ScrollView(.horizontal) { Text("Hello") }

C. ScrollView(vertical) { Text("Hello") }

D. ScrollView(.diagonal) { Text("Hello") }

Solution

1. Step 1: Recall ScrollView initializer

   ScrollView takes a parameter for scroll direction: .vertical or .horizontal.

2. Step 2: Identify correct direction

   .vertical is for vertical scrolling, so ScrollView(.vertical) { Text("Hello") } is correct. ScrollView(.diagonal) { Text("Hello") } uses invalid .diagonal.

3. Final Answer:

   ScrollView(.vertical) { Text("Hello") } -> Option A

4. Quick Check:

   Vertical scroll = .vertical [OK]

Hint: Use .vertical for vertical scrolling in ScrollView [OK]

Common Mistakes:

• Using .diagonal which is not valid
• Confusing .horizontal with vertical
• Using incorrect syntax like ScrollView(vertical)

3. What will be the visible result of this SwiftUI code?

ScrollView(.horizontal) {
  HStack {
    ForEach(1...3, id: \ .self) { i in
      Text("Item \(i)")
        .frame(width: 100, height: 100)
        .background(Color.blue)
        .foregroundColor(.white)
        .padding(5)
    }
  }
}

medium

A. Three blue boxes labeled Item 1, Item 2, Item 3 arranged horizontally and scrollable

B. Three blue boxes arranged vertically with no scrolling

C. Only one blue box visible with no scrolling

D. Error because ScrollView cannot scroll horizontally

Solution

1. Step 1: Analyze ScrollView direction and content

   The ScrollView is horizontal, and inside is an HStack with three Text views styled as blue boxes.

2. Step 2: Understand layout and scrolling

   HStack arranges items horizontally. ScrollView allows horizontal scrolling if content is wider than screen.

3. Final Answer:

   Three blue boxes labeled Item 1, Item 2, Item 3 arranged horizontally and scrollable -> Option A

4. Quick Check:

   Horizontal ScrollView + HStack = horizontal scroll [OK]

Hint: Horizontal ScrollView + HStack = horizontal scrolling list [OK]

Common Mistakes:

• Thinking items arrange vertically inside HStack
• Assuming no scrolling happens
• Believing horizontal scroll is invalid

4. Identify the error in this SwiftUI ScrollView code:

ScrollView(.vertical) {
  VStack {
    Text("Hello")
  }
  Text("World")
}

medium

A. Text views cannot be inside ScrollView

B. ScrollView cannot scroll vertically

C. VStack cannot be used inside ScrollView

D. Multiple views inside ScrollView without a container causes error

Solution

1. Step 1: Check ScrollView content structure

   ScrollView expects a single child view. Here, VStack and Text("World") are siblings, which is invalid.

2. Step 2: Understand SwiftUI container rules

   To fix, wrap VStack and Text("World") inside a container like VStack or Group.

3. Final Answer:

   Multiple views inside ScrollView without a container causes error -> Option D

4. Quick Check:

   ScrollView needs one child view [OK]

Hint: ScrollView must have exactly one child view [OK]

Common Mistakes:

• Adding multiple sibling views directly inside ScrollView
• Thinking ScrollView can't scroll vertically
• Believing Text can't be inside ScrollView

5. You want to create a ScrollView that scrolls both vertically and horizontally to show a grid of colored squares. Which SwiftUI code snippet correctly achieves this?

hard

A. ScrollView(.horizontal) { LazyVGrid(columns: Array(repeating: GridItem(), count: 3)) { ForEach(0..<9) { i in Rectangle().fill(Color.red).frame(width: 50, height: 50) } } }

B. ScrollView(.vertical) { LazyHGrid(rows: Array(repeating: GridItem(), count: 3)) { ForEach(0..<9) { i in Rectangle().fill(Color.red).frame(width: 50, height: 50) } } }

C. ScrollView([.vertical, .horizontal]) { LazyVGrid(columns: Array(repeating: GridItem(), count: 3)) { ForEach(0..<9) { i in Rectangle().fill(Color.red).frame(width: 50, height: 50) } } }

D. ScrollView() { VStack { ForEach(0..<9) { i in Rectangle().fill(Color.red).frame(width: 50, height: 50) } } }

Solution

1. Step 1: Understand ScrollView directions

   To scroll both vertically and horizontally, pass [.vertical, .horizontal] as directions.

2. Step 2: Use grid layout inside ScrollView

   LazyVGrid with columns creates a grid that scrolls vertically and horizontally if inside a ScrollView with both directions.

3. Step 3: Check other options

   Options B and C use only one scroll direction or wrong grid type. ScrollView() { VStack { ForEach(0..<9) { i in Rectangle().fill(Color.red).frame(width: 50, height: 50) } } } uses VStack without scrolling horizontally.

4. Final Answer:

   ScrollView([.vertical, .horizontal]) { LazyVGrid(columns: Array(repeating: GridItem(), count: 3)) { ForEach(0..<9) { i in Rectangle().fill(Color.red).frame(width: 50, height: 50) } } } -> Option C

5. Quick Check:

   Both directions + LazyVGrid = scroll grid [OK]

Hint: Use ScrollView([.vertical, .horizontal]) for 2D scrolling [OK]

Common Mistakes:

• Using only one scroll direction for 2D scroll
• Mixing LazyHGrid with vertical scroll
• Not wrapping grid in ScrollView