Image view (system and asset) in iOS Swift - Mini App: Build & Ship

Build: ImageViewScreen

This screen shows two images: one from the system icons and one from the app assets.

Target UI

-------------------------
|       ImageViewScreen  |
|-----------------------|
|  [System Icon Image]   |
|                       |
|  [Asset Image]         |
|                       |
|                       |
-------------------------

Display a system image using Image(systemName:).

Display an image from the app assets.

Center both images vertically with some spacing.

Set the system image tint color to blue.

Set the asset image content mode to aspect fit.

Use SwiftUI for the UI.

Starter Code

iOS Swift

import SwiftUI

struct ImageViewScreen: View {
    var body: some View {
        VStack {
            // TODO: Add system image here
            
            // TODO: Add asset image here
        }
        .padding()
    }
}

struct ImageViewScreen_Previews: PreviewProvider {
    static var previews: some View {
        ImageViewScreen()
    }
}

Task 1

Task 2

Solution

iOS Swift

import SwiftUI

struct ImageViewScreen: View {
    var body: some View {
        VStack(spacing: 40) {
            Image(systemName: "star.fill")
                .resizable()
                .scaledToFit()
                .frame(width: 100, height: 100)
                .foregroundColor(.blue)
            
            Image("exampleImage")
                .resizable()
                .scaledToFit()
                .frame(width: 150, height: 150)
        }
        .padding()
    }
}

struct ImageViewScreen_Previews: PreviewProvider {
    static var previews: some View {
        ImageViewScreen()
    }
}

We use a VStack to stack the two images vertically with spacing of 40 points for clear separation. The system image uses Image(systemName: "star.fill"), which is resizable and scaled to fit a 100x100 frame, and tinted blue with foregroundColor(.blue). The asset image named "exampleImage" is also resizable and scaled to fit a 150x150 frame to show the image properly without distortion. Padding is added around the VStack for spacing from screen edges.

Final Result

Completed Screen

-------------------------
|       ImageViewScreen  |
|-----------------------|
|        ★ (blue)        |
|                       |
|    [exampleImage]      |
|                       |
|                       |
-------------------------

The screen shows a blue star system icon on top.

Below it, the asset image named 'exampleImage' is displayed.

Both images scale nicely and keep their aspect ratio.

Stretch Goal

Add a toggle button to switch the system image tint color between blue and red.

💡 Hint

Use a @State variable to track the color and change foregroundColor dynamically when the button is tapped.