This course is available as part of the raywenderlich.com Professional subscription. To learn more click here
Pro

Drawing in iOS with SwiftUI

Jun 7 2022 · Video Course (1 hr, 57 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.5, iOS 15, Xcode 13

Drawing with SwiftUI

Shapes

6:55 Free

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.

1

Colors

6:46

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

2

Explore SwiftUI paths, learn to create simple custom shapes, and the many ways of outlining with a stroke.

3

Dig deeper into SwiftUI paths and draw a custom heart shape with help from Bezier curves and transforms.

4

Learn how to group your custom shapes with an Enum, and display them all in a grid.

5

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

6

Learn how to periodically update and animate views with TimelineView.

7

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

8

Custom Controls

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

9

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

10

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!

11

Custom Menu

11:34

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

12

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.

13

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

14

To practice installing an existing custom control, install the color picker into the drawing pad and hook it up to the drawing color.

15

To practice installing an existing custom control, install the color picker into the drawing pad and hook it up to the drawing color.

16

Version history

iOS 15, Swift 5.5, Xcode 13 (Selected)

Jun 7 2022

iOS 13, Swift 5, Xcode 11

Feb 11 2020

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

Contributors

Comments