Catie, welcome to Drawing in iOS with SwiftUI. In this course, we’ll be using SwiftUI to create a mind map app with rearrangeable cells that can contain text or drawings. We’ll start out learning how to draw custom shapes and use colors, and how to lay out views…

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

…other colors with variations for dark mode, too, if you like. Now to hook those up to some code, create a new SwiftUI View file for our control called ColorPicker. This file will hold both our ColorPicker, and a View to preview it. Similar to what we did with…

…cells, including the cells location so that we can adjust their position in ContentView. Create a new Swift file called CellModel.swift. Import SwiftUI and Combine, which we’ll need for storing the data model import SwiftUI import Combine Create a new structure to hold an individual cell. struct Cell: Identifiable…

…quick overview of how to use SwiftUI colors, so let’s look at how to use colors, gradients and schemes in more detail. Each of the system colors such as the .teal we used, is a predefined static Color property. UIKit offers even more system colors, if we initialize SwiftUI…

…offset(x: cell.size.width / 2, y: -cell.size.height / 2) With the menu installed, we’re ready to hook up the actions. The first option is delete. SwiftUI’s reactivity really shines here. All we need to do is remove the selected cell from our data model’s array. Then we can rely…

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

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

…with the gestures we already have is that if I tap the text area instead of the shape background and then tap the background, SwiftUI thinks I’m still editing the text field. We used to have to reach into UIKit to handle this, but we’ve got another option…

…infer the type from its body property. Swift 5.1 introduced opaque types to deal with this with the some keyword. When you create a SwiftUI View, the view must contain a body property, which returns some other structure that conforms to View. If you’ve ever tried to inspect…

…practical. We might want to use these custom controls in our other apps, so we’ll make them as generic as we can and SwiftUI encourages us to make our views modular. A control consists of a user interface - that’s one or more views with interaction…

…much new in this, but it’s an example of putting something together that’s fairly complex. FlyoutMenu.swift Create a new SwiftUI View file for the menu called FlyoutMenu. To start, we’ll make that red circular button with a plus sign in it. And to hold that…

…font(.system(size: 60, weight: .ultraLight)) .font(.largeTitle) .foregroundColor(.teal) As long as you don’t try to use a different scale or weight, SwiftUI will default to the medium scale and regular weight we’ve supplied, and adjust the size nicely for us. Before we move on, restore…

…some navigation features to handle that, and we don’t really want those in our Canvas control. So, let’s set up a new SwiftUI View to hold the canvas. DrawingPadView Add it out here, next to BackgroundView, and call it DrawingPadView Just like for the Shape Selection Grid…