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.