Bienvenue au coeur de la matrice, l’endroit où l’utilisateur navigue entre les différentes vues de son application mobile. Je t’emmène là où le code fabrique le portail entre ces vues et où il fait voyager ton utilisateur. Tu vas apprendre la navigation en SwiftUI, prépare toi.
C’est toute une organisation pour transporter nos voyageurs. Des piles de vues aux List
, en passant par les colonnes. Alors attache ta ceinture et faisons le grand saut ensemble vers la navigation des vues de ton application mobile.
Les différences entre NavigationSplitView
, NavigationLink
et NavigationStack
NavigationSplitView
, NavigationLink
et NavigationStack
sont des composants SwiftUI qui permettent de gérer la navigation entre différentes vues d’une application.
- NavigationSplitView est une vue spéciale en SwiftUI qui affiche deux ou trois colonnes. Elle est plutôt utilisée sur iPad et Mac, là où l’écran est assez large pour afficher ces colonnes côte à côte. Cette vue est souvent utilisée pour les interfaces utilisateur de type « master-detail » où la vue de gauche affiche une liste de choix et la vue de droite affiche les détails de l’élément sélectionné dans la liste. L’utilisateur peut choisir de cacher la vue de gauche pour voir les détails en plein écran. La vue de gauche peut également être utilisée pour la navigation dans votre application.
- NavigationLink est un composant qui permet de créer un lien vers une autre vue dans une application SwiftUI. Lorsque l’utilisateur appuie sur le lien, la vue de destination est présentée, généralement en poussant la vue actuelle hors de la pile de navigation.
NavigationLink
gère automatiquement l’empilement de vues dans la pile de navigation. - NavigationStack est une vue SwiftUI qui affiche une pile de vues, avec la vue la plus récente en haut de la pile. La vue supérieure est celle qui est actuellement affichée. Tu peux ajouter ou supprimer des vues de la pile pour gérer la navigation au sein de votre application. Lorsque tu ajoutes une vue à la pile, SwiftUI ajoute automatiquement un bouton de retour permettant à l’utilisateur de revenir à la vue précédente.
Tu peux intégrer une NavigationStack
dans une NavigationSplitView
. Sur un appareil avec un écran plus petit, les colonnes se réduiront.
Les List
sont très souvent utilisées dans ces différents composants car, comme tu l’as sans doute remarqué, nous parlons de « piles » de vues. Elles sont donc stockées dans des listes.
Attention, depuis iOS 16 et Swift 4,
NavigationView
, qui est beaucoup répandu en SwiftUI, est déprécié. Il faut donc utiliser à la placeNavigationStack
etNavigationSplitView
. Ce changement est également valable pour iPadOS 16, macOS 13, tvOS 16 et watchOS 9. Pour plus d’informations, voir la doc Apple.
⚠️ Attention cependant ! Beaucoup de smartphones n’ont pas la version iOS 16. En fonction du but de ton application, il est peut-être cohérent de garder l’usage de NavigationView
. Tu peux aller voir cet article qui explique son utilisation, ainsi que les nouveaux changements de méthodes.
• Exemple
Sautons dans la matrice et engageons nous sur la route du développement avec ces différents gestionnaires de vue. C’est parti !
import SwiftUI
struct NavigationView: View {
@State private var selectedScreen: String?
@State private var selectedItem: String?
@State private var screens = [
"Écrans":
[
"Premier écran 🚀",
"Deuxième écran 🚀"
]
]
var body: some View {
NavigationSplitView {
List(selection: $selectedScreen) {
ForEach(Array(screens.keys.sorted()), id: \.self) { screen in
NavigationLink(value: screen) {
Text(verbatim: screen)
}
}
}
.navigationTitle("Accueil")
} content: {
if let selectedScreen {
List(selection: $selectedItem) {
ForEach(screens[selectedScreen, default: []], id: \.self) { item in
NavigationLink(value: item) {
Text(verbatim: item)
}
}
}
.navigationTitle(selectedScreen)
} else {
Text("Choisis un écran depuis la page d'accueil.")
}
} detail: {
NavigationStack {
ZStack {
if let selectedItem {
NavigationLink(value: selectedItem) {
Text(verbatim: selectedItem)
.navigationTitle(selectedItem)
}
} else {
Text("Choisis un écran depuis la page Écrans.")
}
}
.navigationDestination(for: String.self) { text in
Text("Youpi, tu es arrivé(e) à destination ! 👩🚀")
}
}
}
}
}
Code très largement inspiré de l’article de Majid.
Customisation de la navigation en SwiftUI
Il existe plusieurs fonctionnalités pour t’aider dans ton voyage à travers la navigation en SwiftUI, en voici quelques-unes :
.navigationBarTitle()
permet de définir le titre de la barre de navigation..navigationBarItems()
permet de définir des éléments à ajouter à la barre de navigation. On peut ajouter des boutons, des vues personnalisées, etc..sheet()
permet d’afficher une vue modale. Cette vue modale peut être utilisée pour saisir des données ou pour afficher des informations supplémentaires..popover()
permet d’afficher une vue dans une fenêtre contextuelle. Cette vue peut être utilisée pour afficher des informations supplémentaires ou pour saisir des données..fullScreenCover()
permet d’afficher une vue modale en plein écran..tabItem()
permet de définir un élément de la barre d’onglets..tag()
permet de définir une valeur pour un élément de la barre d’onglets.
Nous voilà arrivés à destination. Je suis sûre que tu n’as rien senti. Et pourtant, on en a fait des aller-retour entre nos différentes vues. Et ton utilisateur en fera tout autant, sans bouger de sa chaise.
Si tu souhaites te documenter un peu plus sur le sujet, tu peux aller voir l’article de XXX.