MVVM pattern in iOS Swift - Mini App: Build & Ship

Build: Simple Counter

A screen that shows a number and two buttons to increase or decrease it using MVVM pattern.

Target UI

-------------------
|   Simple Counter  |
-------------------
|                   |
|        0          |
|                   |
|  [-]       [+]    |
-------------------

Display a number starting at 0

Two buttons: '+' to increase, '-' to decrease the number

Use MVVM pattern: separate ViewModel to handle logic

View updates automatically when number changes

Starter Code

iOS Swift

import SwiftUI

struct ContentView: View {
    // TODO: Create ViewModel instance here

    var body: some View {
        VStack(spacing: 40) {
            Text("0") // TODO: Bind this to ViewModel's number
                .font(.largeTitle)
            HStack(spacing: 60) {
                Button("-") {
                    // TODO: Call ViewModel to decrease number
                }
                .font(.title)
                Button("+") {
                    // TODO: Call ViewModel to increase number
                }
                .font(.title)
            }
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

iOS Swift

import SwiftUI

class CounterViewModel: ObservableObject {
    @Published var number: Int = 0

    func increase() {
        number += 1
    }

    func decrease() {
        number -= 1
    }
}

struct ContentView: View {
    @StateObject private var viewModel = CounterViewModel()

    var body: some View {
        VStack(spacing: 40) {
            Text("\(viewModel.number)")
                .font(.largeTitle)
            HStack(spacing: 60) {
                Button("-") {
                    viewModel.decrease()
                }
                .font(.title)
                Button("+") {
                    viewModel.increase()
                }
                .font(.title)
            }
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

This app uses the MVVM pattern by separating the logic from the view. The CounterViewModel class holds the number and methods to change it. It uses @Published so SwiftUI updates the UI automatically when the number changes.

The ContentView creates a @StateObject instance of the ViewModel. The text showing the number binds to viewModel.number. The buttons call the ViewModel's increase and decrease methods. This keeps the UI simple and the logic in the ViewModel, following MVVM principles.

Final Result

Completed Screen

-------------------
|   Simple Counter  |
-------------------
|                   |
|        0          |
|                   |
|  [-]       [+]    |
-------------------

Tapping '+' increases the number by 1 and updates the display

Tapping '-' decreases the number by 1 and updates the display

Stretch Goal

Add a reset button that sets the number back to 0

💡 Hint

Add a new method in ViewModel to reset number and a button in the view that calls it