iOS Swiftmobile~20 mins

Modularization in iOS Swift - Mini App: Build & Ship

Choose your learning style9 modes available

Learn Why Deep UI Try Challenge Build Recall Publish

Build: Profile Screen

Build a profile screen that uses modular components for header and details sections.

Target UI

-------------------------
|       Profile         |
|-----------------------|
| [Avatar]  John Doe    |
|                       |
| Email: john@example.com|
| Phone: +1234567890    |
|-----------------------|
|       Edit Button      |
-------------------------

Create a reusable HeaderView component showing avatar and name

Create a reusable DetailsView component showing email and phone

Use these components in ProfileScreen

Add an Edit button at the bottom

Starter Code

iOS Swift

import SwiftUI

struct ProfileScreen: View {
    var body: some View {
        VStack {
            // TODO: Add HeaderView here
            // TODO: Add DetailsView here
            Spacer()
            Button("Edit") {
                // Edit action
            }
            .padding()
        }
        .padding()
    }
}

struct ProfileScreen_Previews: PreviewProvider {
    static var previews: some View {
        ProfileScreen()
    }
}

// TODO: Create HeaderView component
// TODO: Create DetailsView component

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct HeaderView: View {
    var body: some View {
        HStack(spacing: 16) {
            Image(systemName: "person.crop.circle.fill")
                .resizable()
                .frame(width: 64, height: 64)
                .foregroundColor(.blue)
            Text("John Doe")
                .font(.title)
                .fontWeight(.bold)
            Spacer()
        }
        .padding(.bottom, 20)
    }
}

struct DetailsView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text("Email: john@example.com")
            Text("Phone: +1234567890")
        }
        .font(.body)
        .foregroundColor(.secondary)
    }
}

struct ProfileScreen: View {
    var body: some View {
        VStack {
            HeaderView()
            DetailsView()
            Spacer()
            Button("Edit") {
                // Edit action
            }
            .padding()
            .frame(maxWidth: .infinity)
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
        }
        .padding()
    }
}

struct ProfileScreen_Previews: PreviewProvider {
    static var previews: some View {
        ProfileScreen()
    }
}

We created two reusable components: HeaderView and DetailsView. HeaderView shows an avatar icon and the user name side by side. DetailsView lists the email and phone in a vertical stack. The main ProfileScreen uses these components inside a vertical stack, with a spacer to push the Edit button to the bottom. The Edit button is styled with a blue background and white text for clarity. This modular approach keeps code organized and reusable.

Final Result

Completed Screen

-------------------------
|       Profile         |
|-----------------------|
| (icon)   John Doe     |
|                       |
| Email: john@example.com|
| Phone: +1234567890    |
|                       |
| [     Edit Button     ]|
-------------------------