Concevoir rapidement un menu en SwiftUI

Nous avons précédemment vu comment naviguer entre les vues de notre application, explorons à présent la création de menu en SwiftUI.

Bon, bien sûr, nous n’allons pas créer un menu de restaurant mais bien un menu pour accéder aux différentes fonctionnalités de notre application. Donc nul besoin d’être un serveur pour créer un bon menu.

Regarde, tout le monde rigole, qu’est ce qu’on se marre ! 🥸 (blague réussie)

Créer un menu basique

Il y a différentes formes de menus en SwiftUI. Une simple liste d’éléments qui renvoient à d’autres pages peut être considérée comme une menu. Mais tu peux aussi créer un menu déroulant qui s’affiche en cliquant sur un bouton ou une icône ou un menu « flottant ». Enfin, le menu le plus évident est un menu fixe pour toutes les pages de ton application.

• Les différents éléments qui peuvent composer un menu

Pour créer un menu, tu peux t’appuyer sur ces différents éléments :

Constructeur	Description
Menu	La vue contenant les éléments de menu individuels.
Divider	Une ligne de séparation entre deux éléments de menu.
Section	Une vue pour grouper plusieurs éléments de menu connexes.
Text	Une vue pour afficher du texte à l’intérieur des éléments de menu.

• Utiliser Menu 

Nous pouvons utiliser la structure Menu pour créer un menu basique.

struct MenuView: View {
    var body: some View {
        Menu {
            Button("Annuler ☹️", action: cancelAction)
            Menu("Félicitations 🎯"){
                Button("Bravo 👏 🎉 🥳", action: celebrateAction)
            }
        } label: {
            Label("Voir les choix", systemImage: "wand.and.rays")
        }
    }

    func celebrateAction() { }
    func cancelAction() { }
}

Dans l’exemple ci-dessus, nous créons un menu qui a pour label « Voir les choix ». Il comporte un sous-menu « Félicitations 🎯 » qui affiche un autre bouton.

Pour que les boutons soient utiles, nous leur créons des fonctions qui sont appelées au clic sur le bouton grâce à l’élément action.

💡 Pour en savoir plus sur les images systèmes (systemImage), voici le lien vers SF Symbols qui gère la bibliothèque d’images.

• Utiliser Picker 

Assez ressemblant au niveau de l’apparence de Menu, Picker retient le dernier choix sélectionné parmi la liste déroulante proposée. Si tu veux comparer avec HMTL, c’est l’équivalent du select / option.

struct MenuView: View {
    @State private var selection = 1
    
    var body: some View {
        VStack {
            Picker(selection: $selection, label: Text("Faire un choix")) {
                Text("Je veux devenir un serveur qui déchire 🤵‍♀️").tag(1)
                Text("Je préfère être chef, chef. 👩‍🍳").tag(2)
                Text("Laissez moi dormir 😴").tag(3)
            }
        }
    }
}

Ici, on met à jour la variable d’état selection à chaque nouveau choix de l’utilisateur. Ainsi, c’est le dernier choix sélectionné qui est affiché.

• Utiliser les List 

Un autre moyen de présenter un choix de pages à ton utilisateur est de créer une liste de textes qui renverront vers d’autres pages ou d’autres éléments. Pour comprendre et utiliser les piles de navigation (NavigationStack) ainsi que leur utilisation avec les NavigationLink, tu peux te référer à l’article sur le sujet.

Dans cet exemple, nous créons une pile de navigation dans laquelle on affiche une liste de Text :

struct MenuView: View {
    var body: some View {
        NavigationStack {
            List {
                Text("Premier élément 👍")
                Text("Le second ✌️")
                Text("Le deuxième 🤘")
            }
            .navigationTitle("Menu")
        }
    }
}

Créer un menu fixe en bas de l’écran

Je ne vais pas te mentir, créer un menu fixe en bas de l’écran était mon idée de base lorsque j’ai commencé à rédiger cet article. Heureusement pour nous, je me suis laissée guidée par les odeurs alléchantes des différentes formes de menus que nous pouvons retrouver à travers SwiftUI. Et je ne voudrais pas t’embrouiller avec les concepts que nous venons de voir. Je te prépare donc un article un peu plus complet sur le sujet, car il est pour moi très important et mérite qu’on le savoure à sa juste valeur.

Je te servirai donc le lien vers cette cerise sur le gâteau, dès qu’il sera prêt. N’hésites pas à t’abonner à notre newsletter ou à récupérer ton bonus offert en attendant, ou si tu veux être prévenu(e). Et promis, j’arrête les vannes autour de la bouffe après ça 😝

🫶

Menus plus avancés

Puisque tu en veux toujours plus et que la création de menus te met l’eau à la bouche, voici une liste (non exhaustive) d’idées de création de menus. Tu trouveras également des liens avec le code expliqué pour les réaliser toi même.

• Ouvrir un menu latéral en cliquant sur un bouton. Voici un tuto très bien détaillé et expliqué sur le sujet. Attention cela dit à la version de Swift que tu utiliseras car certaines fonctions sont dépréciées (comme notre très chère animation).
• Utiliser un appui long sur un élément pour ouvrir un menu. Pour cela, tu peux utiliser le modificateur ContextMenu. Paul Hudson a créé un tuto à ce propos ou le tuto plus détaillé de SwiftAnytime.

---

Comme d’habitude, tu peux cliquer sur les petites pommes à côté des titres pour accéder à la documentation Apple.

💡 Utilise option ⌥ + cmd ⌘ + P pour mettre à jour la preview sur XCode.

Quel style de menu préfères-tu utiliser / implémenter ? Dis nous tout en commentaire.