Custom shapes and paths in iOS Swift - UI Render Trace

Component - Custom shapes and paths

This UI component draws a custom shape using paths. It shows how to create unique visuals by defining points and curves instead of using standard shapes like rectangles or circles.

Widget Tree

UIView
└── CustomShapeView
    └── CAShapeLayer

The main view contains a CustomShapeView subclass. This view uses a CAShapeLayer to draw the custom path on the screen.

Render Trace - 4 Steps

Step 1: CustomShapeView

Step 2: UIBezierPath

Step 3: CAShapeLayer

Step 4: UIView rendering

State Change - Re-render

Trigger:Changing the fill color property

Before

Shape filled with original color

→

After

Shape filled with new color

Re-renders:Only the CAShapeLayer redraws with the new fill color

UI Quiz - 3 Questions

What does the UIBezierPath do in this component?

A Defines the outline of the custom shape using points and curves

B Sets the background color of the view

C Handles user touch events on the shape

D Creates a standard rectangle shape automatically

Key Insight

Using custom shapes and paths lets you create unique visuals beyond standard UI elements. By defining paths and applying them to shape layers, you can draw complex shapes efficiently and update their appearance dynamically.

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