Créez un UIKit app avec le nouveau design

Bonjour, bienvenue dans « Concevez une app UIKit avec le nouveau design ». Je m’appelle Sanaa, je suis ingénieure au sein de l’équipe UIKit. Dans cette vidéo, je vous montre comment adopter le nouveau design, et appliquer Liquid Glass à vos apps !

iOS 26 inaugure un nouveau design qui redéfinit l’apparence des matériaux et des commandes dans l’ensemble du système. Un nouveau matériau appelé Liquid Glass est au cœur de ce design. Il est translucide, dynamique et vivant. Les composants et matériaux de l’UIKit ont été mis à jour dans l’ensemble du système avec Liquid Glass.

Vos apps bénéficieront de cette nouvelle apparence dès que vous effectuerez une recompilation avec le nouveau SDK. Si vous ne l’avez pas déjà fait, je vous recommande de visionner les vidéos de design « Meet Liquid Glass » et « Design with the Liquid Glass Design System » pour maîtriser les bonnes pratiques de ce nouveau système.

Je commencerai par expliquer comment ce nouveau système s’applique aux onglets et aux vues scindées et les fait flotter au-dessus du contenu.

Je parlerai ensuite de la nouvelle apparence des barres de navigation et d’outils. Elles sont désormais translucides, contiennent des boutons Liquid Glass et allouent plus d’espace à votre contenu.

J’évoquerai les nouveautés des présentations, y compris une transition zoom optimisée et un nouveau comportement des alertes et des feuilles action.

J’expliquerai comment l’expérience de recherche a été améliorée, avec plus d’options pour positionner la barre de recherche.

J’aborderai les commandes, comme les boutons, les commutateurs et les curseurs, et je vous montrerai comment appliquer le style Liquid Glass à vos éléments de UI personnalisés.

Commençons par les vues d’onglets et les vues scindées.

UITabBarController et UISplitViewController ont été mis à jour avec la nouvelle apparence Liquid Glass.

Les barres d’onglets confèrent à votre app une navigation persistante de premier ordre. Elles offrent une vue d’ensemble immédiate de votre app et permettent de passer rapidement d’une section à l’autre. Avec le nouveau design, la barre d’onglets de l’iPhone flotte au-dessus du contenu et peut être configurée pour se réduire lors du défilement et vous aider ainsi à rester concentré sur le contenu.

Pour permettre à la barre d’onglets de se réduire lors du défilement, paramétrez tabBarMinimizeBehavior dans la direction souhaitée. Ici, l’app TV lui attribue la valeur .onScrollDown. La barre d’onglets se redéploie lorsque vous faites défiler la page dans la direction opposée.

Au-dessus de la barre d’onglets, vous pouvez afficher une vue secondaire, comme le mini lecteur de l’app Musique. UITabBarController affiche l’accessoryView au-dessus de la barre d’onglets, tout en utilisant la même apparence. Lorsque la barre d’onglets est réduite, la vue secondaire s’anime vers le bas pour suivre la barre d’onglets dans son sillage.

Pour définir une vue secondaire inférieure, créez un UITabAccessory avec votre vue de contenu. Ensuite, paramétrez la propriété bottomAccessory sur UITabBarController.

Lorsque la vue secondaire est alignée sur la barre d’onglets, l’espace pour son affichage est réduit. Ici, l’app Musique s’adapte à l’espace réduit en masquant certaines commandes multimédias du mini lecteur.

Pour ajuster la vue secondaire, éditez le code relatif tabAccessoryEnvironment pour découvrir les changements. Vérifiez si la vue secondaire est alignée sur la barre d’onglets et mettez à jour la vue si nécessaire.

Vous pouvez utiliser updateProperties pour mettre à jour votre vue secondaire avec le suivi automatique des caractéristiques.

Pour en savoir plus sur le suivi automatique des caractéristiques et la nouvelle méthode updateProperties, consultez « What’s new in UIKit ».

Sur iPad, la barre d’onglets et la barre latérale sont repensées avec Liquid Glass. Elles flottent au-dessus de votre contenu lorsque vous utilisez UITabBarController. Avec UITab et UITabGroup, vous bénéficiez d’une adaptabilité automatique pour votre app, ce qui permet de basculer entre la barre d’onglets et la barre latérale sur iPad. Pour en savoir plus, visionnez les vidéos « Elevate your tab and sidebar experience in iPadOS » de la WWDC24 et « Make your UIKit app more flexible » de la WWDC25.

Avec le nouveau design, les barres latérales sont plus esthétiques lorsqu’elles recouvrent un contenu dynamique assorti à la vue de défilement principale. L’app TV sur iOS 26 en est un excellent exemple. L’illustration semble s’étendre sur tout l’écran en passant sous la barre latérale. Elle reste centrée et entièrement visible. Cet effet est utilisé dans de nombreuses apps sous iOS 26, et votre app aura fière allure grâce au nouveau UIBackgroundExtensionView !

La vue étendue doit couvrir toute la largeur, y compris la zone de sécurité principale de la barre latérale. Une vue de contenu est utilisée pour appliquer l’effet. Par exemple, une vue d’image. Elle est placée dans la hiérarchie des vues et étendue de manière fluide pour remplir l’espace vide.

C’est un effet spécial qui doit être utilisé à dessein. Des sections comme la liste des épisodes en bas défilent naturellement sous la barre latérale et n’ont pas besoin d’être étendues.

Les éléments au-dessus de l’illustration, comme le nom et la description de l’émission, ne doivent pas non plus être étendus. Assurez-vous de les ajouter en tant que parents de la vue étendue, et non secondaires.

Le contrôleur de vue de l’émission dispose déjà d’une vue d’image pour l’illustration. Pour ajouter l’effet, créez un backgroundExtensionView et attribuez la vue de l’image à sa propriété contentView. Ajoutez la vue étendue à votre hiérarchie. Et enfin, ajoutez la vue détaillée en tant que parent de la vue étendue. Par défaut, la vue de contenu remplit la zone sûre de la vue étendue. Tous les bords ayant un inset de zone sûre positif sont étendus pour remplir l’espace vide. Dans cet exemple, il s’agit du bord supérieur de la barre de navigation et d’état, et du bord avant de la barre latérale. L’app TV ayant très peu de contenu dans la barre de navigation qui pourrait couvrir l’illustration, elle n’a pas besoin de l’effet d’extension en haut. Au lieu de cela, la vue de contenu est positionnée manuellement en dehors de la zone sûre en haut.

Je vais revenir à l’exemple de code pour ajuster manuellement la mise en forme des effets. Tout d’abord, définissez automaticallyPlacesContentView sur false dans la vue d’extension. Utilisez les contraintes AutoLayout pour positionner la vue de l’image en haut de l’écran. Pour étendre la vue de l’image sous la barre latérale, ajoutez une contrainte pour leadingAnchor équivalente à safeAreaLayoutGuide dans extensionView.

N’oubliez pas non plus d’ajouter des contraintes pour les ancrages traînant et inférieur.

Examinons l’apparence et le comportement des barres de navigation et d’outils dans le nouveau design. Dans iOS 26, les barres de navigation et d’outils adoptent le look Liquid Glass et flottent au-dessus du contenu. Lorsque vous spécifiez des éléments de barres d’outils ou de navigation barButton, le système les sépare automatiquement en groupes visuels d’éléments. Chaque groupe partage un arrière-plan translucide.

Par défaut, les boutons de barre qui utilisent des images partagent l’arrière-plan avec d’autres boutons d’image. Les groupes de boutons comportant plusieurs éléments partagent également leur arrière-plan.

Les boutons de texte, les boutons « Terminé » et « Fermer » du système, et les boutons au style marqué ont des arrière-plans translucides distincts. Cet exemple illustre l’application de ces règles, où le bouton « Sélectionner » au début et le bouton « Terminé » à la fin ne partagent pas l’arrière-plan translucide avec les 4 boutons d’image au milieu. Pour configurer la navigationBar, attribuez tous les BarButtonItems directement au rightBarButtonItems de navigationItem. Cela active le comportement par défaut du système évoqué précédemment. Pour scinder davantage les éléments en groupes distincts, utilisez un élément fixedSpace. Dans cet exemple, je veux séparer le bouton « Partager ». J’insère donc un fixedSpace entre les boutons de partage et d’information.

Les boutons de la barre utilisent labelColor par défaut pour améliorer la lisibilité. Si une couleur est nécessaire pour communiquer des informations sur l’action, vous pouvez spécifier une teinte différente.

Ici, je vais mettre à jour le bouton drapeau pour utiliser systemOrange comme tintColor.

Seul le symbole du drapeau sera coloré.

Pour teinter l’arrière-plan du bouton, définissez le style sur prominent.

Auparavant, vous utilisiez des espaces flexibles pour distribuer uniformément les éléments de votre barre d’outils. Avec Liquid Glass, chaque élément flexibleSpace sépare par défaut l’arrière-plan entre les éléments.

Pour distribuer uniformément les éléments et les regrouper sur un seul arrière-plan, utilisez des espaces flexibles avec hidesSharedBackground défini sur false.

Dans iOS 26, UINavigationItem offre un meilleur contrôle des zones de titre et de grand titre dans la navigationBar. Cela inclut l’ajout d’un nouveau sous-titre qui s’affiche sous le titre.

Utilisez des chaînes attribuées pour effectuer des ajustements précis du titre et du sous-titre.

Spécifiez des vues personnalisées pour ajouter des éléments interactifs. Les grands titres sont placés en haut de la vue de défilement du contenu et défilent avec le contenu sous la barre.

Pour que le grand titre reste visible, étendez entièrement la vue de défilement sous la navigationBar.

Par exemple, Mail place le champ de recherche dans la barre d’outils et affiche le nombre d’e-mails non lus dans la barre de navigation à l’aide de la nouvelle API de sous-titres.

Lors du filtrage des e-mails, Mail affiche le filtre actuel dans un bouton situé sous le grand titre. Le bouton est défini en tant que largeSubtitleView sur navigationItem, et s’affiche sous le grand titre dans la navigationBar. Avec le système de conception d’iOS 26, l’arrière-plan de la barre est désormais translucide par défaut. Supprimez toute personnalisation d’arrière-plan de vos barres de navigation et d’outils. L’utilisation de UIBarAppearance ou de backgroundColor interfère avec l’aspect du verre.

Les boutons de la barre utilisent un arrière-plan de verre. Mettez en forme le contenu de votre customView avec des marges de mise en forme pour un espacement correct. Toutes les vues de défilement situées sous les barres de navigation ou d’outils appliquent automatiquement un traitement visuel. Cela garantit la lisibilité des contenus qui se chevauchent dans les barres. C’est ce qu’on appelle un effet de bord. Ce nouvel effet de bord n’est pas réservé aux barres système. Vous pouvez également l’utiliser avec des conteneurs personnalisés de vues qui recouvrent un bord d’une vue de défilement ! Cet exemple montre deux boutons recouvrant le bord inférieur de la vue de défilement. Pour insérer un effet de bord derrière cette pile de boutons, créez une scrollEdgeElementContainerInteraction, attribuez la contentScrollView et le bord, puis ajoutez-la à la buttonsContainerView. Pour les UI plus denses avec de nombreux éléments flottants, optez pour un style de bord dur sur tous les bords d’une vue de défilement. Leur apparence est similaire à celle des arrière-plans de barre standard dans iOS 18. Pour l’activer, définissez le style de l’effet de bord sur .hard. iOS 18 a introduit une transition de zoom toujours interactive et interruptible. iOS 26 apporte la même fluidité à la transition standard de navigation par glissement.

Ici, j’utilise l’app Notes. Je peux ouvrir une note et l’app reste réactive pendant la transition.

Je peux immédiatement revenir en arrière, ou commencer à faire défiler la page alors que la transition est encore en cours. Je peux immédiatement appuyer plusieurs fois sur le bouton de retour pour revenir encore plus rapidement en arrière.

C’est une excellente chose, car les utilisateurs peuvent interagir à tout moment avec votre app. Bien sûr, cela signifie aussi que votre app doit être prête à interagir à tout moment. Pour apprendre à gérer correctement les transitions interrompables, consultez « Enhance your UI animations and transitions ». Je peux aussi balayer vers l’arrière n’importe où dans la zone de contenu, et pas seulement sur le bord avant. Le nouveau geste de retour interactif vérifie automatiquement la présence d’autres interactions concurrentes.

Par exemple, les actions de balayage empêchent le retour interactif du contenu. Cela serait cependant autorisé dans les zones non interactives.

Pour avoir la priorité sur le balayage de retour interactif, les gestes personnalisés doivent définir une exigence d’échec sur interactiveContentPopGestureRecognizer.

Le nouveau design concerne également les présentations, y compris la nouvelle transition de zoom dynamique. Lorsqu’une présentation, comme un menu ou une fenêtre contextuelle, est créée à partir d’un bouton translucide, le bouton se métamorphose en une superposition.

Cela permet de maintenir la continuité visuelle entre la source et la présentation tout au long de l’animation.

Les menus bénéficient automatiquement de ce comportement. Les fenêtres contextuelles bénéficient aussi de cette animation lorsque leur source est un barButtonItem. Les feuilles peuvent adopter cet effet en utilisant la transition zoom optimisée. Attribuez la valeur .zoom à la transition préférée sur le viewController et renvoyez la source barButtonItem dans la fermeture.

Les feuilles affichent un design actualisé dans iOS 26. Elles adaptent leur apparence aux différentes hauteurs. Pour profiter de leur nouvelle apparence translucide, supprimez tous les arrière-plans personnalisés.

Sur iPad, les feuilles action sont ancrées sur leur vue d’origine. À partir d’iOS 26, elles se comportent de la même manière sur l’iPhone, en s’affichant au-dessus de la vue d’origine.

Dans l’alertController, veillez à définir l’élément source ou la vue source sur popoverPresentationController, quel que soit l’appareil. L’attribution de la vue source applique automatiquement les nouvelles transitions aux feuilles action !

Les feuilles action présentées en ligne n’ont pas de bouton d’annulation, car l’action d’annulation est implicite en appuyant n’importe où. Si vous ne spécifiez pas de source, la feuille action sera centrée et dotée d’un bouton d’annulation. iOS 26 offre une nouvelle expérience de recherche plus intégrée, en vous permettant de positionner le champ de recherche là où il convient le mieux. Sur iPhone, la barre de recherche se déplace automatiquement vers la barre d’outils, pour un accès facile.

Si vous disposez déjà d’une barre d’outils, ajoutez un searchBarPlacementBarButtonItem aux autres boutons. Le champ sera positionné exactement là où vous le souhaitez.

Il apparaîtra sous la forme d’un champ développé ou d’un bouton de barre d’outils, selon l’espace disponible.

Sur l’iPad, pour une recherche accessible à tous, suivez le modèle de la barre d’outils macOS. Placez la recherche à l’extrémité droite la navigationBar. C’est idéal pour les vues scindées. Attribuez la valeur true à searchBarPlacementAllowsExternalIntegration sur l’élément de navigation.

Pour que la recherche soit disponible d’une vue à une autre, utilisez un UITabBarController. Un onglet réservé à la recherche peut désormais être ajouté sur le bord traînant. Lorsque vous touchez l’écran, le bouton de recherche devient un champ et les autres boutons se réduisent.

Cet onglet de recherche tabView est idéal pour placer des suggestions de recherche. Par défaut, il est possible de sélectionner l’une de ces suggestions ou d’appuyer sur le champ de recherche pour lancer la recherche.

Pour que le champ de recherche s’active automatiquement lorsque l’on appuie sur l’onglet de recherche, attribuez la valeur true à l’option automaticallyActivateSearch sur cet onglet.

Pour disposer de vues dédiées à la recherche, ajoutez la recherche en tant que section dans la barre latérale ou la barre d’onglets. La barre de recherche peut être intégrée au bord traînant de la barre de navigation, empilée ou centrée par rapport à la largeur normale de l’iPad. Pour centrer la searchBar, utilisez integratedCentered comme preferredSearchBarPlacement. Lorsque la tabBar est visible, la searchBar est placée en dessous. Parlons de l’apparence actualisée des commandes.

Les commandes sur iOS sont dotées d’une nouvelle apparence, tout en restant parfaitement familières. Les tailles sont modifiées pour les commandes comme UISwitch. Vérifiez que vos mises en forme tiennent compte de cette modification. Les boutons de commande, comme ceux des interrupteurs et de segmentedControl, adoptent automatiquement Liquid Glass lors des interactions.

En plus des styles de bouton existants, deux apparences translucides sont disponibles avec UIButtonConfiguration. Utilisez la configuration .glass() pour une apparence translucide standard. Et .prominentGlass() pour un verre teinté selon la couleur de votre app. Quant aux curseurs, en plus des effets Liquid Glass sur le bouton, ils conservent désormais leur élan et s’étirent lorsqu’ils sont activés. Sur iOS 26, les curseurs prennent désormais en charge les coches avec une TrackConfiguration. Cela permet de configurer l’apparence et le comportement du curseur. Par exemple, pour limiter ce curseur de vitesse à 5 valeurs, définissez une configuration de piste avec allowsTickValuesOnly et 5 coches.

Les curseurs peuvent être configurés pour utiliser une valeur neutre, afin d’ancrer le remplissage du curseur en tout point de la glissière, au lieu de le limiter à l’extrémité minimale. Cela permet au remplissage du curseur d’afficher la différence entre la valeur sélectionnée et la valeur neutre. Ici, le remplissage du curseur affiche une vitesse sélectionnée plus élevée que celle par défaut. Les curseurs peuvent ressembler à une barre de progression lorsqu’ils ne sont pas interactifs. C’est idéal pour la lecture multimédia, afin de ne pas être distrait par un bouton pendant la lecture. Ce sont les endroits où les commandes du système ont adopté Liquid Glass. Pour vos cas particuliers, UIKit propose des API permettant d’adopter la nouvelle apparence Liquid Glass. Lorsque vous utilisez Liquid Glass dans votre UI, gardez à l’esprit l’intention créative du verre liquide. Liquid Glass se distingue des autres effets visuels, comme UIBlurEffect. À ce titre, des endroits spécifiques se prêtent à son utilisation. Liquid Glass est conçu pour être une couche interactive. Il flotte au-dessus de votre contenu, juste en dessous des doigts, et offre à l’utilisateur un accès aux principales commandes tactiles. Pour cette raison, limitez Liquid Glass aux éléments les plus importants de votre app. Si possible, utilisez les vues et les commandes du système pour une expérience optimale.

Plans utilise Liquid Glass pour des boutons personnalisés qui flottent au-dessus de la carte. Ils offrent une couche de contrôle distincte et naturelle. Ils se prêtent ainsi parfaitement à l’effet Liquid Glass qui les rend flottants. Et lorsque la feuille s’agrandit, Plans supprime les boutons. Cela évite aux éléments en verre de se chevaucher et maintient intacte l’illusion d’une seule couche de verre flottante.

Pour utiliser le verre avec des vues personnalisées, créez un UIVisualEffectView et un UIGlassEffect. Dans un bloc d’animation, définissez l’effet.

Le verre apparaît à l’aide d’une animation matérialisée spéciale.

Par défaut, le verre a la forme d’une capsule. Pour personnaliser la forme, utilisez la nouvelle API de configuration des coins.

Le verre a un aspect sombre et clair. Il s’adapte au userInterfaceStyle sélectionné. Lorsque vous ajoutez l’effet Liquid Glass à un conteneur en verre existant, son apparence s’adapte automatiquement. Pour que les coins s’adaptent automatiquement à leur conteneur, utilisez la configuration de coins .containerRelative. Lorsque l’on rapproche la vue de l’angle du conteneur, le cornerRadius s’adapte automatiquement.

Lorsque l’on s’éloigne, le rayon de l’angle diminue, afin de conserver automatiquement la concentricité. Le verre adapte son apparence en fonction de sa taille.

Une taille plus grande est plus opaque.

Une taille plus petite est plus claire et bascule automatiquement du mode clair au mode sombre pour augmenter le contraste.

Pour ajouter du contenu, comme des étiquettes et des images, utilisez le contentView de visualEffectView. L’étiquette devient automatiquement dynamique, en fonction de sa textColor. Cela permet de garantir la lisibilité sur une grande variété d’arrière-plans.

En fonction des couleurs de l’arrière-plan, le verre et son contenu passeront automatiquement en mode clair ou sombre, lors de l’utilisation de couleurs dynamiques.

Pour mettre en évidence des vues proéminentes, définissez .tintColor pour le verre et animez-le en même temps que les autres propriétés du verre. Animez en même temps les modifications apportées à votre contenu, comme textColor.

Pour utiliser une teinte personnalisée avec le verre, créez un UIGlassEffect, attribuez un tintColor personnalisé et animez l’effet sur le nouveau UIGlassEffect. La couleur du verre teinté s’adapte automatiquement à une version dynamique. Pour supprimer le contenu au-dessus de votre verre, attribuez une valeur alpha zéro au contenu.

Les éléments interactifs du système, tels que les boutons, réagissent aux interactions de l’utilisateur. Lorsque l’on touche le bouton, il s’élargit et rebondit. Pour obtenir le même type d’interactivité dans vos vues personnalisées, attribuez la valeur true à isInteractive pour le glassEffect.

Enfin, lorsque vous n’avez plus besoin du verre à l’écran, supprimez l’animation en réglant l’effet sur nil.

Préférez toujours la propriété effect à la propriété alpha pour vous assurer que le verre se dématérialise ou se matérialise avec l’animation appropriée. Dans ces exemples, il n’y avait qu’une seule vue utilisant Liquid Glass. Le verre présente un comportement intégré supplémentaire lorsque plusieurs éléments interagissent. Liquid Glass peut se fondre harmonieusement parmi différentes formes.

Pour fusionner dynamiquement des vues en verre, utilisez un UIGlassContainerEffect, configurez un UIVisualEffectView avec, créez vos vues en verre et ajoutez-les en tant que vues secondaires au contentView de vos conteneurs. Tant qu’il y a de l’espace entre elles, elles apparaissent comme deux vues séparées.

Lorsqu’elles se rapprochent, elles commencent à fusionner comme des gouttelettes d’eau. Pour contrôler la distance à laquelle elles commencent à s’influencer, utilisez la propriété spacing sur UIGlassContainerEffect.

Lors de l’animation dans un cadre superposé, les vues en verre se combinent en une seule forme. Pour diviser le verre en plusieurs éléments, ajoutez-les d’abord au même endroit sans animation. Ensuite, animez-les ensemble !

UIGlassContainerEffect ne se contente pas d’activer les animations. Il impose une adaptation uniforme ! Le verre s’adapte dynamiquement à son arrière-plan, tout en conservant un aspect uniforme.

J’ai passé en revue les composants et matériaux UIKit mis à jour dans Liquid Glass. UIKit vous offre tous les outils pour mettre à jour votre app avec le nouveau design. À partir de là, commencez par créer votre app avec Xcode 26. Une grande partie du nouveau design fonctionnera immédiatement dans votre app. Vérifiez votre app écran par écran et identifiez les vues qui ressortent.

Si vous disposez de commandes personnalisées, déterminez si les commandes UIKit standard sont mieux adaptées. Et enfin, déterminez comment vous pouvez faire ressortir vos cas d’utilisation particuliers avec Liquid Glass.

J’ai hâte de découvrir votre app une fois que vous aurez adopté le nouveau système de design. Merci de votre attention.