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.

Practice

1. Which SwiftUI view modifier aligns text to the center horizontally within its container?

easy

A. .background(Color.blue)

B. .multilineTextAlignment(.center)

C. .padding()

D. .frame(alignment: .leading)

Solution

1. Step 1: Understand text alignment modifiers

   The .multilineTextAlignment modifier controls horizontal alignment of text inside its view.

2. Step 2: Identify the center alignment option

   Using .multilineTextAlignment(.center) centers the text horizontally.

3. Final Answer:

   .multilineTextAlignment(.center) -> Option B

4. Quick Check:

   Text alignment center = .multilineTextAlignment(.center) [OK]

Hint: Use .multilineTextAlignment for text horizontal alignment [OK]

Common Mistakes:

• Confusing .frame(alignment:) with text alignment
• Using .padding() expecting alignment effect
• Thinking .background affects alignment

2. Which of the following is the correct syntax to add a fixed horizontal space of 20 points between two views in SwiftUI?

easy

A. Spacer().frame(width: 20)

B. Spacer(minLength: 20)

C. Spacer().padding(20)

D. Spacer().frame(height: 20)

Solution

1. Step 1: Understand Spacer behavior

   Spacer creates flexible space, but to fix size, we use frame modifier.

2. Step 2: Set fixed width for horizontal spacing

   Using Spacer().frame(width: 20) creates a fixed horizontal space of 20 points.

3. Final Answer:

   Spacer().frame(width: 20) -> Option A

4. Quick Check:

   Fixed horizontal space = Spacer with frame width [OK]

Hint: Use Spacer with .frame(width:) for fixed horizontal space [OK]

Common Mistakes:

• Using minLength parameter which is optional and flexible
• Setting frame height instead of width for horizontal space
• Using padding which adds space inside view, not between views

3. What will be the horizontal alignment of the text inside this VStack?

VStack(alignment: .leading) {
  Text("Hello")
  Text("World")
}

medium

A. Both texts aligned to the leading (left) edge horizontally

B. Both texts aligned to the center horizontally

C. Texts aligned independently with default center alignment

D. Texts aligned to the trailing (right) edge horizontally

Solution

1. Step 1: Understand VStack alignment parameter

   VStack's alignment parameter sets horizontal alignment for its child views.

2. Step 2: Identify .leading alignment effect

   Using .leading aligns all child views to the left edge horizontally.

3. Final Answer:

   Both texts aligned to the leading (left) edge horizontally -> Option A

4. Quick Check:

   VStack(alignment: .leading) aligns children left [OK]

Hint: VStack(alignment: .leading) aligns children left horizontally [OK]

Common Mistakes:

• Assuming default center alignment overrides VStack alignment
• Confusing VStack alignment with Text alignment modifiers
• Thinking alignment affects vertical position

4. Identify the error in this SwiftUI code that tries to add space between two buttons:

HStack {
  Button("OK") {}
  Spacer(20)
  Button("Cancel") {}
}

medium

A. Buttons must be wrapped in VStack, not HStack

B. Button labels must be Text views, not strings

C. Spacer must be replaced with padding for spacing

D. Spacer cannot take a direct integer parameter like 20

Solution

1. Step 1: Check Spacer usage

   Spacer does not accept an integer parameter directly; it uses minLength as a named parameter.

2. Step 2: Correct Spacer syntax

   Correct usage is Spacer(minLength: 20) or Spacer().frame(width: 20) for fixed space.

3. Final Answer:

   Spacer cannot take a direct integer parameter like 20 -> Option D

4. Quick Check:

   Spacer parameter must be named minLength [OK]

Hint: Spacer needs named minLength parameter, not direct integer [OK]

Common Mistakes:

• Passing integer without parameter name to Spacer
• Confusing Spacer with padding for spacing
• Thinking Button labels must be Text views

5. You want to create a horizontal stack with three Text views spaced evenly across the screen width. Which code snippet achieves this best?

hard

A. HStack {
Text("One")
Text("Two")
Text("Three")
}.frame(maxWidth: .infinity, alignment: .center)

B. HStack(spacing: 50) {
Text("One")
Text("Two")
Text("Three")
}

C. HStack {
Text("One")
Spacer()
Text("Two")
Spacer()
Text("Three")
}

D. VStack {
Text("One")
Spacer()
Text("Two")
Spacer()
Text("Three")
}

Solution

1. Step 1: Understand even spacing with Spacer

   Using Spacer() between views adds flexible space that pushes views apart evenly.

2. Step 2: Analyze each option

   HStack { Text("One") Spacer() Text("Two") Spacer() Text("Three") } uses Spacer() between Text views inside HStack, distributing them evenly horizontally.

3. Step 3: Exclude other options

   HStack(spacing: 50) { Text("One") Text("Two") Text("Three") } uses fixed spacing, not flexible. HStack { Text("One") Text("Two") Text("Three") }.frame(maxWidth: .infinity, alignment: .center) centers all texts together. VStack { Text("One") Spacer() Text("Two") Spacer() Text("Three") } uses VStack, which stacks vertically.

4. Final Answer:

   HStack with Spacer() between Text views for even spacing -> Option C

5. Quick Check:

   Use Spacer() in HStack for even horizontal spacing [OK]

Hint: Use Spacer() between views in HStack for even spacing [OK]

Common Mistakes:

• Using fixed spacing instead of flexible Spacer
• Using VStack instead of HStack for horizontal layout
• Relying on frame alignment without spacers