Drawing in iOS with SwiftUI
Learn about drawing using SwiftUI by creating custom controls using a combination of SwiftUI and Core Graphics. Covers shapes, colors, drawing with Pencil, and how to integrate them into a non-trivial app. By Catie Catterwaul.
Who is this for?
This course is for iOS developers who are familiar with Swift and SwiftUI fundamentals, and would like to create custom user interfaces using SwiftUI.
Covered concepts
- SwiftUI shapes & colors
- Custom shapes
- Custom controls using SwiftUI
- Canvas view
- Timeline view
Part 1: Drawing with SwiftUI
Start off by going over simple colors and shapes and understand how to add them to your views. Use modifiers to clip views to your chosen shape.
Learn about Gradients, how to create your own named colors, and what dark mode means for your colors.
Explore SwiftUI paths, learn to create simple custom shapes, and the many ways of outlining with a stroke.
Dig deeper into SwiftUI paths and draw a custom heart shape with help from Bezier curves and transforms.
Learn how to group your custom shapes with an Enum, and display them all in a grid.
Create data storage for the mind map cells using an environment object, and draw example cells from the model.
Learn how to periodically update and animate views with TimelineView.
Learn how to create gestures to select a mind map cell, drag it, and add a new cell by double-tapping the background.
Part 2: Custom Controls
Create a custom slider with a gradient background, and learn how to send inputs to controls and receive outputs.
Later, you’ll create a sketch pad, so here you’ll create a reusable color picker to allow the selection of different drawing colors.
SF Symbols are fantastic Apple-designed vector icons. But did you know you can create your own SF Symbols? Open up your vector editor and have a go!
Learn about rotation and scale effects by creating a circular flyout menu and placing your icons around the edge of a circle.
Install the menu into the app and add custom actions to it. You’ll be able to delete cells and also use your shapes grid to choose the shape of each cell.
In this episode, learn how easy it is to create a simple drawing pad using drag gestures and SwiftUI paths.
To practice installing an existing custom control, install the color picker into the drawing pad and hook it up to the drawing color.
To practice installing an existing custom control, install the color picker into the drawing pad and hook it up to the drawing color.