Barre d'outils verticale de l'iPhone Duo : les barres passent sur le côté

Recompilez votre app avec le SDK iOS 27.1, lancez-la sur iPhone Duo, et la barre de navigation comme la barre d'outils ne sont plus en haut et en bas. Elles forment désormais une colonne le long d'un côté de l'écran. Cette barre d'outils verticale de l'iPhone Duo, qu'Apple appelle la barre verticale, est le plus grand changement visuel que la plupart des apps subissent sur le nouvel appareil, et l'essentiel se fait automatiquement.

Automatique ne veut pas dire gratuit. Une barre verticale est étroite, sa largeur est fixe et elle partage son bord avec l'interface système. Ce guide explique quand les barres passent à la verticale, comment préparer vos éléments, comment contrôler le débordement et l'ordre, et quand désactiver la barre. Il s'appuie sur le Tech Talk d'Apple Raise the bar with iPhone Duo, la documentation d'Apple et les publications du développeur iOS @sarunw. Ces API sont nouvelles dans iOS 27.0 et 27.1, et certains détails peuvent changer d'une version à l'autre.

Qu'est-ce que la barre verticale de l'iPhone Duo ?

La barre verticale est une bande unique le long d'un bord latéral, qui regroupe tout ce qui était auparavant réparti entre le haut et le bas de l'écran. Comme le résume @sarunw, elle réunit les Live Activities, les informations d'état et les éléments de navigation et de barre d'outils, qui partagent tous l'espace le long d'un même bord.

Apple la décrit comme les commandes de navigation, de barre d'outils et de barre d'onglets partageant une même zone, pivotée de 90 degrés en une pile verticale. La barre d'état change d'axe en conséquence, et les notes de Blake Crosley sur la session de design d'Apple décrivent la Dynamic Island qui s'étend verticalement à l'arrivée des Live Activities. La documentation d'Apple indique que lorsque la barre apparaît ou disparaît, le contenu se réorganise et une marge de safe area leading ou trailing est ajoutée ou retirée pour la barre. C'est pourquoi les marges de safe area et de contenu horizontales comptent autant sur cet appareil.

Vous l'activez en compilant avec le dernier SDK. Le Tech Talk Prepare your app for iPhone Duo indique qu'avec le SDK iOS 27.1, les boutons standard de navigation et de barre d'outils se disposent verticalement sous la barre d'état.

Quand une barre d'outils passe-t-elle à la verticale sur iPhone Duo ?

L'apparition d'une barre verticale dépend de l'écran, de l'orientation et de la position de votre conteneur.

La règle derrière les lignes de split view est simple : une barre ne passe à la verticale que si son conteneur longe le bord de l'écran. Comme le note @sarunw, la colonne de détail d'une split view en reçoit une et les autres colonnes restent horizontales. Le Tech Talk d'Apple ajoute que les sheets placées avec preferredPlacement reçoivent une barre verticale du côté droit, mais pas du côté gauche. L'écran intérieur renvoie les mêmes size classes en portrait et en paysage, donc la barre est l'une des rares choses qui changent quand vous le faites pivoter. Notre guide sur les size classes de l'iPhone Duo couvre le reste.

Quels conteneurs sont concernés ? En SwiftUI, Apple associe le modificateur toolbar à NavigationStack ou NavigationSplitView. En UIKit, préférez UINavigationController et UITabBarController, qui gèrent leurs propres barres.

NavigationStack {
    ContentView()
        .toolbar {
            ToolbarItem(placement: .bottomBar) {
                Button("Share", systemImage: "square.and.arrow.up") { share() }
            }
        }
}

Rien dans cet exemple n'est spécifique à l'iPhone Duo. Compilé avec le SDK iOS 27.1, l'élément de la barre inférieure passe dans la barre verticale quand le contexte le permet.

Pourquoi la barre verticale privilégie-t-elle les symboles plutôt que les titres ?

Une barre horizontale a une hauteur fixe et peut s'élargir autant que ses libellés l'exigent. Une barre verticale inverse cela : Apple décrit une largeur fixe et une hauteur d'élément flexible. Un titre long n'a nulle part où aller, la barre privilégie donc les éléments composés uniquement d'un symbole.

Vous ne choisissez pas une représentation distincte pour chaque mise en page. Vous donnez à chaque élément une icône et un titre, et le système choisit. Selon le Tech Talk d'Apple, les éléments dotés d'une icône passent à la verticale et les éléments uniquement textuels restent horizontaux, tandis que les menus de débordement affichent à la fois le titre et l'icône. C'est pourquoi le raccourci de @sarunw fonctionne : donnez aux éléments de barre d'outils une icône et un titre, et vous êtes probablement prêt pour l'iPhone Duo. Fournissez toujours le titre, même pour un élément affiché sous forme de symbole seul, car le système l'utilise dans les menus de débordement et les formes développées.

Les vues personnalisées demandent plus de soin. @sarunw souligne qu'un panneau personnalisé affichant une icône et un titre fonctionne à l'horizontale, mais que sur une barre verticale les titres doivent être masqués, sans quoi le panneau est écrasé dans la largeur fixe. La valeur d'environnement toolbarVerticalEdge d'Apple indique à une vue personnalisée quand elle se trouve dans ce contexte :

struct FilterPanel: View {
    @Environment(\.toolbarVerticalEdge) private var toolbarVerticalEdge

    var body: some View {
        if toolbarVerticalEdge == nil {
            Label("Filters", systemImage: "line.3.horizontal.decrease")
        } else {
            Image(systemName: "line.3.horizontal.decrease")
                .accessibilityLabel("Filters")
        }
    }
}

La valeur est un HorizontalEdge? et elle est nouvelle dans iOS 27.1. Apple la documente comme le bord préféré du système pour la barre verticale, qu'une barre verticale soit actuellement visible ou non, et nil là où aucune barre verticale n'est jamais utilisée. En UIKit, lisez traitCollection.verticalBarEdge, qui renvoie une valeur non spécifiée dans ces contextes.

Certains éléments ne devraient jamais passer à la verticale. Un bouton de panier qui affiche un prix porte une information dans son texte. Le Tech Talk d'Apple montre pour ces cas un modificateur axisBehavior, avec .horizontalOnly et .verticalPreferred comme valeurs citées à l'écran.

Comment contrôler le débordement avec visibilityPriority ?

La barre verticale manque de place plus vite qu'une barre horizontale, surtout sur l'écran extérieur en paysage, ou quand le clavier ou le Picture in Picture se disputent l'espace. Dans ce cas, des éléments passent dans un menu de débordement. Par défaut, selon Apple, les éléments débordent de bas en haut.

Pour garder un élément important visible, augmentez sa priorité avec .visibilityPriority, qu'Apple documente pour iOS 27.0. Les éléments de priorité inférieure passent en débordement en premier.

.toolbar {
    ToolbarItem(placement: .bottomBar) {
        Button("Archive", systemImage: "archivebox") { archive() }
    }
    ToolbarItem(placement: .bottomBar) {
        Button("Compose", systemImage: "square.and.pencil") { compose() }
    }
    .visibilityPriority(.high)
}

Dans cet exemple, Archive passe en débordement avant Compose. UIKit applique la même idée avec item.visibilityPriority = .high, selon le Tech Talk. Apple suggère de définir d'abord les priorités sur les groupes, puis sur les éléments qu'ils contiennent. Elle suggère aussi de garder visibles le plus longtemps les actions fréquentes comme Compose, ainsi que les éléments avec badge ou d'état.

Si vous avez votre propre menu « plus », intégrez-le à celui du système. Apple montre ToolbarOverflowMenu en SwiftUI et navigationItem.additionalOverflowItems en UIKit, et demande de réserver le symbole des points de suspension au débordement. Quand une barre d'onglets et une barre d'outils se disputent la place, toolbarVerticalCompressionBehavior(_:) en SwiftUI et verticalBarCompressionBehavior en UIKit déterminent laquelle se compresse en premier. Par défaut, c'est la barre d'outils.

Comment épingler Done et ordonner les éléments avec topBarPinnedTrailing ?

L'ordre compte dans une barre verticale, car le haut est l'endroit le plus facile à repérer. Apple recommande de réserver le haut à la navigation principale, comme Retour ou Fermer, suivie des actions importantes comme Done. Les contrôleurs de navigation ajoutent automatiquement le bouton Retour. Pour un bouton Fermer personnalisé en SwiftUI, Apple utilise ToolbarItem(placement: .cancellationAction).

Pour l'action principale, utilisez .topBarPinnedTrailing. Apple le documente comme disponible à partir d'iOS 27.0, et @sarunw note qu'il maintient l'élément près du haut de la barre verticale.

.toolbar {
    ToolbarItem(placement: .cancellationAction) {
        Button("Cancel", systemImage: "xmark") { dismiss() }
    }
    ToolbarItem(placement: .topBarPinnedTrailing) {
        Button("Done", systemImage: "checkmark") { save() }
    }
}

Les éléments épinglés sont tenaces : la documentation d'Apple précise qu'ils ne passent dans le menu de débordement que lorsque la recherche est active et que la place manque. L'équivalent UIKit présenté dans le Tech Talk est navigationItem.pinnedTrailingGroup, défini avec un UIBarButtonItemGroup.

Comment désactiver la barre verticale sur iPhone Duo ?

Toutes les apps n'ont pas besoin d'une barre verticale. L'exemple d'Apple est Calculette, une mise en page d'une seule page, chargée vers le bas, où l'espace horizontal est précieux. Sa documentation cite aussi un lecteur vidéo plein écran avec des commandes dans la barre d'outils. Dans ces cas, toolbarVerticalBehavior(_:) de SwiftUI, nouveau dans iOS 27.1, revient aux barres horizontales standard en haut et en bas.

NavigationStack {
    CalculatorView()
        .toolbarVerticalBehavior(.disabled)
}

final class CalculatorViewController: UIViewController {
    override var preferredVerticalBarBehavior: UIVerticalBarBehavior {
        .disabled
    }
}

Le premier exemple est en SwiftUI, le second en UIKit. Tous deux proviennent du Tech Talk et de la documentation d'Apple, et tous deux valent automatic par défaut. En SwiftUI, le comportement est résolu par le conteneur : un NavigationStack utilise sa vue la plus haute dans la pile, un TabView l'onglet sélectionné et un NavigationSplitView la colonne la plus en position trailing.

Apple demande de considérer ce réglage comme un choix stable. Ne l'activez et ne le désactivez pas au fil de la navigation ou des changements d'état d'une vue. Si vous voulez seulement masquer les barres sur un écran, utilisez plutôt toolbarVisibility(_:for:). Notez aussi qu'un développeur a signalé sur les forums d'Apple un élément apparaissant brièvement dans la barre verticale lors de la fermeture d'une présentation plein écran malgré .disabled : testez donc les transitions.

Pourquoi les barres personnalisées et les mises en page RTL ne déplacent-elles pas la barre ?

Deux comportements surprennent les développeurs. D'abord, les barres personnalisées restent en place. @sarunw note que si vous créez vos propres UIToolbar, UINavigationBar ou UITabBar, l'iPhone Duo ne déplacera pas leurs éléments : le système ne déplace que les barres qu'il gère. Le Tech Talk d'Apple dit la même chose et recommande les conteneurs gérés par le système. Si vous conservez une barre personnalisée, positionnez-la vous-même à l'aide de verticalBarEdge ou toolbarVerticalEdge et des marges de safe area.

Ensuite, les langues écrites de droite à gauche ne retournent pas la barre. La barre verticale suit le matériel, pas le sens de lecture, et reste du même côté de l'appareil en RTL ; votre contenu s'adapte autour d'elle. Ne mettez pas en miroir une interface personnalisée en vous fiant uniquement au sens de mise en page. Lisez le bord indiqué par le système.

Quelques détails plus mineurs tirés de la session d'Apple : les barres verticales n'ont pas d'effet de bord de défilement par défaut, elles reçoivent un arrière-plan quand Réduire la transparence est activé, et les espaceurs flexibles se réduisent à zéro sur l'axe vertical. N'ajoutez pas d'espacement supplémentaire pour l'une ou l'autre orientation.

Ce qu'il faut retenir

• Recompilez avec le SDK iOS 27.1 et les barres système passent à la verticale sur l'écran extérieur et sur l'écran intérieur en paysage. En portrait, l'écran intérieur garde des barres horizontales.
• Seules les barres qui longent le bord de l'écran passent à la verticale : la colonne de détail d'une split view en reçoit une, pas les autres colonnes.
• Donnez à chaque élément une icône et un titre, car la largeur fixe de la barre privilégie les symboles.
• Utilisez .visibilityPriority(.high) pour les actions qui doivent survivre au débordement et .topBarPinnedTrailing pour Done.
• Désactivez la barre avec .toolbarVerticalBehavior(.disabled) ou preferredVerticalBarBehavior uniquement pour des mises en page comme une calculatrice ou un lecteur vidéo.
• Les instances personnalisées de UIToolbar et UINavigationBar ne bougent pas, et la barre ignore le RTL ; lisez plutôt toolbarVerticalEdge ou verticalBarEdge.

Une fois vos barres en ordre, alignez le contenu sur le nouveau bord grâce à notre guide sur les safe areas et les marges de contenu de l'iPhone Duo, puis parcourez la checklist complète pour préparer votre app à l'iPhone Duo. Pour découvrir des apps qui tirent déjà le meilleur parti de l'appareil, consultez Built for the fold.