iOS ecosystem overview (iPhone, iPad, Apple Watch) in iOS Swift - Mini App: Build & Ship

Build: Device Info Overview

Shows a simple overview screen listing iPhone, iPad, and Apple Watch with icons and short descriptions.

Target UI

-----------------------------
| Device Info Overview       |
|---------------------------|
| 📱 iPhone                 |
|   A powerful smartphone.   |
|                           |
| 📲 iPad                   |
|   A versatile tablet.      |
|                           |
| ⌚ Apple Watch             |
|   A handy smartwatch.      |
|                           |
-----------------------------

Display a vertical list with three rows: iPhone, iPad, Apple Watch

Each row shows an emoji icon on the left, device name as title, and a short description below

Use a NavigationView with the title 'Device Info Overview'

Use SwiftUI VStack and HStack for layout

Text should be readable and spaced nicely

Starter Code

iOS Swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack(alignment: .leading, spacing: 20) {
                // TODO: Add device rows here
            }
            .padding()
            .navigationTitle("Device Info Overview")
        }
    }
}

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

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack(alignment: .leading, spacing: 20) {
                HStack(alignment: .top, spacing: 15) {
                    Text("📱")
                        .font(.largeTitle)
                    VStack(alignment: .leading, spacing: 5) {
                        Text("iPhone")
                            .font(.headline)
                        Text("A powerful smartphone.")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                    }
                }
                HStack(alignment: .top, spacing: 15) {
                    Text("📲")
                        .font(.largeTitle)
                    VStack(alignment: .leading, spacing: 5) {
                        Text("iPad")
                            .font(.headline)
                        Text("A versatile tablet.")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                    }
                }
                HStack(alignment: .top, spacing: 15) {
                    Text("⌚")
                        .font(.largeTitle)
                    VStack(alignment: .leading, spacing: 5) {
                        Text("Apple Watch")
                            .font(.headline)
                        Text("A handy smartwatch.")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                    }
                }
                Spacer()
            }
            .padding()
            .navigationTitle("Device Info Overview")
        }
    }
}

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

This SwiftUI view uses a NavigationView to provide a navigation bar with the title "Device Info Overview". Inside, a vertical stack (VStack) arranges three horizontal stacks (HStack), each representing a device.

Each HStack has an emoji icon on the left with a large font size, and a vertical stack (VStack) on the right containing the device name in headline font and a short description in a smaller, secondary-colored font. Spacing and alignment ensure the layout is neat and readable.

This simple layout introduces how to combine text and icons to create an overview screen for multiple devices in the iOS ecosystem.

Final Result

Completed Screen

-----------------------------
| Device Info Overview       |
|---------------------------|
| 📱 iPhone                 |
|   A powerful smartphone.   |
|                           |
| 📲 iPad                   |
|   A versatile tablet.      |
|                           |
| ⌚ Apple Watch             |
|   A handy smartwatch.      |
|                           |
-----------------------------

User sees a scrollable vertical list with three device rows

Navigation bar shows the title 'Device Info Overview'

No interactive elements on this screen

Stretch Goal

Add a button in the navigation bar that shows an alert with a short message about the iOS ecosystem.

💡 Hint

Use the .toolbar modifier to add a Button with an action that toggles a @State Bool to show an Alert.