-
Créez une app AppKit avec le nouveau design
Mettez à jour votre app AppKit pour tirer pleinement parti du nouveau système de conception. Nous nous pencherons sur les principales modifications apportées aux vues d'onglets, aux vues scindées, aux barres, aux présentations, à la recherche et aux commandes, et nous vous montrerons comment utiliser Liquid Glass dans votre interface utilisateur personnalisée. Pour tirer le meilleur parti de cette vidéo, nous vous recommandons de regarder d'abord « Apprenez à connaître le nouveau système de conception » pour obtenir des conseils généraux sur la conception.
Chapitres
- 0:00 - Introduction
- 1:23 - Structure de l’app
- 9:27 - Effet de bord de défilement
- 11:10 - Contrôles
- 17:30 - Verre
- 21:30 - Étapes suivantes
Ressources
Vidéos connexes
WWDC25
-
Rechercher dans cette vidéo…
-
-
3:11 - Removing toolbar item glass
// Removing toolbar item glass toolbarItem.isBordered = false -
3:30 - Tinted toolbar controls
// Tints the glass with the accent color. toolbarItem.style = .prominent // Tints the glass with a specific color. toolbarItem.backgroundTintColor = .systemGreen -
3:58 - Toolbar badges
// Numeric badge NSItemBadge.count(4) // Text badge NSItemBadge.text("New") // Badge indicator NSItemBadge.indicator -
5:25 - Content under the sidebar
// Content under the sidebar splitViewItem.automaticallyAdjustsSafeAreaInsets = true -
8:47 - Avoiding a window corner
// Avoiding a window corner func updateConstraints() { guard !installedButtonConstraints else { return } let safeArea = layoutGuide(for: .safeArea(cornerAdaptation: .horizontal)) NSLayoutConstraint.activate([ safeArea.leadingAnchor.constraint(equalTo: button.leadingAnchor), safeArea.trailingAnchor.constraint(greaterThanOrEqualTo: button.trailingAnchor), safeArea.bottomAnchor.constraint(equalTo: button.bottomAnchor) ]) installedButtonConstraints = true } -
15:31 - Levels of prominence
// Create buttons with varying levels of prominence // Prefer a “secondary” tinted appearance for the shuffle and enqueue buttons shuffleButton.tintProminence = .secondary playNextButton.tintProminence = .secondary // The "play" will automatically use primary prominence because it is the default button playButton.keyEquivalent = "\r" -
18:42 - Adopting NSGlassEffectView
// Adopting NSGlassEffectView let userInfoView = UserInfoView() let activityPickerView = ActivityPickerView() let userInfoGlass = NSGlassEffectView() userInfoGlass.contentView = userInfoView let activityPickerGlass = NSGlassEffectView() activityPickerGlass.contentView = activityPickerView let stack = NSStackView(views: [userInfoGlass, activityPickerGlass]) stack.orientation = .horizontal -
21:03 - Adopting NSGlassEffectContainerView
// Adopting NSGlassEffectContainerView let userInfoView = UserInfoView() let activityPickerView = ActivityPickerView() let userInfoGlass = NSGlassEffectView() userInfoGlass.contentView = userInfoView userInfoGlass.cornerRadius = 999 let activityPickerGlass = NSGlassEffectView() activityPickerGlass.contentView = activityPickerView activityPickerGlass.cornerRadius = 999 let stack = NSStackView(views: [userInfoGlass, activityPickerGlass]) stack.orientation = .horizontal let glassContainer = NSGlassEffectContainerView() glassContainer.contentView = stack
-
-
- 0:00 - Introduction
Découvrez le système de design mis à jour pour macOS. Le nouveau design introduit Liquid Glass, une surface translucide qui apporte profondeur et dynamisme à l’interface. AppKit a été mis à jour pour ce nouveau design, avec des composants repensés, un effet de bord de défilement pour améliorer la lisibilité, et une apparence ainsi qu’une disposition des contrôles repensées. Apprenez à intégrer ces changements et à utiliser les nouvelles API pour ajouter Liquid Glass à vos éléments d’UI personnalisés.
- 1:23 - Structure de l’app
Le nouveau design Mac applique Liquid Glass aux barres d’outils et latérales, améliorant la hiérarchie et l’attrait visuel. Les barres d’outils s’adaptent à la luminosité et regroupent automatiquement leurs éléments sur Liquid Glass. Les éléments de la barre d’outils sont personnalisables. Les barres latérales ressemblent à des panneaux de verre flottants et les inspecteurs utilisent du verre bord à bord. Le design met l’accent sur la concentricité, avec des coins de fenêtres arrondis plus doux, dont le rayon varie selon le style. Pour placer du contenu près des coins, la nouvelle API NSView.LayoutRegion propose des guides évitant les coins, assurant une interface soignée et élégante.
- 9:27 - Effet de bord de défilement
Le nouveau design introduit l’effet de bord de défilement, qui sépare visuellement le contenu bord à bord des éléments flottants en Liquid Glass. Cet effet se traduit par un fondu doux ou un fond opaque, et s’adapte dynamiquement dans NSScrollView au gré des changements d’éléments flottants. L’effet est appliqué automatiquement sous les barres d’outils, les accessoires de titre et les séparateurs, qui s’étendent sur une section d’un contrôleur de vues fractionnées et peuvent être placés en haut ou en bas. Ces accessoires influent sur la taille et la forme de l’effet, en adaptant la zone sûre du contenu pour faciliter la mise en page.
- 11:10 - Contrôles
Dans macOS Tahoe, le design des contrôles a été mis à jour pour renforcer la cohérence entre les appareils Apple. Le nouveau système propose une taille extra-large pour les actions clés et rehausse les autres tailles pour améliorer la lisibilité. La forme des contrôles varie selon leur taille : les plus petits sont des rectangles arrondis, les plus grands des capsules. Les nouvelles API permettent de personnaliser forme, matériau et visibilité des contrôles. La propriété de visibilité de la teinte permet de varier le poids visuel des contrôles, facilitant la distinction entre les actions. Les curseurs ont été améliorés : possibilité de choisir où commence le remplissage et d’utiliser la proéminence de teinte. Les menus adoptent un look plus moderne et affichent désormais les icônes en colonne pour une navigation plus claire.
- 17:30 - Verre
Pour intégrer Liquid Glass dans votre app, tenez compte de l’intention du design et limitez son usage aux contrôles les plus importants situés en haut de la hiérarchie de l’UI. L’API NSGlassEffectView permet d’afficher du contenu sur du verre, avec des options de personnalisation comme le rayon des coins et la couleur de teinte. Si plusieurs formes en verre sont proches, utilisez NSGlassEffectContainerView pour les regrouper et garantir des effets visuels fluides, une apparence uniforme et un échantillonnage cohérent du contenu environnant.
- 21:30 - Étapes suivantes
Pour profiter des dernières nouveautés de design, développez vos apps avec Xcode 26. Vous pourrez ainsi intégrer immédiatement du contenu bord à bord avec barre d’outils et barre latérale en verre flottant. Ajoutez des icônes aux actions de menu et appliquez le matériau Liquid Glass aux éléments clés de l’interface pour moderniser l’apparence de votre app.