The SwiftUI Shapes Live Series by Mark Moeykens

The SwiftUI Shapes Live Series

Follow along in this series if you want to learn how to create shapes to enhance your UI in your apps.

Trapezium

Discover the many ways you can use the trapezium to enhance your UI.

Curved-Side Rectangle

Learn how to create this shape and see a variety of ways you can use it.

The Wave Shape

This is a really cool shape to have in your shape collection.
I break it down and show you how to easily make, customize and animate it.

How does this work?

1. The Path Plan

I show you the plan that we'll be using to create the shape.

2. Test it in UI

You'll then see a few ways to use the shape in UI with a practical example.

3. Customization Options

Want to change your shape? Learn how to add customization options to alter how your shape looks.

4. Animation Options

You will learn how to enable your shape to be animated.

Contents

Introduction to Creating Shapes
Using the Path Object to Draw Shapes
152 KB
Your Path Canvas
105 KB
Benefits of Shapes
191 KB
Episode 1: The Trapezium Shape
Creating a Reusable Trapezium
2.02 MB
What is a Trapezium?
108 KB
Examples in UI
595 KB
SwiftUI Shapes Live: 1 -The Trapezium
Trapezium Project.zip
2.5 MB
Episode 2: The Curved-Side Rectangle
Creating a Curved-Side Rectangle
2.02 MB
Examples in UI
609 KB
Shape Path Plan
117 KB
About Quad Curves
132 KB
Keeping the Shape Within the Frame
118 KB
SwiftUI Shapes Live: 2 - Creating a Curve-Sided Rectangle to Enhance UI
CurvedSideRectangleProject.zip
1.69 MB
Episode 3: The Wave Shape
Creating a Reusable Wave Shape
1.17 MB
Examples in UI
448 KB
The Shape Path Plan
136 KB
Customizing the Wave
149 KB
The New Offset Plan
128 KB
SwiftUI Shapes Live: 3 - The Wave
TheWaveShapeProject.zip
3.52 MB
Episode 4: The Triangular Shape
Creating a Reusable Triangle
1.12 MB
Examples in UI
453 KB
TheTriangularShape-StartingProject.zip
1.76 MB
The Shape Path Plan
109 KB
Customizing the Triangle with an X Offset
141 KB
SwiftUI Shapes Live: 4 - The Triangle Shape
TheTriangularShape - Completed.zip
1.79 MB