Barre d'outils SwiftUI dans iOS 26 : groupes Liquid Glass, espaceurs et titres

Recompilez une app avec le SDK iOS 26 et la barre d'outils change d'apparence avant même que vous modifiiez une ligne. Les boutons flottent sur du Liquid Glass, les voisins partagent une capsule, le champ de recherche descend en bas de l'écran, et le titre inline ne reste pas toujours centré. Ce guide explique comment la barre d'outils SwiftUI dans iOS 26 décide de ce qui va ensemble, et quelles API vous permettent d'en reprendre le contrôle.

Il s'appuie sur les sessions Build a SwiftUI app with the new design et What's new in SwiftUI de la WWDC25, sur la documentation d'Apple et sur les publications du développeur iOS @sarunw. Sauf mention contraire, les API présentées ici sont nouvelles dans iOS 26.0, et certains comportements ont évolué entre les mises à jour intermédiaires : vérifiez-les sur les versions que vous prenez en charge. La dernière section explique ce que deviennent ces barres d'outils sur iPhone Duo.

Comment iOS 26 regroupe-t-il les éléments de la barre d'outils dans le Liquid Glass ?

Dans iOS 26, les éléments de la barre d'outils reposent sur une surface Liquid Glass qui flotte au-dessus de votre contenu et s'adapte à ce qui se trouve dessous. La session d'Apple énonce clairement la règle clé : les éléments de la barre d'outils sont regroupés automatiquement. Les éléments voisins ayant le même placement partagent une capsule, tandis que le bouton retour du système garde la sienne.

Ce regroupement est généralement souhaitable, car il apaise la barre. Il pose problème quand des actions sans rapport se retrouvent dans la même capsule. Un développeur sur les forums d'Apple a constaté que deux éléments leading fusionnaient systématiquement, même avec des placements différents, jusqu'à ce qu'un espaceur les sépare.

Apple a aussi changé l'apparence de ce qui se trouve dans le verre. Les icônes de la barre d'outils sont monochromes à davantage d'endroits, ce qui réduit le bruit visuel. Vous pouvez toujours appliquer une teinte, mais Apple conseille de s'en servir pour transmettre un sens, comme un appel à l'action ou une étape suivante, et pas seulement pour l'effet visuel. La session vous demande aussi de retirer les arrière-plans personnalisés ou assombrissements derrière les éléments de barre, car ils perturbent le nouvel effet de bord de défilement. Cet effet change à nouveau dans iOS 27, comme l'explique notre guide de l'effet de bord de défilement SwiftUI.

Pourquoi un bouton proéminent obtient-il sa propre capsule ?

Une action principale comme Done ou Save doit se distinguer des boutons qui l'entourent. Dans iOS 26, vous l'obtenez avec les nouveaux styles de bouton en verre. La session d'Apple les présente comme des styles qui apportent le Liquid Glass à n'importe quel bouton de votre app : .glass pour un bouton standard et .glassProminent pour un bouton proéminent.

Dans une barre d'outils, un bouton proéminent modifie aussi le regroupement. Comme le dit @sarunw, un bouton proéminent ne partage jamais une capsule de verre dans une barre d'outils iOS 26. Ajoutez .buttonStyle(.glassProminent) et le bouton sort de son groupe pour occuper son propre cercle teinté.

.toolbar {
    ToolbarItemGroup(placement: .topBarTrailing) {
        Button("Share", systemImage: "square.and.arrow.up") { share() }
        Button("Done", systemImage: "checkmark") { save() }
            .buttonStyle(.glassProminent)
    }
}

Dans cet exemple, Share garde un fond de verre ordinaire et Done se place à l'écart dans sa propre forme teintée. Ajoutez .tint(_:) pour choisir la couleur. La session What's new in SwiftUI d'Apple illustre la même idée avec .buttonStyle(.borderedProminent) et .tint(.pink) sur une action principale.

Réservez-le à une seule action par barre. Si tout est proéminent, plus rien ne l'est. Notez aussi un signalement sur le forum selon lequel les boutons .glassProminent de la barre d'outils apparaissaient sans teinte pendant environ une seconde après une navigation dans la release candidate d'iOS 26.1. Un ingénieur d'Apple a répondu que cela ressemblait à un bug : vérifiez donc les versions que vous prenez en charge.

Comment séparer les groupes de la barre d'outils avec ToolbarSpacer ?

Quand le regroupement automatique associe les mauvais éléments, utilisez ToolbarSpacer. Apple le décrit comme un élément qui crée des coupures visuelles entre les éléments de la barre d'outils. Son initialiseur est init(_ sizing: SpacerSizing = .flexible, placement: ToolbarItemPlacement = .automatic), et il est disponible à partir d'iOS 26.0.

L'exemple Landmarks d'Apple utilise des espaceurs fixes pour diviser la barre d'outils de sa vue détaillée en trois sections : le partage, puis favori et collections, puis le bouton de l'inspecteur.

.toolbar {
    ToolbarItem {
        ShareLink(item: landmark, preview: landmark.sharePreview)
    }
    ToolbarSpacer(.fixed)
    ToolbarItemGroup {
        LandmarkFavoriteButton(landmark: landmark)
        LandmarkCollectionsMenu(landmark: landmark)
    }
    ToolbarSpacer(.fixed)
    ToolbarItem {
        Button("Info", systemImage: "info") { showInspector() }
    }
}

Cet exemple est une version condensée de celui d'Apple. Les deux boutons liés partagent une capsule, tandis que Share et Info ont chacun la leur. Donnez à l'espaceur le même placement que les éléments qui l'entourent, par exemple ToolbarSpacer(.fixed, placement: .topBarLeading). Sans cela, l'espaceur utilise le placement .automatic et risque de ne pas se placer entre les éléments voulus ; c'est ce qui avait piégé le développeur du forum.

Pour un élément isolé qui ne doit pas du tout reposer sur le verre, comme une photo de profil, la session d'Apple montre .sharedBackgroundVisibility(.hidden) sur le ToolbarItem. L'élément forme alors son propre groupe, sans arrière-plan.

Comment donner sa propre capsule au champ de recherche de la barre inférieure ?

Sur iPhone, iOS 26 déplace la recherche en bas de l'écran. La session d'Apple explique que la recherche dans la barre d'outils place le champ en bas de l'écran, à portée de main. Pour choisir où se place le champ parmi vos propres éléments de barre inférieure, placez un DefaultToolbarItem de type recherche.

Le piège, c'est que le champ de recherche est lui aussi un élément de barre d'outils. Comme le note @sarunw, dans iOS 26, il fusionne avec les boutons voisins. Sa solution consiste à placer un ToolbarSpacer fixe de chaque côté pour lui donner sa propre capsule :

NavigationStack {
    NoteList()
        .toolbar {
            ToolbarItem(placement: .bottomBar) {
                Button("Filter", systemImage: "line.3.horizontal.decrease") { }
            }
            ToolbarSpacer(.fixed, placement: .bottomBar)
            DefaultToolbarItem(kind: .search, placement: .bottomBar)
            ToolbarSpacer(.fixed, placement: .bottomBar)
            ToolbarItem(placement: .bottomBar) {
                Button("New Note", systemImage: "square.and.pencil") { }
            }
        }
}
.searchable(text: $searchText)

Filter, la recherche et New Note occupent désormais trois capsules séparées. L'exemple de type Mail de la même session utilise plutôt un espaceur flexible avant la recherche, qui repousse le filtre vers le bord leading, et un espaceur fixe entre la recherche et le bouton de rédaction. Choisissez la variante qui correspond au lien entre les éléments.

Selon la taille de l'appareil et le nombre de boutons, le système peut réduire le champ à un bouton. Si la recherche n'est pas centrale dans votre app, activez ce comportement avec .searchToolbarBehavior(.minimize). L'article de Natalia Panferova sur la recherche dans iOS 26 enveloppe ces appels dans if #available(iOS 26.0, *) pour que le même code compile pour des cibles plus anciennes.

Pourquoi mon titre de navigation inline est-il passé sur le bord leading ?

Autre surprise d'iOS 26 : le titre inline. Sous iOS 18, il se trouvait au centre de la barre de navigation. Dans iOS 26, comme le montre @sarunw, un titre inline ne reste centré que s'il tient ; ajoutez un élément de plus à la barre d'outils et le titre passe sur le bord leading.

Des développeurs l'ont constaté dans les deux sens. Un développeur UIKit sur les forums d'Apple a vu un segmented control placé dans la vue de titre rester centré sans bouton de barre, puis s'aligner à gauche dès l'apparition d'un seul élément trailing. La réponse d'Apple s'est limitée à demander un rapport de bug : il n'existe donc pas de déclaration officielle sur la règle exacte.

Le conseil pratique est de concevoir pour les deux positions :

• Gardez des titres courts, pour qu'ils tiennent plus souvent au centre.
• N'alignez pas de contenu sur un titre centré. Il pourrait ne pas y rester.
• Comptez vos éléments. Déplacer une action rarement utilisée dans un Menu libère de la place dans la barre.

Qu'est-ce qui a changé pour les segmented pickers et les sliders dans iOS 26 ?

Les barres d'outils ne sont pas les seules commandes à avoir changé. La session d'Apple indique que les interrupteurs, les segmented pickers et les sliders se transforment désormais en Liquid Glass pendant l'interaction. Deux détails méritent d'être connus, car ils arrivent sans aucune modification du code.

Segmented pickers. @sarunw décrit le segmented picker de SwiftUI comme plus épuré sous iOS 26 : un segment sélectionné plus arrondi, des séparateurs disparus, et le même code. Un picker standard comme celui de l'exemple d'Apple adopte le nouveau rendu de lui-même :

Picker("View", selection: $selection) {
    Text("Map").tag(ViewMode.map)
    Text("List").tag(ViewMode.list)
}
.pickerStyle(.segmented)

Sliders à pas. Les sliders prennent désormais en charge les graduations, et Apple indique qu'elles apparaissent automatiquement quand on initialise un slider avec un paramètre step. L'exemple de @sarunw : step: 1 ajoute une graduation pour chaque valeur.

Slider(value: $rating, in: 1...5, step: 1) {
    Text("Rating")
}

Slider(value: $speed, in: 0.5...2, step: 0.25, neutralValue: 1) {
    Text("Playback speed")
}

Le premier slider affiche cinq graduations. Le second utilise neutralValue, ajouté par Apple dans iOS 26 pour que le remplissage de la piste parte d'une valeur médiane, comme la vitesse de lecture normale. Le même initialiseur accepte aussi enabledBounds pour limiter la plage sélectionnable, et une closure tick qui renvoie un SliderTick pour placer vous-même les graduations. Si un slider a beaucoup de pas, les graduations peuvent être plus nombreuses que souhaité : vérifiez le rendu avant de publier.

Comment les barres d'outils d'iOS 26 se comportent-elles dans la barre verticale de l'iPhone Duo ?

Sur iPhone Duo, les apps compilées avec le SDK iOS 27.1 reçoivent une barre verticale sur l'écran extérieur et sur l'écran intérieur en paysage : les éléments de navigation et de barre d'outils passent dans une colonne le long d'un bord latéral. Notre guide de la barre d'outils verticale de l'iPhone Duo traite le sujet en détail. Voici comment les API de barre d'outils d'iOS 26 s'y transposent, d'après le Tech Talk Raise the bar with iPhone Duo d'Apple.

• Espaceurs. Par défaut, les espaceurs flexibles ont une taille nulle sur l'axe vertical, mais les espaceurs fixes continuent de respecter leur taille minimale. Un espaceur flexible qui écarte des groupes à l'horizontale n'a aucun effet à la verticale, tandis qu'un espaceur fixe sépare toujours les groupes.
• Regroupement. Quand les barres du haut et du bas deviennent une seule barre verticale, Apple indique que les éléments restants conservent leur regroupement d'origine, un espaceur séparant ce qui venait du haut et du bas.
• Pas de marge supplémentaire. Apple conseille que votre app ne crée pas d'espacement supplémentaire, que la barre soit horizontale ou verticale. N'ajoutez pas de marge dans les éléments pour simuler un écart ; utilisez ToolbarSpacer.
• Icônes et titres. Comme le note @sarunw, les éléments dotés d'une icône passent dans la barre verticale, tandis que les éléments uniquement textuels restent à l'horizontale. Donnez à votre bouton Done proéminent un systemImage en plus d'un titre.
• Emplacement de Done. Apple vous demande de placer les actions proéminentes comme Done près du haut avec ToolbarItem(placement: .topBarPinnedTrailing), nouveau dans iOS 27.0. La documentation d'Apple précise que les éléments épinglés ne passent dans le menu de débordement que lorsque la recherche est active et que la place manque.

Le Tech Talk n'aborde pas le rendu de .glassProminent ni du champ de recherche de la barre inférieure dans une barre verticale : vérifiez-les dans le simulateur iPhone Duo. Les barres d'onglets passent aussi sur le côté, comme l'explique notre guide des barres d'onglets et de NavigationSplitView sur iPhone Duo.

Ce qu'il faut retenir

• iOS 26 regroupe automatiquement les éléments voisins de la barre d'outils dans des capsules Liquid Glass communes.
• .buttonStyle(.glassProminent) sort un bouton de son groupe pour lui donner sa propre forme teintée. Réservez-le à une seule action principale.
• ToolbarSpacer(.fixed) sépare des groupes et ToolbarSpacer(.flexible) les écarte. Donnez aux espaceurs le même placement que leurs voisins.
• Entourez DefaultToolbarItem(kind: .search, placement: .bottomBar) d'espaceurs fixes pour donner à la recherche sa propre capsule.
• Les titres inline ne restent centrés que s'ils tiennent : prévoyez aussi un titre sur le bord leading.
• Dans la barre verticale de l'iPhone Duo, les espaceurs flexibles se réduisent à zéro, les espaceurs fixes restent et les groupes sont conservés.

Découvrez ensuite comment ces barres passent sur le côté du nouvel appareil dans notre guide de la barre d'outils verticale de l'iPhone Duo, puis parcourez la checklist pour préparer votre app à l'iPhone Duo. Pour des apps qui font déjà quelque chose de concret avec la charnière, consultez Built for the fold.