Créez une app SwiftUI avec le nouveau design

iOS 26 et macOS Tahoe inaugurent Liquid Glass, un nouveau matériau adaptatif inspiré du verre et des liquides pour les commandes et les éléments de navigation. Ce matériau change de couleur lorsque quelqu’un fait défiler le contenu, et rend les commandes comme les bascules et les curseurs plus interactifs et visuellement attrayants. Les mises à jour s’appliquent à toutes les plateformes Apple et incluent des modifications apportées aux composants structurels tels que TabView et NavigationSplitView, aux barres d’outils, aux expériences de recherche, ainsi que l’introduction de nouvelles API permettant aux développeurs de personnaliser l’interface utilisateur de leurs apps. L’app Landmarks présente ces nouvelles fonctionnalités.

La structure applicative est mise à jour avec des API améliorées, notamment NavigationSplitView, TabView et Sheets, toutes dotées du nouveau style Liquid Glass. NavigationSplitView dispose désormais d’une barre latérale Liquid Glass flottante avec un modificateur « backgroundExtensionEffect » qui permet aux vues de s’étendre au-delà de la zone de sécurité sans rognage. Sur iPhone, les TabViews sont dotées d’une barre d’onglets flottante qui se minimise lors du défilement, ce qui améliore la visibilité du contenu. Elles peuvent aussi inclure une vue accessoire inférieure pour des commandes supplémentaires. Les éléments Sheets ont désormais un arrière-plan Liquid Glass qui passe en douceur des hauteurs partielles aux hauteurs totales. Ils peuvent également apparaître à partir des boutons de présentation, créant ainsi une expérience utilisateur fluide. D’autres présentations comme les menus, alertes et fenêtres contextuelles sortent également en douceur des commandes Liquid Glass. Les boîtes de dialogue apparaissent désormais automatiquement à partir des boutons qui les présentent.

La nouvelle conception de l’app présente des barres d’outils flottantes sur les surfaces Liquid Glass ainsi que le regroupement automatique des éléments. Vous pouvez utiliser l’API ToolbarSpacer pour créer un regroupement et un espacement personnalisés, améliorant ainsi la clarté visuelle. Ajoutez des badges avec une seule ligne de code pour indiquer les notifications. Les icônes monochromes réduisent le bruit et un effet de bord de défilement automatique floute le contenu sous les barres d’outils pour plus de lisibilité. Vous pouvez supprimer les arrière-plans en trop et procéder à des ajustements pour obtenir des interfaces utilisateur plus denses.

La nouvelle conception introduit deux principaux modèles de recherche sur les plateformes : Recherche dans la barre d’outils. Le champ de recherche se trouve au bas de l’écran sur iPhone, dans le coin supérieur droit de l’écran sur iPad/Mac, ou réduit sous forme de bouton qui se développe lorsque vous appuyez dessus. Page de recherche dédiée. La recherche est accessible via un onglet qui remplace la barre d’onglets par un champ de recherche et le contenu de l’app. Le champ de recherche apparaît centré au-dessus des suggestions, sur iPad et Mac.

La nouvelle conception introduit une ressemblance cohérente entre les plateformes pour diverses commandes. Les boutons ont désormais une forme de capsule par défaut, avec des hauteurs plus élevées sur macOS pour une meilleure lisibilité et de plus grandes cibles de clic. Des boutons extra-larges et de nouveaux styles de verre sont également disponibles. Les curseurs prennent désormais en charge les marques de graduation, le placement manuel de ces dernières et le démarrage du remplissage de la piste à partir de valeurs spécifiques. Les menus ont un nouveau design avec un placement uniforme des icônes sur toutes les plateformes. La nouvelle conception présente également la concentricité des coins, garantissant que les commandes s’alignent parfaitement dans leurs conteneurs.

Pour personnaliser davantage une app, vous pouvez créer des éléments Liquid Glass personnalisés. Par exemple, l’app Landmarks utilise des badges avec l’effet Liquid Glass. Pour ce faire, appliquez le modificateur « glassEffect » aux vues personnalisées, que vous pouvez mettre en forme et teinter pour les accentuer. Le modificateur « interactive » est désormais disponible pour les commandes iOS afin de permettre la mise à l’échelle, le rebond et le scintillement lors de l’interaction. Regroupez plusieurs éléments Liquid Glass dans un « GlassEffectContainer » pour garantir des résultats visuels cohérents, car le verre ne peut pas échantillonner le verre. Créez des transitions entre les éléments Liquid Glass à l’aide du modificateur « glassEffectID » qui permet d’obtenir des effets de morphing fluides. Cette technique renforce l’attrait visuel et le caractère unique d’une app, en lui permettant de se démarquer.

La nouvelle conception de Xcode 26 inclut des commandes standard qui apportent des améliorations automatiques ainsi que Liquid Glass pour la création de composants expressifs. Auditez les flux de vos apps, supprimez les couleurs d’arrière-plan inutiles et exploitez Liquid Glass pour mettre vos apps en valeur.