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.

Practice

1. Which device is NOT part of the iOS ecosystem?

easy

A. iPad

B. Android Phone

C. Apple Watch

D. iPhone

Solution

1. Step 1: Identify devices in the iOS ecosystem

   The iOS ecosystem includes iPhone, iPad, and Apple Watch devices.

2. Step 2: Compare options with known devices

   Android Phone is not part of Apple's iOS ecosystem; it runs a different operating system.

3. Final Answer:

   Android Phone -> Option B

4. Quick Check:

   iOS devices exclude Android phones [OK]

Hint: Remember Apple devices only include iPhone, iPad, Watch [OK]

Common Mistakes:

• Confusing Android phones as iOS devices
• Thinking iPod Touch is a main iOS device here
• Mixing up Apple Watch with other smartwatches

2. Which Swift code snippet correctly checks if the device is an iPad?

easy

A. if UIDevice.current.userInterfaceIdiom == .pad { /* iPad code */ }

B. if UIDevice.current.deviceType == "iPad" { /* iPad code */ }

C. if UIDevice.isPad { /* iPad code */ }

D. if UIDevice.current.model == "iPad" { /* iPad code */ }

Solution

1. Step 1: Recall correct property for device type

   UIDevice.current.userInterfaceIdiom returns the device type enum, including .pad for iPad.

2. Step 2: Check each option's syntax

   if UIDevice.current.userInterfaceIdiom == .pad { /* iPad code */ } uses the correct property and enum value. Others use incorrect or non-existent properties.

3. Final Answer:

   if UIDevice.current.userInterfaceIdiom == .pad { /* iPad code */ } -> Option A

4. Quick Check:

   Use userInterfaceIdiom == .pad to detect iPad [OK]

Hint: Use userInterfaceIdiom property to detect device type [OK]

Common Mistakes:

• Using non-existent properties like deviceType or isPad
• Comparing model string instead of userInterfaceIdiom
• Forgetting to use enum .pad for iPad

3. What will this Swift code print on an Apple Watch device?

let device = UIDevice.current
switch device.userInterfaceIdiom {
  case .phone: print("iPhone")
  case .pad: print("iPad")
  case .carPlay: print("CarPlay")
  default: print("Other")
}

medium

A. CarPlay

B. iPad

C. iPhone

D. Other

Solution

1. Step 1: Understand userInterfaceIdiom values

   Apple Watch devices have a userInterfaceIdiom value of .watch, which is not explicitly handled in the switch.

2. Step 2: Determine which case matches

   Since .watch is not matched by .phone, .pad, or .carPlay, the default case runs, printing "Other".

3. Final Answer:

   Other -> Option D

4. Quick Check:

   Unmatched idioms print default "Other" [OK]

Hint: Default case catches Apple Watch userInterfaceIdiom [OK]

Common Mistakes:

• Assuming Apple Watch is .phone or .pad
• Missing default case in switch
• Confusing .carPlay with Apple Watch

4. Identify the error in this Swift code intended to detect Apple Watch devices:

if UIDevice.current.userInterfaceIdiom == .watch {
  print("Apple Watch detected")
}

medium

A. The code is correct and will work as expected

B. UIDevice.current is not accessible on Apple Watch

C. The comparison should use a string instead of enum

D. The .watch case does not exist in userInterfaceIdiom enum

Solution

1. Step 1: Verify UIUserInterfaceIdiom enum

   UIUserInterfaceIdiom includes .watch (available since iOS 14.0/watchOS 7.0).

2. Step 2: Confirm UIDevice usage on Apple Watch

   UIDevice.current is accessible in watchOS apps (UIKit supported since watchOS 7), and returns .watch on Apple Watch.

3. Final Answer:

   The code is correct and will work as expected -> Option A

4. Quick Check:

   UIDevice.userInterfaceIdiom == .watch detects Apple Watch [OK]

Hint: Use UIDevice.current.userInterfaceIdiom == .watch for Apple Watch detection [OK]

Common Mistakes:

• Thinking UIDevice.current is unavailable on Apple Watch apps
• Believing .watch does not exist in UIUserInterfaceIdiom
• Assuming string comparison is needed instead of enum

5. You want to create a single SwiftUI app that adapts its layout for iPhone, iPad, and Apple Watch. Which approach is best?

hard

A. Create separate apps for each device and share no code

B. Use only iPhone layout and scale it for other devices

C. Use conditional views with if UIDevice.current.userInterfaceIdiom and WKInterfaceDevice checks

D. Ignore device differences and use fixed sizes for all

Solution

1. Step 1: Understand device-specific UI needs

   iPhone, iPad, and Apple Watch have different screen sizes and interaction models requiring adaptive layouts.

2. Step 2: Choose adaptive coding approach

   Using conditional checks with UIDevice for iPhone/iPad and WKInterfaceDevice for Apple Watch allows customizing views in one app.

3. Step 3: Evaluate other options

   Separate apps increase maintenance; scaling fixed layouts reduces usability; ignoring differences harms UX.

4. Final Answer:

   Use conditional views with if UIDevice.current.userInterfaceIdiom and WKInterfaceDevice checks -> Option C

5. Quick Check:

   Adaptive UI with device checks is best practice [OK]

Hint: Use device checks to adapt UI in one app [OK]

Common Mistakes:

• Building separate apps for each device unnecessarily
• Using fixed layouts that don't fit all screens
• Ignoring Apple Watch's unique interface needs