In this series we build a meme generator application for macOS using SwiftUI. We'll talk about drag & drop, text selection and manipulation, and data flow & architecture.
Length: about 1 hour
We start looking at SwiftUI on the Mac. We'll go over how document-based apps work, and see how much functionality and standard behavior we can get with just a few lines of code. This will be the basis for a new app we'll make called Memeify.
We start with a literal blank canvas. We'll use NSApplicationDelegateAdaptor and NSDocumentController with our SwiftUI app to ensure a new document is always created on launch. Then we'll introduce drag & drop behavior to allow a user to drag an image from the Finder to our app to display it.
In this episode we will add a toolbar button to add new text elements. We'll see how to quickly add a stroke around our text to make it readable. Then we'll implement smooth dragging to position the text elements on the canvas.
To allow the user to edit the text elements, we'll add a binding for isEditing and swap out the Text element for a TextField. We'll then utilize onSubmit and a tap gesture to go in and out of the edit mode. Finally, using a derived binding, we can ensure that only one field is showing as editable at a given time.
In order to control the font, size, and color of various text elements we need a way to implement selection of one or more text elements. In this episode we will refactor our code to lift up some state into an observable object so that we can control the selected text items from another view outside the canvas.