Créez une app SwiftUI avec le nouveau design

Bonjour. Je suis Franck, ingénieur au sein de l’équipe SwiftUI. Dans cette vidéo, vous apprenez à créer une excellente app avec le nouveau design. iOS 26 et macOS Tahoe apportent des mises à jour significatives à l’apparence des apps et des expériences système. Au cœur de ces mises à jour se trouve un tout nouveau matériau adaptatif pour les commandes et les éléments de navigation : Liquid Glass. Il s’inspire des propriétés optiques du verre et de la fluidité du liquide pour créer un matériau léger et dynamique qui contribue à élever le contenu sous-jacent de divers composants. À mesure que vous faites défiler le contenu, le verre s’adapte au contenu situé en dessous, passant du clair au foncé. Avec un nouveau design sur toutes les plateformes, les commandes s’animent lors de l’interaction. Des commandes telles que les bascules, les sélecteurs segmentés et les curseurs se transforment en Liquid Glass lors de l’interaction, créant une merveilleuse expérience ! Ces mises à jour s’appliquent à toutes les plateformes sur lesquelles votre app s’exécute. Regardez « Meet Liquid Glass » pour en savoir plus sur la conception de ce nouveau matériau. Ensuite, consultez « Get to know the new design system » pour les bonnes pratiques. Parfois, dans la vie, pour y voir plus clair et vous concentrer sur ce qui est important, vous devrez vous réinventer et prendre du recul. Aujourd’hui, j’applique cette sagesse à l’app Landmarks, un exemple de projet disponible sur le site web Apple Developer. Je présenterai des éléments du système de conception sur les plateformes Apple et j’apporterai encore plus de clarté sur l’app Landmarks en adoptant les nouvelles API. Lorsque vous compilez votre app avec les SDK Xcode 26, vous remarquerez des changements dans l’interface utilisateur. Je commence par les mises à jour des composants structurels de l’app tels que « TabView » et « NavigationSplitView ». Ensuite, j’examinerai la nouvelle apparence et le comportement des barres d’outils. Je partagerai des mises à jour de l’expérience de recherche qui améliorent la cohérence et la facilité d’utilisation. Ensuite, je montrerai comment les commandes prennent vie avec Liquid Glass ! Je terminerai en décrivant comment vous pouvez adopter le verre dans vos propres éléments UI personnalisés.

Dans ces cinq domaines, il y a des améliorations que vous obtiendrez automatiquement et de nouvelles API pour personnaliser encore plus l’expérience. La structure de l’app fait référence à la famille d’API qui définit la façon dont les gens naviguent sur votre app.

Il s’agit notamment de vues et de modificateurs tels que « NavigationSplitView », « TabView » et des feuilles ! Chacun de ces membres est affiné pour le nouveau design. « NavigationSplitView » permet de naviguer dans une hiérarchie bien définie de nombreuses catégories racines.

Il y a une barre latérale en Liquid Glass qui flotte au-dessus de votre contenu. Cette magnifique hero banner dans Landmarks l’illustre, avec les fleurs roses qui se réfractent contre la barre latérale. Mais l’équipe Landmarks ne s'est pas rendue dans toutes ces destinations et pris des photos spectaculaires pour les voir s'afficher tronquées, quelle que soit la beauté de la barre latérale ! Avec le nouveau modificateur « backgroundExtensionEffect », les vues peuvent s’étendre en dehors de la zone de sécurité, sans rogner leur contenu.

Si je cache la barre latérale pendant un moment, vous verrez ce qui se passe derrière. L’image est reflétée et floutée en dehors de la zone de sécurité, prolongeant l’illustration tout en laissant tout son contenu visible. Le nouveau design fait briller les inspecteurs, avec plus de Liquid Glass ! En face de la barre latérale dans Landmarks, l’inspecteur héberge le contenu avec une superposition plus subtile. Cela associe l’inspecteur à sa sélection associée.

Les « TabViews » fournissent une navigation globale persistante. Elles offrent un aperçu des possibilités en un coup d’œil et optimisent le passage d’une section à l’autre, en conservant le contexte dans chaque section.

Avec le nouveau design, la barre d’onglets de l’iPhone flotte au-dessus du contenu et peut être configurée pour être réduite pendant le défilement. Ainsi, le contenu de votre app reste la vedette.

Pour cela, utilisez le modificateur « tabBarMinimizeBehavior ». Dans cet exemple, l’app TV utilise le comportement « onScrollDown ».

Avec cette configuration, la barre d’onglets se réagrandit lors du défilement dans la direction opposée.

Supposons que votre app ait des commandes supplémentaires que vous voulez avoir à portée de main, comme cette vue de lecture dans Musique.

Placez une vue au-dessus de la barre avec le modificateur « tabViewBottomAccessory ». Cela tire parti de l’espace supplémentaire fourni par le comportement réductif de la barre d’onglets.

Dans votre vue accessoire, lisez le « tabViewBottomAccessoryPlacement » de l’environnement. Ajustez le contenu de votre accessoire lorsqu’il se réduit dans la zone de la barre d’onglets.

Je vous ai montré à quel point « NavigationSplitView » est magnifique dans Landmarks avec le nouveau design, et comment vous pouvez adapter les apps basées sur TabView. Je vous présente des feuilles ! Lors de la création d’une nouvelle collection de monuments, une feuille d’options de monument s’affiche. Sur iOS 26, les feuilles de hauteur partielle sont insérées par défaut avec un arrière-plan en Liquid Glass.

À de petites hauteurs, les bords inférieurs s’enfoncent dans les bords incurvés de l’écran.

Lorsque vous passez à une feuille pleine hauteur, l'arrière-plan de verre change progressivement, devenant opaque et s’ancrant au bord de l’écran. Si vous avez utilisé le modificateur « presentationBackground » pour appliquer un arrière-plan personnalisé à vos feuilles, penser à le supprimer et laisser le nouveau matériau briller.

Les feuilles peuvent se transformer directement à partir des boutons qui les présentent. Pour que le contenu de la présentation sorte de la vue source, faites de l’élément de la barre d’outils de présentation une source pour une transition zoom de navigation. Et indiquez le contenu de votre feuille comme destination de la transition.

Comme les feuilles, d’autres présentations telles que les menus, les alertes et les fenêtres contextuelles sortent en douceur des commandes en Liquid Glass, attirant l’attention par leur action sur le contenu de la présentation.

Dans le nouveau design, les boîtes de dialogue se transforment automatiquement à partir des boutons qui les présentent !

La structure de notre app étant assez solide, passons aux barres d’outils ! Dans le nouveau design, les éléments de la barre d’outils sont placés sur une surface en Liquid Glass au-dessus du contenu de votre app et s’adapte automatiquement à ce qui se trouve en dessous. Les éléments de la barre d’outils sont automatiquement regroupés. Lorsque je crée l’app Landmarks avec Xcode 26, les éléments de ma barre d’outils personnalisée sont regroupés séparément du bouton Précédent fourni par le système.

Je tiens à souligner que les boutons « favoris » et « ajouter à la collection » sont des actions liées. J’ai donc utilisé la nouvelle API « ToolbarSpacer » avec des espacements fixes pour les diviser en leur propre groupe.

Cela indique clairement que les actions groupées sont liées, tandis que les actions séparées, comme le lien de partage et l’inspecteur, ont un comportement distinct. « ToolbarSpacer » peut également être utilisé pour créer un espace flexible qui s’étend entre les éléments de la barre d’outils.

L’app Mail utilise cette technique pour créer un élément de filtre aligné sur le début et un groupe aligné sur la fin avec les éléments de recherche et de composition.

Certains éléments de la barre d’outils peuvent se passer de ce regroupement visuel, comme cet élément de Livres affichant mon avatar. Appliquez le modificateur « sharedBackgroundVisibility » pour séparer un élément dans son propre groupe sans arrière-plan.

Dans l’app Landmarks, j’ai ajouté une fonctionnalité qui permet à mes amis de réagir à ma collection de monuments. J’aimerais ajouter un indicateur sur mon élément de notification lorsqu’il y a une nouvelle réaction. Je ne veux pas manquer cette adorable validation externe.

En utilisant le modificateur de badge sur les éléments de la barre d’outils, cette adorable validation n’est qu’à une ligne de code !

J’ai appliqué le modificateur « badge » au contenu de mon élément de barre d’outils pour afficher cet indicateur. En plus de regrouper et de badger les éléments dans les barres d’outils, le nouveau design introduit quelques autres changements. Les icônes utilisent le rendu monochrome à plus d’endroits, y compris dans les barres d’outils.

La palette monochrome réduit le bruit visuel, met en valeur le contenu de votre app et préserve la lisibilité.

Vous pouvez toujours teinter les icônes avec le modificateur « .tint() », mais réservez cela pour transmettre un sens, comme un appel à l’action ou l’étape suivante, mais pas seulement pour l’effet visuel.

Dans le nouveau design, un « effet de bord de défilement » automatique maintient les commandes lisibles.

Il s’agit d’un effet de flou et de fondu subtil appliqué au contenu sous les barres d’outils système. Si votre app a des arrière-plans supplémentaires ou des effets d’assombrissement derrière les éléments de la barre, assurez-vous de les supprimer, car ils interféreraient avec l’effet.

Pour les interfaces utilisateur plus denses avec beaucoup d’éléments flottants, comme dans l'app Calendrier, réglez la netteté de l’effet sur votre contenu avec le modificateur « scrollEdgeEffectStyle ».

Après les barres d’outils, vous allez découvrir comment créer des expériences de recherche astucieuses avec le nouveau design. Il y a de grandes mises à jour de deux modèles clés pour la recherche sur toutes les plateformes. « Rechercher dans la barre d’outils » place le champ en bas de l’écran où il est facilement accessible. Et sur iPad et Mac, il apparaît en haut de la barre d’outils. Le deuxième modèle consiste à le traiter comme une page dédiée dans une app multi-onglets. Pour l’app Landmarks, j’ai placé la recherche au bout du coin supérieur. Pour cet emplacement, vous devez rendre la plus grande partie possible du contenu disponible par le biais de la recherche.

Le champ de recherche apparaît sur sa propre surface Liquid Glass.

Une pression l’active et fait apparaître le clavier. Pour obtenir cette variante dans Landmarks, j’ai appliqué le modificateur « searchable » sur « NavigationSplitView ». Déclarer le modificateur ici indique que la recherche s’applique à l’ensemble de « NavigationSplitView », et pas seulement à l’une des colonnes.

Sur iPhone, cette variante s’adapte automatiquement pour faire apparaître le champ de recherche en bas de l’écran.

En fonction de la taille de l’appareil, du nombre de touches de la barre d’outils et d’autres facteurs, le système peut choisir de réduire le champ de recherche à un bouton de barre d’outils, comme celui affiché dans Mail.

Lorsque j’appuie sur le bouton, un champ de recherche pleine largeur apparaît au-dessus du clavier.

Si vous souhaitez explicitement accepter le comportement minimisé, par exemple parce que la recherche n’est pas un élément majeur de l’expérience de votre app, utilisez le nouveau modificateur « searchToolbarBehavior ».

La recherche dans les apps multi-onglets s’effectue souvent dans une page de recherche dédiée. Ce modèle est utilisé par les apps sur toutes nos plateformes, comme Santé pour consulter mes tendances en matière de forme physique.

Pour faire cela dans votre app, définissez un rôle de recherche sur l’un de vos onglets et placez le modificateur consultable sur votre TabView.

Lorsqu’une personne sélectionne cet onglet, un champ de recherche remplace la barre d’onglets et le contenu de l’onglet s’affiche.

Les utilisateurs peuvent interagir avec vos suggestions de navigation, ou appuyer sur le champ de recherche pour faire apparaître le clavier et continuer avec des termes de recherche spécifiques.

Sur iPad et Mac, lorsqu’une personne sélectionne l’onglet Rechercher, le champ de recherche apparaît au-dessus des suggestions de navigation dans vos apps. Ces modèles vous donnent de la flexibilité et du contrôle sur l’expérience de recherche dans votre app ! À propos de contrôle, je passe aux mises à jour des commandes standard. Le nouveau design crée un air de famille entre les plateformes pour les commandes telles que les boutons, curseurs, menus et autres.

Je commence par les mises à jour des boutons, l’une des commandes les plus courantes. Les boutons à bordure ont désormais une forme de capsule par défaut, en harmonie avec les coins incurvés du nouveau design. Les commandes de taille mini, petite et moyenne de macOS conservent une forme de rectangle arrondi, ce qui préserve la densité horizontale.

Et le modificateur de forme de bordure de bouton existant vous permet de donner n’importe quelle taille à la forme.

Les hauteurs des commandes sont mises à jour pour le nouveau design.

La plupart des commandes de macOS sont légèrement plus hautes, ce qui offre plus d’espace autour de l’étiquette de la commande et augmente la taille des cibles de clic.

Pour assurer la compatibilité avec les dispositions haute densité existantes, telles que les inspecteurs complexes et les fenêtres contextuelles, le modificateur « controlSize » existant peut être appliqué à une seule commande ou à un ensemble complet de commandes. Et pour vos actions les plus importantes ou les plus en vue, les boutons de très grande taille sont désormais pris en charge. Les nouveaux styles de boutons en verre et en verre proéminent apportent le Liquid Glass à n’importe quel bouton de votre app. Passons aux curseurs, qui ont également appris quelques astuces.

Ils prennent désormais en charge les coches ! Les coches apparaissent automatiquement lors de l’initialisation d’un curseur avec un paramètre « step ».

Vous pouvez même placer manuellement des coches individuelles.

Utilisez la fermeture « ticks » pour spécifier leur emplacement, comme je le fais ici pour les coches à 60 et 90 %. Les curseurs vous permettent de commencer leur remplissage de piste à un endroit particulier. C’est utile pour les valeurs qui peuvent être ajustées à gauche ou à droite à partir d’une valeur par défaut non principale, comme la sélection de valeurs de vitesse plus rapides ou plus lentes lors de la lecture.

Spécifiez le point de départ avec le paramètre « neutralValue ». Sur toutes les plateformes, les menus bénéficient d’un nouveau design et d’une disposition plus cohérente. Les icônes sont toujours à la pointe et sont utilisées sur macOS également. La même API utilisant des initialiseurs de contrôle Label ou standard crée le même résultat sur les deux plateformes.

Outre les mises à jour apportées aux commandes de SwiftUI, de nouvelles API permettent de mettre à jour les vôtres pour le nouveau design.

Beaucoup de nos commandes ont leurs coins parfaitement alignés dans leur conteneur, même si le conteneur est votre iPhone ! C’est ce qu’on appelle la « concentricité des coins ». Par exemple, un bouton positionné au bas d’une feuille doit partager le même centre d’angle que les coins de la feuille.

Pour créer des vues qui conservent automatiquement la concentricité avec leur conteneur, utilisez la forme rectangulaire concentrique. Passez la configuration « containerConcentric » au paramètre « corner » d’un rectangle. Et la forme s’adaptera automatiquement à son conteneur, sur différents écrans et formes de fenêtres. La meilleure façon d’adopter le nouveau design est d’utiliser des structures d’app, des barres d’outils, des placements de recherche et des commandes standard. Parfois, votre app peut avoir besoin d’un peu plus de personnalisation. Découvrons comment créer des éléments en Liquid Glass personnalisés pour votre app. Maps est un excellent exemple de ce cas d’utilisation avec ses commandes de verre personnalisées qui flottent au-dessus du contenu de la carte.

De la même manière, je vais ajouter des badges à l’app Landmarks à chaque monument visité par les utilisateurs. Commençons par créer une vue de badge personnalisée avec l’effet Liquid Glass !

Pour ajouter du verre à vos vues personnalisées, utilisez le modificateur « glassEffect ». Par défaut, un effet de verre sera appliqué dans une forme Capsule derrière votre contenu. SwiftUI utilise automatiquement une couleur de texte éclatante qui s’adapte pour préserver la lisibilité sur des arrière-plans colorés.

Personnalisez la forme de l’effet de verre en donnant une forme au modificateur.

Pour les vues importantes, utilisez le modificateur « tint ».

Comme pour les boutons de barre d’outils, n’utilisez cela que pour transmettre un sens et pas seulement pour un effet visuel.

Et comme un texte dans un effet de verre, la teinte utilise une couleur vive qui s’adapte au contenu qui se cache derrière. Sur iOS, pour les commandes personnalisées ou pour les conteneurs avec des éléments interactifs, ajoutez le modificateur « interactif » à l’effet verre. Le verre réagit à l’interaction de l’utilisateur en s’ajustant, rebondissant et scintillant, correspondant à l’effet fourni par les boutons et curseurs de la barre d’outils. Maintenant que nous avons notre badge personnalisé, rassemblons plusieurs badges pour qu’ils interagissent et se fondent les uns dans les autres. Pour combiner plusieurs éléments en verre, utilisez le « GlassEffectContainer ». Ce regroupement est essentiel pour l’exactitude visuelle. Le matériau Liquid Glass réfléchit et réfracte la lumière, prenant les couleurs du contenu environnant. Cet effet est obtenu en échantillonnant le contenu d’une zone plus grande que lui.

Cependant, le verre ne peut pas échantillonner d’autres verres. La présence d’éléments en verre à proximité dans différents récipients entraînera un comportement incohérent.

L’utilisation d’un récipient en verre permet à ces éléments de partager leur zone d’échantillonnage, offrant un résultat visuel cohérent.

Dans l’app Landmarks, j’utilise le « GlassEffectContainer » pour regrouper mes badges. En élargissant mes badges, j’obtiens ce merveilleux morphing fluide !

Ajoutez ces transitions à votre propre récipient en verre à l’aide du modificateur « glassEffectID ».

Pour le configurer, je déclare un espace de noms local. Ensuite, j’associe l’espace de noms à chacun des éléments à effet de verre de ma pile élargie de badges et à mon bouton bascule. Lorsque j’appuie à nouveau sur le bouton, les badges de récompense sont réabsorbés avec élégance !

L’effet Liquid Glass met en valeur les fonctionnalités qui rendent votre app vraiment unique. J’espère que vous avez apprécié cette visite rapide de l’utilisation de Liquid Glass. À votre tour, maintenant ! Adoptez le nouveau design dans votre app en la concevant avec Xcode 26. Vous allez adorer tout ce que vous obtenez automatiquement avec les commandes standard.

Analysez le flux de votre app et identifiez si des vues doivent être modifiées, en accordant une attention particulière aux couleurs d’arrière-plan derrière les feuilles et les barres d’outils que vous pouvez supprimer. Enfin, créez des composants expressifs avec Liquid Glass, qui permettront à votre app de se démarquer. J’espère que vous passerez un bon moment à jouer avec le nouveau design ! Continuez à briller !