Custom shapes and paths in iOS Swift

Introduction

Custom shapes let you draw unique designs in your app. Paths help you create lines and curves to make these shapes.

When you want to draw a heart or star shape in your app.

To create a custom button shape that is not a rectangle or circle.

When designing a logo or icon directly in your app.

To add decorative lines or curves in your app's background.

When you want to animate a shape along a path.

Syntax

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))
    path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
    path.closeSubpath()
    return path
  }
}

The Shape protocol requires a path(in: CGRect) method.

Use Path to draw lines and curves inside the given rectangle.

Examples

This draws a triangle pointing up inside the given rectangle.

iOS Swift

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
  }
}

This draws a circle or ellipse inside the rectangle.

iOS Swift

struct CircleShape: Shape {
  func path(in rect: CGRect) -> Path {
    Path(ellipseIn: rect)
  }
}

This draws a curved line from left to right with a control point above.

iOS Swift

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

Sample App

This program draws a yellow star shape centered in a 200x200 frame with a shadow. It uses math to place points around a circle to form the star.

iOS Swift

import SwiftUI

struct StarShape: Shape {
  func path(in rect: CGRect) -> Path {
    var path = Path()
    let center = CGPoint(x: rect.midX, y: rect.midY)
    let points = 5
    let radius = min(rect.width, rect.height) / 2
    let angle = Double.pi * 2 / Double(points * 2)
    for i in 0..<(points * 2) {
      let length = i.isMultiple(of: 2) ? radius : radius / 2
      let x = center.x + CGFloat(cos(Double(i) * angle - Double.pi / 2)) * length
      let y = center.y + CGFloat(sin(Double(i) * angle - Double.pi / 2)) * length
      if i == 0 {
        path.move(to: CGPoint(x: x, y: y))
      } else {
        path.addLine(to: CGPoint(x: x, y: y))
      }
    }
    path.closeSubpath()
    return path
  }
}

struct ContentView: View {
  var body: some View {
    StarShape()
      .fill(Color.yellow)
      .frame(width: 200, height: 200)
      .shadow(radius: 5)
  }
}

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
    }
  }
}

Important Notes

Use move(to:) to start a new point in the path.

Use addLine(to:) to draw straight lines between points.

Use closeSubpath() to connect the last point back to the first.

Summary

Custom shapes let you create unique visuals by drawing paths.

The Shape protocol requires a path(in: CGRect) method.

Use Path methods like move(to:) and addLine(to:) to build your shape.

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