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.

Leave a rating/review
Save for later
Comments
Share

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

Part 1: Drawing with SwiftUI

01
Toggle description

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:51
Toggle description

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.

Colors 6:20
Toggle description

Learn about Gradients, how to create your own named colors, and what dark mode means for your colors.

Toggle description

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.

Toggle description

Challenge time! In this episode, practice creating your own custom shape. Let's dive in!

Toggle description

Create a list of shapes to select from, then learn how to exploit type erasure and create enums with associated values.

Toggle description

Learn about GeometryReader and how to use it for laying out views. Create a scrolling grid list of custom shapes.

Toggle description

Create data storage for the mind map cells using an environment object, and draw example cells from the model.

Gestures 10:45
Toggle description

Learn how to create gestures to select a mind map cell, drag it, and add a new cell by double-tapping the background.

Conclusion 0:49
Toggle description

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

Toggle description

In this section, you'll learn how to make custom controls by creating a simple slider and a complex flyout menu with multiple options.

Toggle description

Create a custom slider with a gradient background, and learn how to send inputs to controls and receive outputs.

Toggle description

Later, you'll create a sketch pad, so here you'll create a reusable color picker to allow the selection of different drawing colors.

Toggle description

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!

Toggle description

Learn about rotation and scale effects by creating a circular flyout menu and placing your icons around the edge of a circle.

Toggle description

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.

Toggle description

In this episode, learn how easy it is to create a simple drawing pad using drag gestures and SwiftUI paths.

Toggle description

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:09
Toggle description

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

Toggle description

In this part you'll draw images, use Core Graphics with UIKit and merge these views seamlessly with your existing SwiftUI app.

Toggle description

Understand how the SwiftUI paradigm differs from UIKit. Learn how a view is rendered, and discover Core Animation layers and Core Graphics contexts.

Toggle description

Examine the View Hierarchy Debugger in Xcode. Then create a Core Graphics context, draw into it and extract an image.

Toggle description

Upgrade your SwiftUI drawing pad to UIKit. Examine the app architecture and understand how to insert UIKit views in a SwiftUI app.

Toggle description

Learn how to use Pencil for custom drawing and draw smooth lines with thickness dependent on pressure.

Toggle description

Understand the extra features that drawing with Pencil gives you. Use the tilt of the pencil to change from drawing to shading.

Toggle description

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.

Toggle description

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.

Toggle description

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:34
Toggle description

Congrats on finishing the course! Review what you've learned, and find out where to go from here.