Alignment and spacing in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Understanding SwiftUI VStack Alignment

What will be the horizontal alignment of the text views inside this VStack by default?

iOS Swift

VStack {
  Text("Hello")
  Text("World")
}

A Trailing aligned horizontally

B Leading aligned horizontally

C Justified alignment horizontally

D Center aligned horizontally

💡 Hint

Think about the default alignment behavior of VStack in SwiftUI.

By default, VStack aligns its children views horizontally centered unless specified otherwise.

❓ ui_behavior

intermediate

Spacing in HStack

Given this HStack, what is the space between the two Text views?

iOS Swift

HStack(spacing: 20) {
  Text("Left")
  Text("Right")
}

A 20 points of space between the texts

B Default system spacing between the texts

C No space between the texts

D 40 points of space between the texts

💡 Hint

Look at the spacing parameter in the HStack initializer.

The spacing parameter sets the exact space between child views in the stack. Here it is 20 points.

❓ lifecycle

advanced

Effect of Padding on View Size

What happens to the size of a SwiftUI Text view when you add .padding() modifier?

iOS Swift

Text("Hello")
  .padding()

A The view becomes invisible

B The view size increases by adding space around the text

C The view size remains the same

D The view size decreases to fit the text tightly

💡 Hint

Padding adds empty space around the content inside the view.

Padding adds space inside the view's bounds around its content, increasing the overall size.

📝 Syntax

advanced

Correct Syntax for Center Alignment in VStack

Which option correctly centers all child views horizontally inside a VStack?

A VStack(alignment: .trailing) { Text("A") }

B VStack(alignment: .leading) { Text("A") }

C VStack(alignment: .center) { Text("A") }

D VStack(alignment: .fill) { Text("A") }

💡 Hint

Check the valid alignment options for VStack.

The .center alignment centers child views horizontally inside VStack. Other options align differently or are invalid.

🔧 Debug

expert

Fixing Unexpected Spacing in SwiftUI Layout

You have this code but notice extra space around the Text view. What causes it?

iOS Swift

VStack {
  Text("Hello")
    .padding(.horizontal, 30)
  Text("World")
}

A The .padding(.horizontal, 30) adds 30 points padding on left and right, increasing space

B The VStack adds default spacing causing extra space

C Text views have default margin causing extra space

D The code has a syntax error causing layout issues

💡 Hint

Padding adds space inside the view's bounds around content.

The horizontal padding adds 30 points on each side of the Text, increasing its width and space around it.