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 Caroline Begbie.
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.
- 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
Part 1: 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.
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, 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!
Create a list of shapes to select from, then learn how to exploit type erasure and create enums with associated values.
Learn about GeometryReader and how to use it for laying out views. Create a scrolling grid list of custom shapes.
Persist Cell Views
Create data storage for the mind map cells using an environment object, and draw example cells from the model.
Learn how to create gestures to select a mind map cell, drag it, and add a new cell by double-tapping the background.
Review where you are with your SwiftUI drawing, and look forward to how we'll enhance our skills by drawing custom controls.
Part 2: Custom Controls
In 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
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!
Create a Custom Menu
Learn 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
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.
SwiftUI Drawing Pad
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.
Review custom controls and look ahead to the next part, where you'll combine UIKit views with SwiftUI views.
Part 3: Support SwiftUI with Core Graphics
In 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
Understand 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
Examine the View Hierarchy Debugger in Xcode. Then create a Core Graphics context, draw into it and extract an image.
A UIKit Drawing Pad
Upgrade your SwiftUI drawing pad to UIKit. Examine the app architecture and understand how to insert UIKit views in a SwiftUI app.
Drawing with Pencil
Learn how to use Pencil for custom drawing and draw smooth lines with thickness dependent on pressure.
Shading with Pencil
Understand the extra features that drawing with Pencil gives you. Use the tilt of the pencil to change from drawing to shading.
Now 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.
Congrats on finishing the course! Review what you've learned, and find out where to go from here.