Custom shapes and paths in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What shape does this SwiftUI Path draw?

Look at the SwiftUI Path code below. What shape will appear on the screen?

iOS Swift

Path { path in
  path.move(to: CGPoint(x: 50, y: 50))
  path.addLine(to: CGPoint(x: 150, y: 50))
  path.addLine(to: CGPoint(x: 100, y: 150))
  path.closeSubpath()
}

A A circle centered at (100,100)

B A triangle with base on top and point down

C A square with top-left corner at (50,50)

D A line from (50,50) to (150,50)

💡 Hint

The path moves to (50,50), then draws lines to (150,50) and (100,150), then closes the shape.

The code draws a triangle by connecting three points: (50,50), (150,50), and (100,150). Closing the path connects the last point back to the first.

📝 Syntax

intermediate

Which option correctly creates a rounded rectangle path in SwiftUI?

Choose the SwiftUI code snippet that correctly creates a rounded rectangle path with corner radius 10.

A Path(roundedRect: CGRect(x: 0, y: 0, width: 100, height: 50), cornerRadius: 10)

B Path(roundedRect: CGRect(x: 0, y: 0, width: 100, height: 50), radius: 10)

C Path(roundedRect: CGRect(x: 0, y: 0, width: 100, height: 50), corner: 10)

D Path(roundedRect: CGRect(x: 0, y: 0, width: 100, height: 50), cornerRadius: 10.0, style: .circular)

💡 Hint

Check the exact parameter names for the roundedRect initializer.

The correct initializer uses 'cornerRadius' as the parameter name for the radius of corners.

❓ lifecycle

advanced

When is the SwiftUI Shape's path(in:) method called?

In SwiftUI, the Shape protocol requires implementing path(in rect: CGRect). When does SwiftUI call this method?

A Only once when the shape is first created

B When the user taps the shape

C Only when the app launches

D Every time the view needs to redraw the shape, such as on size or state changes

💡 Hint

Think about when the UI needs to update visuals.

SwiftUI calls path(in:) whenever it needs to render or re-render the shape, including when the view size changes or state updates affect the shape.

🔧 Debug

advanced

Why does this custom path not render anything?

This SwiftUI code defines a custom shape but nothing appears on screen. What is the likely cause? struct MyShape: Shape { func path(in rect: CGRect) -> Path { var path = Path() path.move(to: CGPoint(x: rect.minX, y: rect.minY)) path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY)) // Missing path.closeSubpath() return path } }

iOS Swift

struct MyShape: Shape {
  func path(in rect: CGRect) -> Path {
    var path = Path()
    path.move(to: CGPoint(x: rect.minX, y: rect.minY))
    path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
    return path
  }
}

A The path coordinates are outside the view bounds

B The path is missing a stroke color

C The path only has a line segment and no closed shape, so fill does not show

D The path variable is not initialized

💡 Hint

Think about how fill works with open paths.

Filling an open path with only a line segment results in no visible fill. Closing the path or stroking it is needed to see the shape.

🧠 Conceptual

expert

What is the effect of using addQuadCurve(to:control:) in a SwiftUI Path?

In SwiftUI, what does the addQuadCurve(to:control:) method do when building a Path?

A Draws a smooth curved line from the current point to the 'to' point using the control point to shape the curve

B Draws a straight line ignoring the control point

C Draws a circle centered at the control point

D Creates a dashed line between the current point and the 'to' point

💡 Hint

Think about how quadratic Bézier curves work.

addQuadCurve(to:control:) adds a quadratic Bézier curve segment to the path, using the control point to define the curve's shape between the current point and the destination.