Learning Swift, 3rd Edition

Chapter 14. Image Overlays

Now that we have a replacement for our image picker working it is time to start adding a new feature into Selfiegram. We are going to add in support for overlaying cartoon eyebrows onto the selfie images—after all, what good is a selfie app if it lacks comedic eyebrows? If we were to save the eyebrows into the app itself, any time we wanted to add new eyebrows we’d have to make a new build of the app, so instead we will make it so that the eyebrows are downloaded from a server.

There are quite a few steps involved in this. In this chapter we will be building the model component, which will entail downloading eyebrow images, saving them locally, and presenting an interface that our UI can later talk to. Then in the next chapter we will create the UI to show the list of eyebrows, preview them on a selfie, and save the results.

Note

We are storing our eyebrows in the GitHub repository where we are making our code available. We can get away with this because our server needs are very minimal and we are trying to show off downloading and URL handling in Swift, not proper file server configuration.

Creating the Overlay Model

The basic structure for our overlay model will follow a pattern very similar to how we structured our selfies. There will be an Overlay object that will have the relevant overlay information inside it, which in our case will be three images: a left and a right eyebrow, and a preview image. Unlike the selfies, however, which are saved ...