Navigation

Navigation

On attaque l’ultime arc de notions dans cette formation sur les bases de SwiftUI, la navigation.

Depuis le début, on s’éclate à créer nos écrans, c’est chouette, mais qu’est-ce qu’une application sans navigation ? Ça existe, mais rares sont celles qui n’en ont pas.

Je parle d’arc de notions parce qu’on va voir plusieurs outils autour de la navigation. Pour commencer, je vais te présenter la navigation hiérarchique, la plus classique, c’est le passage d’un écran parent vers un écran enfant. Par exemple, une liste de recettes de cuisine où l’utilisateur appuie sur une recette pour afficher l’écran de détail correspondant.

Ensuite, on verra les modales (oui, ce sont des pop-ups, mais on est des pros, donc on dit “modale” ! 😎). On abordera aussi la toolbar, qui permet d’ajouter des boutons interactifs dans la barre de navigation.

Enfin, on terminera avec la célèbre TabView, ce fameux menu en bas de l’écran, omniprésent dans nos applications mobiles.

C’est le sprint final de cette formation, alors accroche-toi, tu es presque au bout !

NavigationStack

Pour commencer avec la navigation, je te présente une nouvelle stack, NavigationStack. C’est un composant qui permet de déclarer une pile de navigation.

Pour être clair, la vue sur laquelle tu places une NavigationStack sera ta vue parent. La NavigationStack sera toujours le conteneur principal de ta navigation.

let struct MyNavView: View {
    var body: some View {
        NavigationStack {
            Text("Vue parente")
    }
}

La pile de navigation est ici correctement déclaré.

 Modificateurs du NavigationStack

struct MyNavView: View {
    var body: some View {
        NavigationStack {
            Text("Hello World!")
                .navigationTitle("Vue parent")
        }
    }
}

En plus de navigationTitle, le NavigationStack vient avec de nombreux modificateurs spécifiques à son utilisation. Je te mets la liste ici, et nous en verrons certains plus en détail, notamment .navigationDestination et .toolbar.

Navigation statique, NavigationLink

Le NavigationLink est l’un des composants clés de la navigation. Il permet de créer une transition entre deux écrans dans un NavigationStack.

C’est la solution classique pour une navigation statique et prévisible, c’est-à-dire lorsque tu sais exactement où l’utilisateur va se diriger, sans condition particulière sur la navigation.

Le NavigationLink fonctionne presque comme un bouton :

→ Il possède une zone pour déclarer la destination (destination), c’est-à-dire l’écran vers lequel naviguer.

→ Il possède une zone label pour définir l’élément déclencheur, qui peut être un texte, une image, ou tout autre élément interactif.

struct MyNavView: View {
    var body: some View {
        NavigationStack {
            VStack {
                NavigationLink {
                    ChildView()
                } label: {
                    ZStack {
                        Rectangle()
                            .fill(Color.orange)
                            .cornerRadius(10)
                            .frame(width: 200, height: 50)
                        HStack {
                            Text("Vue enfant")
                                .font(.headline)
                                .fontWeight(.bold)
                            Image(systemName: "chevron.right")
                        }
                        .foregroundStyle(.white)
                    }
                }
            }
            .navigationTitle("Vue parent")
        }
    }
}

En appuyant sur le NavigationLink, l’utilisateur est automatiquement dirigé vers l’écran enfant placé dans la destination (ici ChildView).

La destination, c’est la vue où tu veux que ton utilisateur arrive après avoir déclenché un NavigationLink.

Tu observeras que le bouton de retour est ajouté automatiquement dans le processus de navigation. Par défaut, il prend le nom du titre de navigation (navigationTitle). Si aucun titre de navigation n’est défini, il s’appellera simplement “Back”.

Faire transiter une donnée d’un écran à un autre.

struct AppleDevice: Identifiable {
    let id = UUID()
    let name: String
    let icon: String
    let category: String
}

let appleDevices: [AppleDevice] = [
    AppleDevice(name: "iPhone 15 Pro", icon: "iphone", category: "phone"),
    AppleDevice(name: "iPad Pro", icon: "ipad", category: "tablet"),
    AppleDevice(name: "MacBook Air M2", icon: "laptopcomputer", category: "laptop"),
    AppleDevice(name: "Apple Watch Series 9", icon: "applewatch", category: "wearable"),
    AppleDevice(name: "AirPods Pro 2", icon: "airpodspro", category: "audio"),
    AppleDevice(name: "Apple TV 4K", icon: "appletv", category: "home"),
    AppleDevice(name: "Apple Vision Pro", icon: "visionpro", category: "vision"),
    AppleDevice(name: "iPhone SE", icon: "iphone.gen2", category: "phone"),
    AppleDevice(name: "MacBook Pro M3", icon: "laptopcomputer", category: "laptop"),
    AppleDevice(name: "iPad Mini", icon: "ipad", category: "tablet")
]

struct AppleDeviceDetailView: View {
    let device: AppleDevice

    var body: some View {
        VStack(spacing: 20) {
            Image(systemName: device.icon)
                .resizable()
                .scaledToFit()
                .frame(width: 100, height: 100)
            Text(device.name)
                .font(.largeTitle)
                .fontWeight(.bold)
            
            Text("Catégorie : \(device.category)")
                .font(.title3)
                .foregroundColor(.gray)
        }
        .padding()
        .navigationTitle(device.name)
    }
}

#Preview {
    AppleDeviceDetailView(device: AppleDevice(name: "iPhone 15 Pro", icon: "iphone", category: "phone"))
}

struct AppleDeviceListView: View {
    var body: some View {
        NavigationStack {
            List(appleDevices) { index in
                NavigationLink(destination: AppleDeviceDetailView(device: index)) {
                    HStack(spacing: 15) {
                        Image(systemName: index.icon)
                            .font(.title)
                        VStack(alignment: .leading) {
                            Text(index.name)
                                .font(.headline)
                            Text(index.category)
                                .font(.subheadline)
                                .foregroundColor(.gray)
                        }
                        Image(systemName: "chevron.right")
                            .foregroundColor(.gray)
                    }
                    .padding(.vertical, 10)
                }
            }
            .navigationTitle("Appareils Apple")
        }
    }
}