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.

Practice

1. What is the main purpose of the path(in: CGRect) method in a SwiftUI Shape?

easy

A. To animate the shape's size changes.

B. To set the background color of the shape.

C. To handle user tap gestures on the shape.

D. To define the outline of the custom shape by drawing paths.

Solution

1. Step 1: Understand the role of path(in: CGRect)

   This method is required by the Shape protocol to define the shape's outline.

2. Step 2: Recognize what the method returns

   It returns a Path that describes the shape's drawing instructions inside the given rectangle.

3. Final Answer:

   To define the outline of the custom shape by drawing paths. -> Option D

4. Quick Check:

   path(in: CGRect) defines shape outline [OK]

Hint: Remember: path(in:) draws the shape outline [OK]

Common Mistakes:

• Confusing path method with color or animation methods
• Thinking it handles user interaction
• Assuming it sets layout constraints

2. Which of the following is the correct way to start drawing a path at a specific point in SwiftUI?

easy

A. path.begin(at: CGPoint(x: 50, y: 50))

B. path.move(to: CGPoint(x: 50, y: 50))

C. path.start(at: CGPoint(x: 50, y: 50))

D. path.setStartPoint(CGPoint(x: 50, y: 50))

Solution

1. Step 1: Recall the correct method to move the path cursor

   The Path type uses move(to:) to set the starting point.

2. Step 2: Verify method names

   Only move(to:) is a valid method; others do not exist in SwiftUI's Path.

3. Final Answer:

   path.move(to: CGPoint(x: 50, y: 50)) -> Option B

4. Quick Check:

   Use move(to:) to start path [OK]

Hint: Use move(to:) to set path start point [OK]

Common Mistakes:

• Using non-existent methods like start or begin
• Confusing with other graphics frameworks
• Forgetting to use CGPoint for coordinates

3. Given the following SwiftUI shape code, what shape will be drawn?

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

medium

A. A triangle pointing upwards

B. A rectangle

C. A circle

D. A triangle pointing downwards

Solution

1. Step 1: Analyze the points used in the path

   The path starts at the top center (midX, minY), then draws lines to bottom left and bottom right corners.

2. Step 2: Understand the shape formed

   Connecting these points and closing the path forms a triangle pointing upwards.

3. Final Answer:

   A triangle pointing upwards -> Option A

4. Quick Check:

   Points form upward triangle [OK]

Hint: Visualize points: top center then bottom corners [OK]

Common Mistakes:

• Mixing up coordinate system orientation
• Assuming shape is a rectangle or circle
• Ignoring the order of points

4. Identify the error in this SwiftUI custom shape code:

struct LineShape: Shape {
  func path(in rect: CGRect) -> Path {
    var path = Path()
    path.move(to: CGPoint(x: 0, y: 0))
    path.addLine(to: CGPoint(x: rect.width, y: 0))
    return path
  }
}

medium

A. No error; the code correctly draws a horizontal line.

B. The path does not close the subpath, causing a runtime error.

C. The starting point CGPoint(x: 0, y: 0) is outside the given rect.

D. Using rect.width instead of rect.maxX causes incorrect drawing.

Solution

1. Step 1: Check the path commands

   The path moves to (0,0) and draws a line to (rect.width, 0), which is valid inside the rect.

2. Step 2: Verify if closing the path is necessary

   Closing a path is optional; lines can be open shapes without errors.

3. Final Answer:

   No error; the code correctly draws a horizontal line. -> Option A

4. Quick Check:

   Open paths are valid; no error here [OK]

Hint: Open paths don't require closing to be valid [OK]

Common Mistakes:

• Assuming closeSubpath() is mandatory
• Confusing rect.width with rect.maxX (both valid here)
• Thinking (0,0) is outside rect bounds

5. You want to create a custom SwiftUI shape that draws a star with 5 points. Which approach correctly combines path methods to achieve this?

hard

A. Use addRect() five times to create star arms.

B. Use addEllipse(in:) repeatedly to draw circles at star points.

C. Use move(to:) to start at one point, then use addLine(to:) to connect all star points in order, finally call closeSubpath().

D. Use move(to:) once and then addQuadCurve(to:control:) to draw smooth star edges without lines.

Solution

1. Step 1: Understand star shape construction

   A star is made by connecting points with straight lines in a specific order.

2. Step 2: Identify correct path methods

   Starting with move(to:), then connecting points with addLine(to:), and closing the path with closeSubpath() correctly draws the star.

3. Step 3: Evaluate other options

   Using ellipses or rectangles won't form a star shape; quad curves create smooth curves, not sharp star points.

4. Final Answer:

   Use move(to:) to start at one point, then use addLine(to:) to connect all star points in order, finally call closeSubpath(). -> Option C

5. Quick Check:

   Star = move + addLine + closeSubpath [OK]

Hint: Connect star points with lines, then close path [OK]

Common Mistakes:

• Trying to use curves instead of lines for star points
• Using shapes like ellipses or rectangles incorrectly
• Forgetting to close the path to complete the shape