Drawing in iOS with SwiftUI
Feb 11 2020 · Video Course (2 hrs, 48 mins) · Advanced
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.
Version
- Swift 5, iOS 13, Xcode 11


Drawing with SwiftUI
In this course, find out how to draw using SwiftUI, create some custom controls and create an app in which you can create a simple mind map with sketches.
Shapes
6:51Start 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.
Colors
6:20Learn about Gradients, how to create your own named colors, and what dark mode means for your colors.
Custom Shapes
9:40Explore SwiftUI paths, and the many ways of outlining with a stroke. Learn how to create complex custom shapes made up of paths and transformations.
Challenge time! In this episode, practice creating your own custom shape. Let's dive in!
Shape Selection
8:27Create a list of shapes to select from, then learn how to exploit type erasure and create enums with associated values.
Geometry Reader
8:13Learn about GeometryReader and how to use it for laying out views. Create a scrolling grid list of custom shapes.
Persist Cell Views
5:09Create data storage for the mind map cells using an environment object, and draw example cells from the model.
Gestures
10:45Learn how to create gestures to select a mind map cell, drag it, and add a new cell by double-tapping the background.
Conclusion
0:49Review where you are with your SwiftUI drawing, and look forward to how we'll enhance our skills by drawing custom controls.
Custom Controls
Introduction
1:53In this section, you'll learn how to make custom controls by creating a simple slider and a complex flyout menu with multiple options.
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.
Custom SF Symbols
6:51SF 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!
Create a Custom Menu
9:28Learn about rotation and scale effects by creating a circular flyout menu and placing your icons around the edge of a circle.
Install the Custom Menu
11:35Install 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.
SwiftUI Drawing Pad
5:58In 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.
Conclusion
1:09Review custom controls and look ahead to the next part, where you'll combine UIKit views with SwiftUI views.
Support SwiftUI with Core Graphics
Introduction
1:00In this part you'll draw images, use Core Graphics with UIKit and merge these views seamlessly with your existing SwiftUI app.
Anatomy of a View
5:09Understand how the SwiftUI paradigm differs from UIKit. Learn how a view is rendered, and discover Core Animation layers and Core Graphics contexts.
Create a CGImage
4:37Examine the View Hierarchy Debugger in Xcode. Then create a Core Graphics context, draw into it and extract an image.
A UIKit Drawing Pad
10:40Upgrade your SwiftUI drawing pad to UIKit. Examine the app architecture and understand how to insert UIKit views in a SwiftUI app.
Drawing with Pencil
4:42Learn how to use Pencil for custom drawing and draw smooth lines with thickness dependent on pressure.
Shading with Pencil
6:41Understand the extra features that drawing with Pencil gives you. Use the tilt of the pencil to change from drawing to shading.
Install DrawingPad
6:08Now that you've created a UIKit drawing pad, add it as a custom option to the flyout menu and show it as a modal view.
In your final challenge, extract the sketch from the drawing pad into an image, create a thumbnail and display it on a mind map cell.
Go low-level into Core Graphics and examine individual pixels. Learn how to retrieve the pixel color and switch the drawing color to this color.
Conclusion
1:34Congrats on finishing the course! Review what you've learned, and find out where to go from here.
Version history
iOS 15, Swift 5.5, Xcode 13
iOS 13, Swift 5, Xcode 11 (Selected)
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 and colors
- Custom shapes
- Custom controls using SwiftUI
- Drawing with Apple Pencil
- Integration of UIKit UIViews into SwiftUI Views
- Build a complete app with a complex custom interface
Comments