Building a Pokedex App to Learn SwiftUI! Part One: UI

#tutorial #mobile #beginners #todayilearned

I wouldn't be half the engineer I am today without watching Ash Ketchum ̶c̶r̶a̶s̶h̶ ̶a̶n̶d̶ ̶b̶u̶r̶n̶ learn from his mistakes so many times growing up.

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

The first version of our app will look something like this:

Requirements

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:

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.

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.

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

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!

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!

If you enjoyed this, be sure to like the post and follow me for more content on APIs, iOS Development, and more!

SwiftUI Learning Resources: