Let’s Learn SwiftUI By Building a Pokedex App! Part 1 of 3: UI

I wouldn’t be half the engineer I am today without watching Ash Ketchum learn from his mistakes so many times growing up.

Project Overview & Setup

Photo by Cristina Hernández on Unsplash

What are we Building?

We’re building an app that you, the aspiring Pokemon master and budding programmer can use to identify any Pokemon you find in the wild.

This project will expose you to several crucial topics for growing as an iOS developer including:

• Networking
• The MVVM Design Pattern (Model-View-ViewModel)
• Navigation in SwiftUI
• SwiftUI Syntax

Simple Initial Design, but we can Iterate and Improve as we go!

Features

Our app will allow users to input the name of a Pokemon and receive information about it including an image, its types, and its abilities.

If you want to follow along as you read, here is a link to the GitHub repo with the source code.

Initial UI Code

Without further ado, let’s start coding!

Open up a fresh project in XCode and within that project, make a new folder called Views.

Move your ContentView file into your Views folder (not absolutely necessary so don’t move your ContentView file if it gives you headaches), and create a fresh SwiftUI View File called PokedexSearchView.

So far, everything should look something like this:

I’m using a beta version of Xcode so your Preview code is likely different than mine.

The first thing we’re gonna do is give our app some color, so delete the line that says Text() (Line 11), and add a ZStack.

Next, within that ZStack, add a red color view and an empty VStack.

ZStack {
  Color.red
  VStack {
  }
}

Thanks to those 5 lines of code, we now have a red background. The ZStack lets us stack things along the Z-axis, and the VStack does the same thing but along the Y-axis.

Next, we want to add a new struct to serve as our search screen.

Outside of that struct, make a new struct called SearchScreen and add the following lines of code:

struct SearchScreen: View {
    var body: some View {
        ZStack {
            Rectangle().fill(.white).frame(width: 320, height: 430)
            Rectangle().fill(.blue).frame(width: 300, height: 400)
        }
    }
}

This creates 2 Rectangle views within a ZStack. There is a blue rectangle on top of a slightly larger, whit rectangle. Let’s add the SearchScreen to our PokedexSearchView to see how it looks.

So far so good!

Next, create a new struct called PokeSearchBar and add the following code:

    @Binding var pokemonName: String
    var body: some View {
        TextField("Who's that Pokemon?", text: $pokemonName)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()
    }

This creates a Binding property called pokemonName. Bindings in SwiftUI are used when you need to create a two way connection between a view and its underlying data.

It should be used here because our PokeSearchBar view will receive the value of pokemonName from the parent view, PokedexSearchView.

Add a variable for pokemonName to the PokedexSearchView, and then add the PokeSearchBar to the line directly below SearchScreen.

Pass the pokemonName variable into PokeSearchBar. Xcode is complaining at this point, so add the pokemonName variable with a value of empty string to your Preview Provider to fix that error.

Almost done for the day!

For last step, we’ll add some buttons that will be mostly decorative but will eventually allow users to navigate the Pokedex.

Create a struct called PokedexButtons.

struct PokedexButtons: View {
    var body: some View{
        HStack {
            Circle().fill(.gray).frame(width: 100, height: 100).padding(.trailing, 100)
            
            ZStack {
            
            Rectangle().fill(.gray).frame(width: 100, height: 40)
            Rectangle().fill(.gray).frame(width: 40, height: 100)
            }
        }
    }
}

Add it to the parent view and we’re done for the day!

Drop the confetti!

In the next Part of the tutorial, we will begin adding functionality to our app, and we will get started with the PokeAPI. See you next time and thanks for following along!