Alignment and spacing in iOS Swift - Mini App: Build & Ship

Build: Profile Info Screen

This screen shows a user's profile picture, name, and a short bio. The layout uses alignment and spacing to look neat and balanced.

Target UI

-------------------------
|                       |
|       [Profile Pic]    |
|                       |
|      John Appleseed    |
|                       |
|  iOS developer and     |
|  coffee lover.         |
|                       |
-------------------------

Center the profile picture horizontally at the top with some space above.

Place the user's name below the picture, centered horizontally.

Add a short bio text below the name, also centered.

Use vertical spacing of 20 points between picture and name, and 10 points between name and bio.

Add padding around the whole content so it doesn't touch screen edges.

Starter Code

iOS Swift

import SwiftUI

struct ProfileInfoView: View {
    var body: some View {
        VStack {
            Image(systemName: "person.circle.fill")
                .resizable()
                .frame(width: 100, height: 100)
                // TODO: Add alignment and spacing here

            Text("John Appleseed")
                .font(.title)
                // TODO: Add alignment and spacing here

            Text("iOS developer and coffee lover.")
                .font(.body)
                .multilineTextAlignment(.center)
                // TODO: Add alignment and spacing here
        }
        // TODO: Add padding here
    }
}

struct ProfileInfoView_Previews: PreviewProvider {
    static var previews: some View {
        ProfileInfoView()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct ProfileInfoView: View {
    var body: some View {
        VStack(spacing: 0) {
            Image(systemName: "person.circle.fill")
                .resizable()
                .frame(width: 100, height: 100)
                .padding(.top, 20)

            Text("John Appleseed")
                .font(.title)
                .padding(.top, 20)

            Text("iOS developer and coffee lover.")
                .font(.body)
                .multilineTextAlignment(.center)
                .padding(.top, 10)
        }
        .frame(maxWidth: .infinity)
        .padding(20)
        .background(Color(UIColor.systemBackground))
    }
}

struct ProfileInfoView_Previews: PreviewProvider {
    static var previews: some View {
        ProfileInfoView()
    }
}

We used a VStack to stack the profile picture, name, and bio vertically. The spacing parameter sets the default space between elements to 0 points.

We added padding(.top, 20) to the profile picture and name to create 20 points vertical spacing above them, and 10 points above the bio text.

All elements are centered horizontally by default in a VStack, but we ensured the VStack takes full width with .frame(maxWidth: .infinity) so the content is centered in the screen.

Finally, we added .padding(20) around the VStack to keep content away from screen edges, making the layout neat and balanced.

Final Result

Completed Screen

-------------------------
|                       |
|       (Profile Pic)    |
|                       |
|      John Appleseed    |
|                       |
|  iOS developer and     |
|  coffee lover.         |
|                       |
-------------------------

The screen shows a centered profile picture at the top with space above.

User's name is centered below the picture with vertical spacing.

Bio text is centered below the name with smaller vertical spacing.

Content has padding so it does not touch screen edges.

Stretch Goal

Add a button below the bio that says 'Follow' and is centered horizontally with some spacing above it.

💡 Hint

Add a Button view inside the VStack below the bio Text. Use .padding(.top, 20) on the button for spacing.