-
Crea una app de AppKit con el nuevo diseño
Actualiza tu app de AppKit para aprovechar al máximo el nuevo sistema de diseño. Analizaremos los cambios clave en las vistas de pestañas y divididas, barras, presentaciones, búsqueda y controles, y cómo usar Liquid Glass en tu IU personalizada. Para aprovechar al máximo este video, recomendamos ver primero “Conoce el nuevo sistema de diseño” para obtener orientación general sobre diseño.
Capítulos
- 0:00 - Introducción
- 1:23 - Estructura de la app
- 9:27 - Efecto de borde de desplazamiento
- 11:10 - Controles
- 17:30 - Glass
- 21:30 - Próximos pasos
Recursos
Videos relacionados
WWDC25
-
Buscar este video…
-
-
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 - Introducción
Obtén información sobre el sistema de diseño actualizado para macOS. El nuevo diseño presenta Liquid Glass, una superficie translúcida que agrega profundidad y dinamismo a la interfaz de usuario. AppKit se actualizó para admitir este nuevo diseño y cambios en los componentes estructurales básicos, la introducción de un efecto de borde de desplazamiento para mayor legibilidad y actualizaciones en la apariencia y el diseño de los controles. Aprende a implementar estos cambios y a usar nuevas API para incorporar Liquid Glass en tus elementos de interfaz personalizados.
- 1:23 - Estructura de la app
El nuevo sistema de diseño de la Mac presenta Liquid Glass para las barras de herramientas y laterales, mejorando la jerarquía y el atractivo visual. Los elementos de la barra de herramientas se agrupan automáticamente en Liquid Glass, que adapta su apariencia según el brillo del contenido. Los elementos de la barra de herramientas se pueden personalizar. Las barras laterales aparecen como paneles de vidrio flotantes, mientras que los inspectores usan una superficie de vidrio de borde a borde. El sistema de diseño enfatiza la concentricidad, con radios de esquinas de ventanas más suaves que varían según el estilo. Para posicionar el contenido cerca de las esquinas, la nueva API NSView.LayoutRegion proporciona guías de diseño que evitan las esquinas, lo que garantiza una interfaz de usuario refinada y elegante.
- 9:27 - Efecto de borde de desplazamiento
El nuevo diseño presenta el efecto de borde de desplazamiento, una separación visual entre el contenido de borde a borde y los elementos flotantes de Liquid Glass. Este efecto se manifiesta como un desvanecimiento sutil o un fondo opaco sólido y se adapta dinámicamente dentro de NSScrollView a medida que cambian los elementos flotantes. El efecto se aplica automáticamente debajo de los elementos de la barra de herramientas, los accesorios de la barra de título y los nuevos accesorios de elementos divididos, que abarcan una división dentro de un controlador de vista dividida y que puedes colocar en el borde superior o inferior. Estos accesorios influyen en el tamaño y la forma del efecto, ajustando el área segura del contenido para facilitar el diseño.
- 11:10 - Controles
En macOS Tahoe, el sistema de diseño de controles se actualiza para mejorar la coherencia en todos los dispositivos Apple. El nuevo sistema incluye un tamaño de control extra grande para enfatizar las acciones principales y los controles mini, pequeños y medianos ligeramente más grandes para una mejor legibilidad. Las formas de los controles ahora varían según el tamaño. Los tamaños más pequeños son rectángulos redondeados, mientras que los más grandes son cápsulas. Puedes personalizar las formas, los materiales y la prominencia de los controles con las nuevas API. La propiedad de prominencia del tinte permite que los controles tengan distintos niveles de peso visual, lo que hace más fácil distinguir entre diferentes acciones. Los controles deslizantes también se actualizaron, con la capacidad de anclar el relleno en cualquier ubicación y usar la prominencia del tinte. Los menús se actualizaron con una apariencia más moderna y ahora presentan íconos destacados en una sola columna para facilitar el escaneo y la navegación.
- 17:30 - Glass
Para integrar elementos de Liquid Glass en tu app, ten en cuenta la intención del diseño y limita su uso a los controles más importantes que flotan en el nivel superior de la jerarquía de la interfaz. La API NSGlassEffectView proporciona funcionalidad para colocar contenido en el efecto de vidrio, y puedes personalizar su apariencia con propiedades de radio de esquina y color de tinte. Si varias formas con el efecto de vidrio están cerca unas de otras, agrúpalas usando NSGlassEffectContainerView para garantizar efectos visuales fluidos, una apariencia uniforme y un muestreo coherente del contenido cercano.
- 21:30 - Próximos pasos
Para aprovechar las últimas funcionalidades de diseño, crea tus apps con Xcode 26. Esto permite la implementación inmediata de contenido de borde a borde con la barra de herramientas y la barra lateral de vidrio flotante. Mejora las acciones del menú con íconos de símbolos e incorpora el material Liquid Glass para elementos clave de la interfaz a fin de modernizar la apariencia de tu app.