Apple’s all-new declarative UI framework SwiftUI is here! It is not likely that adoption will be high in a professional environment for a little while, however, it is still fun to play with this new framework which could revolutionize app development. SwiftUI has some very powerful capabilities built in, such as the cross-device compatibility, automatic dynamic type support, automatic dark mode support, built in localization and accessibility features. In this tutorial, we will be creating a small app where we will display a list of safari animals and then be able to see details on our selected animal.
Let’s start by creating our project, make sure that when you are setting up you select the “Use SwiftUI” tickbox. This will set up your default project with a different looking AppDelegate and a new SceneDelegate.swift file.
First of all, we want to create our Animal model file, which will contain all of our attributes for our given animal. Our Animal is going to conform to the Identifiable protocol, by having an id Int variable and also have a name, description and imageName. We also will have a dynamic variable which will return an Image object (this is comparable to a UIImageView in UIKit).
https://gist.github.com/rtking1993/50f433758c9bc43cb444bf7ad5d5c7c7
Then we will add this extension file on Animal, containing static constants of animals that we are going to hardcode into our app. Here we are going to just add four animals, however, feel free to add more yourself. Don’t forget to add an image to the project for each animal you add.
https://gist.github.com/rtking1993/0961143d63c39ea7488405cd371e843a
Now we have our animal information in our app, we can work with our new framework SwiftUI. Let’s start by adding this code as AnimalList.swift, here we are going to create our list of animals that when tapped will navigate us through to our details page.
First of all, take a good look at the syntax below. All of the Navigation and View objects are carefully nested in a specific order. We have the NavigationView encompassing everything at the top layer, inside this, we have a List which takes an array of our Animal objects. The list is composed of NavigationButtons which have a destination of our AnimalDetails view. Inside the NavigationButton we have our AnimalRow to give us our list. You will also notice the navigation bar title modifier which changes the title attributes of our NavigationView.
https://gist.github.com/rtking1993/872f24ea180a58f05ba416346b460a36
For each row in the list, we need to create our AnimalRow view. To do this we will create AnimalRow.swift, which will be instantiated with an animal and simply display the name of the animal.
https://gist.github.com/rtking1993/8a75a007e64bd319d66211184a246f04
Then we need to create our details page, our details page takes an animal model and uses that to display relevant information on the page. Here we create a VStack (vertical stack view) and add a CircleImage and another VStack. Our second VStack will contain our Text elements (comparable to UILabel’s) with animal name and description. We also add some spacing and padding to help let the views breath a little bit.
https://gist.github.com/rtking1993/931e6b513a3e6dc140d848eddb7db2ba
Finally, we will add this simple supporting view which will help us elegantly display the image of our animal. This view takes an image, clips it to the shape of a circle, overlays a white circle around the image and then provides a shadow underneath to give a perception of depth. This creates a great visual effect for your users, all inside a handy little self-contained view.
https://gist.github.com/rtking1993/e32de623605e2380a9a168f9abdddda5
That is it, we are all done and now if you build the project you should see your first SwiftUI app running. This is only a very simple example and my first time using SwiftUI. It will be exciting to see how others use SwiftUI for much more complicated use cases, as I can already see how powerful this framework is.
The source code for the finished SwiftUI example project is available here:
https://github.com/rtking1993/Safari-Animals
