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.

Screenshot 2019-06-05 at 17.47.22.png

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).

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.

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.

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.

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.

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.

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.