Custom shapes and paths in iOS Swift - Deep Dive

Overview - Custom shapes and paths

What is it?

Custom shapes and paths let you draw any shape you want on the screen by defining lines, curves, and areas. Instead of using only standard buttons or rectangles, you can create unique designs like stars, waves, or complex icons. This is done by telling the system how to move a virtual pen to draw the shape step-by-step. It helps make your app look special and fit your style.

Why it matters

Without custom shapes, apps would look very plain and similar because they rely only on basic shapes. Custom shapes let designers and developers express creativity and improve user experience by making interfaces more engaging and intuitive. They also allow for animations and interactions that feel natural and fun. This makes apps stand out and keeps users interested.

Where it fits

Before learning custom shapes, you should understand basic Swift programming and how to use SwiftUI or UIKit for building user interfaces. After mastering custom shapes, you can explore animations, gesture handling, and advanced graphics like gradients and shadows to make your shapes lively and interactive.

Mental Model

Core Idea

A custom shape is like giving instructions to a pen on where to move and draw lines or curves to create any picture you want.

Think of it like...

Imagine you have a connect-the-dots drawing. Each dot is a point, and you draw lines or curves connecting them in order to reveal a picture. Custom shapes work the same way by connecting points with lines or curves.

┌─────────────┐
│ Move to P1  │
│ Draw line   │
│ Draw curve  │
│ Close path  │
└─────┬───────┘
      │
      ▼
  Custom Shape
  (Unique design)

Build-Up - 7 Steps

1

Foundation

Understanding basic paths

Concept: Learn what a path is and how it represents a shape by connecting points with lines or curves.

In SwiftUI, a Path is a sequence of drawing commands like move(to:), addLine(to:), and addCurve(to:). These commands tell the system where to place the pen and how to draw between points. For example, move(to:) moves the pen without drawing, addLine(to:) draws a straight line, and addCurve(to:) draws a smooth curve.

Result

You can create simple shapes like triangles or rectangles by connecting points with lines.

Understanding that a shape is just a set of instructions for drawing lines and curves helps you realize you can create any shape by controlling these instructions.

2

Foundation

Using SwiftUI Shape protocol

Concept: Learn how to create reusable custom shapes by conforming to the Shape protocol.

In SwiftUI, you create a custom shape by making a struct that conforms to Shape and implements the path(in:) method. This method receives a rectangle defining the drawing area. Inside, you build and return a Path describing your shape. SwiftUI then draws this shape wherever you use it.

Result

You can define shapes like circles, stars, or waves as reusable components in your app.

Knowing how to wrap drawing instructions inside a Shape makes your code clean and reusable, letting you use your custom shapes like built-in ones.

3

Intermediate

Combining lines and curves

🤔Before reading on: do you think curves are drawn by connecting many tiny lines or by smooth mathematical formulas? Commit to your answer.

Concept: Learn how to mix straight lines and smooth curves to create complex shapes.

Paths can include both straight lines and Bezier curves. Bezier curves use control points to define smooth bends. In SwiftUI, addQuadCurve(to:control:) adds a quadratic curve with one control point, and addCurve(to:control1:control2:) adds a cubic curve with two control points. Combining these lets you draw smooth shapes like circles or waves.

Result

Your shapes can have smooth edges and flowing curves, not just sharp corners.

Understanding curves lets you create natural and visually pleasing shapes that look professional and polished.

4

Intermediate

Scaling and positioning shapes

🤔Before reading on: do you think the path coordinates are fixed or relative to the drawing area? Commit to your answer.

Concept: Learn how to make shapes adapt to different sizes and positions by using the provided rectangle.

The path(in:) method receives a CGRect that defines the area where the shape should fit. Use this rectangle's size and origin to calculate points relative to it. This way, your shape scales and moves correctly when used in different places or screen sizes.

Result

Your custom shapes look good on all devices and layouts without distortion.

Knowing to use relative coordinates inside path(in:) makes your shapes flexible and reusable in many contexts.

5

Intermediate

Adding fill and stroke styles

Concept: Learn how to color and outline your custom shapes to enhance their appearance.

After creating a shape, you can fill it with colors or gradients using .fill() and add outlines with .stroke(). You can customize stroke width, color, and line styles like dashed lines. This styling makes your shapes visually distinct and matches your app's design.

Result

Your shapes can have colorful fills and stylish borders, improving UI aesthetics.

Styling shapes is essential to make them visually appealing and consistent with your app's theme.

6

Advanced

Animating custom shapes

🤔Before reading on: do you think shapes can change smoothly over time or only appear static? Commit to your answer.

Concept: Learn how to animate shape properties to create dynamic and interactive visuals.

SwiftUI allows animating shapes by changing parameters that define their paths. For example, you can animate the points or control points of curves. By conforming to the Animatable protocol and updating properties with animation, shapes can morph smoothly between forms.

Result

Your app can show moving, transforming shapes that attract user attention.

Animating shapes adds life to your UI and improves user engagement by providing visual feedback.

7

Expert

Optimizing complex paths for performance

🤔Before reading on: do you think drawing many complex paths slows down the app significantly? Commit to your answer.

Concept: Learn techniques to keep your app smooth when using many or complex custom shapes.

Complex paths with many curves and points can slow rendering. To optimize, simplify paths by reducing points, cache shapes as images when static, and avoid unnecessary redraws. Use instruments to profile drawing performance. Also, prefer vector shapes over bitmap images for scalability.

Result

Your app remains responsive and smooth even with rich custom graphics.

Knowing how to optimize paths prevents performance issues that frustrate users and degrade app quality.

Under the Hood

When you create a custom shape, SwiftUI translates your path instructions into drawing commands that the graphics system executes. The system uses Core Graphics under the hood, which manages a virtual pen moving over a canvas. Each move, line, or curve command updates the drawing context. The final shape is rasterized into pixels for display. SwiftUI also manages redrawing efficiently when shapes change.

Why designed this way?

This design separates shape description from rendering, allowing shapes to be reusable and scalable. Using paths as instructions is memory efficient and flexible. Core Graphics provides a powerful, low-level drawing engine that supports complex vector graphics. SwiftUI builds on this to offer a simple, declarative way to define shapes, hiding complexity from developers.

┌───────────────┐
│ SwiftUI Shape │
│ path(in:)     │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Core Graphics │
│ Path Commands │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ GPU Renderer  │
│ Rasterizes   │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Screen Pixels │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do you think custom shapes must be drawn pixel by pixel? Commit to yes or no.

Common Belief: Custom shapes are drawn by coloring each pixel manually.

Reality: Custom shapes are defined by vector paths—mathematical instructions for lines and curves—not by setting pixels one by one.

Why it matters: Believing shapes are pixel-based leads to inefficient code and poor scalability on different screen sizes.

Quick: Do you think you must write complex math to create any custom shape? Commit to yes or no.

Common Belief: Creating custom shapes requires advanced math knowledge like calculus.

Reality: Basic shapes can be created with simple points and lines; curves use control points but don’t require deep math understanding to use effectively.

Why it matters: Thinking math is a barrier discourages beginners from trying custom shapes, limiting creativity.

Quick: Do you think custom shapes always improve app performance? Commit to yes or no.

Common Belief: Using custom shapes makes apps faster and more efficient.

Reality: Complex or many custom shapes can slow down rendering if not optimized properly.

Why it matters: Ignoring performance costs can cause apps to lag or drain battery, harming user experience.

Quick: Do you think the path coordinates are always absolute on the screen? Commit to yes or no.

Common Belief: Path points are fixed screen coordinates and don’t change with layout.

Reality: Path points are usually relative to the shape’s bounding rectangle, allowing scaling and positioning.

Why it matters: Misunderstanding this causes shapes to appear distorted or misplaced on different devices.

Expert Zone

1

SwiftUI’s Shape protocol uses the path(in:) method with a CGRect parameter, which is crucial for making shapes scalable and adaptable to different layouts.

2

Animating shapes requires conforming to the Animatable protocol and carefully managing animatable properties to ensure smooth transitions without glitches.

3

Complex paths can be cached as images or simplified to improve performance, especially on older devices or when many shapes are drawn simultaneously.

When NOT to use

Avoid custom shapes when simple built-in shapes suffice or when performance is critical and the shape is static; instead, use pre-rendered images or system shapes. For highly interactive or 3D graphics, consider using Metal or SceneKit instead.

Production Patterns

In production, custom shapes are often combined with animations and gestures to create interactive buttons, loaders, or decorative elements. They are also used in branding to maintain consistent visual identity. Developers use reusable Shape structs and modifiers to keep code clean and maintainable.

Connections

Vector Graphics

Custom shapes are a form of vector graphics used in mobile apps.

Understanding vector graphics principles helps grasp how shapes scale without losing quality and how paths define images mathematically.

Animation Principles

Animating custom shapes builds on core animation concepts like interpolation and timing.

Knowing animation basics helps create smooth shape transitions that feel natural and engaging.

Calligraphy

Both custom shapes and calligraphy involve controlling pen movement to create art.

Recognizing this connection reveals how digital drawing mimics real-world pen strokes, enhancing appreciation of shape design.

Common Pitfalls

#1 Shape coordinates are hardcoded and don’t adapt to different screen sizes.

Wrong approach:

func path(in rect: CGRect) -> Path {
var path = Path()
path.move(to: CGPoint(x: 10, y: 10))
path.addLine(to: CGPoint(x: 100, y: 10))
path.addLine(to: CGPoint(x: 100, y: 100))
path.closeSubpath()
return path
}

Correct approach:

func path(in rect: CGRect) -> Path {
var path = Path()
path.move(to: CGPoint(x: rect.minX + rect.width * 0.1, y: rect.minY + rect.height * 0.1))
path.addLine(to: CGPoint(x: rect.minX + rect.width * 0.9, y: rect.minY + rect.height * 0.1))
path.addLine(to: CGPoint(x: rect.minX + rect.width * 0.9, y: rect.minY + rect.height * 0.9))
path.closeSubpath()
return path
}

Root cause:

Not using the provided rect to calculate points causes shapes to be fixed size and position, breaking layout adaptability.

#2 Trying to animate a shape by changing its path directly without conforming to Animatable.

Wrong approach:

struct MyShape: Shape {
var progress: CGFloat
func path(in rect: CGRect) -> Path {
// path changes with progress
}
}
// Using .animation() without Animatable conformance

Correct approach:

struct MyShape: Shape {
var progress: CGFloat
var animatableData: CGFloat {
get { progress }
set { progress = newValue }
}
func path(in rect: CGRect) -> Path {
// path changes with progress
}
}

Root cause:

SwiftUI needs animatableData to interpolate shape changes smoothly; without it, animations won’t work properly.

#3 Drawing very complex paths every frame without caching.

Wrong approach:

Redrawing a complex star shape with hundreds of points on every frame during animation.

Correct approach:

Cache the complex shape as an image or simplify the path, then animate only necessary parameters.

Root cause:

Ignoring performance optimization leads to slow rendering and poor user experience.

Key Takeaways

Custom shapes are created by defining paths that connect points with lines and curves, allowing any shape to be drawn.

Using the Shape protocol in SwiftUI makes custom shapes reusable and adaptable to different sizes and layouts.

Combining lines and Bezier curves lets you create smooth, natural shapes beyond simple polygons.

Animating shapes requires conforming to Animatable and managing properties that change over time for smooth transitions.

Optimizing complex paths is essential to keep your app responsive and maintain good performance.

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