SwiftUI - Create a Detail View
In this tutorial I will show you how incredibly simple it is to create a Detail View and pass in data to display it ✨
This tutorial is a natural follow-up of SwiftUI - Understanding Binding. You can either go for that tutorial first and come back later or be a rebel, skip it and read on 😊
Watch the video tutorial of this article instead: here ✨
Index
1. Create a Detail View
2. Integrate your Detail View
3. Where to go from here
1. Create a Detail View
In case you skipped the former tutorial (you rebel) here’s the codebase that we will use to start from in this tutorial: Understanding Binding (Codebase).
The first step for us is to add a handful pokemon images to our project:
Save them from here and make sure to name them after their actual names.
The next step for us is to create a new SwiftUI View and call it PokemonDetail:
We are going to add an image and a text in our PokemonDetail view like so:
import SwiftUIstruct PokemonDetail: View {
let pokemon: Pokemon var body: some View {
VStack {
Image(pokemon.name.lowercased())
Text(pokemon.type)
Spacer()
}
}
}#if DEBUG
struct PokemonDetail_Previews: PreviewProvider {
static var previews: some View {
PokemonDetail(
pokemon: Pokemon(
id: 0,
name: "Charmander",
type: "Fire",
color: .red
)
)
}
}
#endif
As you can see we are using the pokemons name to access the right image. If you haven’t me Spacer before here you go. It’s a pleasure for him to meet you! His job is to fill out all the space that is left over resulting in our view to be pushed upwards so we end up having this:
We can make our Detail View a little more beautiful by applying some styling:
import SwiftUIstruct PokemonDetail: View {
let pokemon: Pokemon var body: some View {
VStack {
Image(pokemon.name.lowercased())
.resizable()
.frame(width: 200, height: 200) Text(pokemon.type)
.font(.title)
.foregroundColor(pokemon.color) Spacer()
}.navigationBarTitle(Text(pokemon.name), displayMode: .inline)
}
}#if DEBUG
struct PokemonDetail_Previews: PreviewProvider {
static var previews: some View {
PokemonDetail(
pokemon: Pokemon(
id: 0,
name: "Charmander",
type: "Fire",
color: .red
)
)
}
}
#endif
We telling our Image to please resize please to fit within your parent frame. Now by default that is your whole View unless you specify a frame to wrap around our image which we do with .frame(width: 200, height: 200) 😊
For the Text we want it to have it a little larger and so we can choose from a variety of sizes such as: .caption / .body / .subheading / .title and more!
You should have a nicer looking PokemonDetail View just like this:
2. Integrate your Detail View
Ready to use our new DetailView? Let’s go to our ContentView and do it:
import SwiftUIstruct Pokemon: Identifiable {
...
}struct ContentView : View {
@State var pokemonList = [ ... ]
@State var showDetails = truevar body: some View {
NavigationView {
List(pokemonList) { pokemon in
NavigationLink(destination: PokemonDetail(pokemon: pokemon) {
HStack {
Text(pokemon.name)
if self.showDetails {
Text(pokemon.type).foregroundColor(pokemon.color)
}
}
}
}
.navigationBarTitle(Text("Pokemon"))
.navigationBarItems(
leading: ToggleTextButton(isOn: $showDetails),
trailing: Button(
action: addPokemon,
label: { Text("Add") }
)
)
}
} func addPokemon() {
...
}
}
Let’s go and run our app to see how magically everything just worked out ✨
