SwiftUI Custom Shapes: A Simple Guide For Developers

If you’ve ever wondered how to push beyond the limitations of basic shapes and truly unlock the power of shapes in SwiftUI, you’re in the right place. SwiftUI Custom Shapes give you the flexibility to design unique visuals, animate intricate boundaries, and bring your UI to life.

In this blog, you’ll learn how to draw custom shapes with precision, understand the nuances of the shape protocol, and fully leverage the func path methods.

Designing Custom Shapes

Understanding Shape Basics

A shape in SwiftUI represents a 2D form defined by a path. Unlike built-in shapes such as rectangle or circle, custom shapes let you define every detail of their outlines. You start with a given rectangle or a coordinate space and work your way down to the specified point you want to connect. For more complex shapes, you might rely on absolute coordinates, angle calculations, and control point logic to form smooth curves.

Using Geometric Properties and Coordinate Systems

When you create a shape, you’ll typically implement the func path(in rect: CGRect) -> Path method. This rect represents the proposed size of your shape’s bounding box. You can think of it as a rectangular frame that you will fill or outline. By starting your path at the top left corner (which might be (cgpoint x: rect.minX, y: rect.minY)), you can then draw lines, arcs, or curves to other points within this coordinate system. For instance, if your first point is the top-left of the rect and your second point is at (cgpoint x: rect.midX, y: rect.maxY), you can use these coordinates to produce a unique outline.

Using an Image as a Template

It’s often helpful to use an image as a visual guide to draw custom shapes. Start by sketching your shape on paper or using a design tool. Then, translate that design into SwiftUI by aligning points and values. This approach is particularly useful for more complex shapes that require careful planning of curves, angles, and radius values.

Creating Custom Shapes with Code

Implementing the Shape Protocol

To create custom shapes, you will typically make your struct conform to the shape protocol:

1import SwiftUI
2
3struct CustomShape: Shape {
4    func path(in rect: CGRect) -> Path {
5        var path = Path()
6        // Add drawing instructions here
7        return path
8    }
9}

​

Here, the func path(in:) function is crucial. It allows you to define the path that outlines your shape. The var path inside your code block is where you specify moves and lines to form your desired geometry. Remember to return path at the end.

Constructing the Path with Lines and Curves

To build the outline of your shape, you’ll use path.move(to:), path.addLine(to:) (or simply add line) and other path-building functions. For example:

1struct TriangleShape: Shape { // an example of struct triangle
2    func path(in rect: CGRect) -> Path {
3        var path = Path()
4        let firstPoint = CGPoint(x: rect.midX, y: rect.minY)
5        let secondPoint = CGPoint(x: rect.maxX, y: rect.maxY)
6        let thirdPoint = CGPoint(x: rect.minX, y: rect.maxY)
7
8        path.move(to: firstPoint)
9        path.addLine(to: secondPoint)
10        path.addLine(to: thirdPoint)
11        path.closeSubpath()
12
13        return path
14    }
15}

​

This snippet shows how a triangle shape can be formed by connecting three-point coordinates. We’ve introduced struct triangle here as an example, which is a simpler way to get started before tackling more complex shapes.

Creating Hexagons and Other Complex Forms

With the shape protocol, you can tackle geometric designs like hexagons or polygons. By calculating angles and using cgpoint x offsets, you can create intricate outlines. For instance, a hexagon might require computing several angle increments and placing point coordinates around a circle.

Transforming and Combining Shapes

Applying Transformations

Sometimes you need to rotate, scale, or offset a shape. You can manipulate the path after it’s constructed using transformations. Adjusting the frame or applying a rotation based on angle is simple once you’ve defined your shape. For example:

1struct RotatedTriangle: Shape {
2    func path(in rect: CGRect) -> Path {
3        var path = Path()
4
5        // Define a basic triangle path again
6        path.move(to: CGPoint(x: rect.midX, y: rect.minY))
7        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
8        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
9        path.closeSubpath()
10
11        // Rotate the shape by 45 degrees (pi/4 radians) around its center
12        let rotation = CGAffineTransform(rotationAngle: .pi/4)
13        let moved = path.applying(rotation)
14
15        return moved
16    }
17}

​

This approach lets you handle absolute coordinates and rotations to position a shape precisely in space.

Combining Multiple Shapes

You can create custom shapes by combining multiple built-in shapes like rectangle, ellipse, or circle, layering them in a ZStack. By mixing and matching, you’ll soon be able to draw custom shapes that are more intriguing than the sum of their parts.

Styling and Using Custom Shapes in Your SwiftUI App

Adjusting Stroke, Fill, and Color

Once you have your shape, you can easily customize it. Apply a stroke with a certain line width, or fill it with a blue or green color. Modifiers like .fill(Color.blue) or .stroke(Color.green, lineWidth: 2) help you achieve the desired style:

1struct ContentView: View { // struct contentview
2    var body: some View { // var body
3        TriangleShape()
4            .stroke(Color.blue, lineWidth: 3) // stroke + line width
5            .frame(width: 100, height: 100) // frame + width
6            .background(Color.green) // background
7    }
8}

​

Here, we’ve specified a frame for the shape and used a line width of 3. By tweaking these properties, you can get the exact look you want.

Filling and Positioning Shapes

You can fill a shape to give it solid color or gradients. Positioning can be managed by using the .frame(width:height:) modifier to set the frame width and height. By controlling this frame, and possibly adding an overlay, you can create dynamic designs that respond to layout changes and device orientations.

Integrating with Other SwiftUI Views

You can place your custom shapes inside any SwiftUI view, overlay them on backgrounds, or incorporate them into buttons or navigation bars. By understanding how to conform to the shape protocol, you ensure that your shapes integrate seamlessly into the SwiftUI layout system.

Best Practices for Shape Development

Start Simple, Then Go Complex

If you’re new to shape creation, start with built in shapes and then create custom shapes by modifying their outlines. Begin with a circle or rectangle and then add your own points. Gradually increase complexity by introducing triangle, polygons, or more complex shapes. Experiment with round corners and adjusting the rectangular frame to produce elegant outlines.

Code Organization and Reusability

Keep your code well-organized. If your shape requires repetitive calculations (like computing cgpoint x coordinates multiple times), consider writing helper functions. Storing critical values in constants and reusing them for multiple points ensures consistency and reduces errors.

Leverage the Shape Protocol for Dynamic UI

Because SwiftUI’s layout is reactive, your shapes can dynamically scale based on parent views’ frame or layout. The shape protocol is perfectly suited for adapting shapes to changing position and space constraints.

Working with Path Operations

Move, Line, and Curves

The path construction tools allow you to draw lines and arcs. For a triangle, you used addLine(to:). For a circle or ellipse, you may rely on addArc or addCurve with a control point.

Returning the Path

Don’t forget to return path at the end of your func path(in:) implementation. The final path defines the visual output of your shape.

Using var body in Shape-Related Views

When integrating your custom shapes into a SwiftUI view, wrap them in a view’s var body. This allows you to chain modifiers like .fill(), .stroke(), and .frame(width:height:). The var body property is crucial in building the final UI hierarchy.

Final Thoughts!

Mastering SwiftUI custom shapes is not only about custom drawing but also about knowing how to create visually appealing components. By understanding the shape protocol, you gain the ability to draw custom shapes from scratch, use the func path method effectively, play with line, fill, width, and background styling, and adapt the outline to any frame width or rect dimensions. With the knowledge you’ve gained, you can now confidently incorporate shapes in SwiftUI to build intricate, responsive interfaces.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.