Crea una app de AppKit con el nuevo diseño

Hola, soy Jeff Nadeau, y hoy veremos “Cómo crear una app AppKit con el nuevo diseño”. El nuevo diseño de macOS establece una base común para el aspecto y sensación de las apps de Mac. Un elemento clave de este diseño es el Liquid Glass, una superficie translúcida que refleja y refracta la luz. AppKit tiene todo lo que necesitas para adaptarte a este nuevo diseño. Te explicaré los cambios importantes en la estructura, los comportamientos en macOS Tahoe y las nuevas API. Vamos a repasar estos cambios, empezando por los componentes estructurales básicos de tu app. Luego, mostraré el efecto de borde de desplazamiento, un efecto visual que mejora la legibilidad en contenidos. El nuevo diseño también incluye una importante actualización de aspecto y disposición de los controles. Por último, profundizaré en el material Liquid Glass, cómo funciona y las API de AppKit que puedes utilizar. Comenzaré con la estructura de las apps. El sistema transforma la forma y los elementos estructurales del aspecto de las ventanas de la Mac. Una de esas regiones es la barra de herramientas. Los elementos de la barra de herramientas se ponen sobre un cristal, que mejora la sensación de jerarquía. El cristal también agrupa los controles en grupos lógicos. Ya que todos representan acciones singulares, AppKit agrupa automáticamente varios botones en un solo panel. Los diferentes controles se separan en sus propios elementos de cristal, como los controles segmentados, los emergentes y la búsqueda. AppKit define esta agrupación automáticamente según el tipo de vista de control de cada elemento. Para anular el comportamiento automático, inserta espaciadores o usa NSToolbarItemGroup. El Liquid Glass es adaptable, es decir que reacciona de forma inteligente a su contexto, cambiando su aspecto. El cristal de la barra de herramientas se adapta al contenido, cambiando entre aspecto claro y oscuro. La barra de herramientas adapta su aspecto mediante NSAppearance, y aplica tu trabajo en Modo Oscuro. NSToolbar pone automáticamente el cristal detrás de cada elemento de la barra de herramientas, pero no todos los elementos aparecen sobre el cristal. Todo elemento no interactivo, como título personalizado o indicador de estado, deben evitar el material de cristal.

El texto informativo de la barra de herramientas de Fotos es un buen ejemplo. Con el fondo de material de cristal, casi parece un botón. Elimina el cristal de NSToolbarItem estableciendo isBordered como false. Ahora se ve mucho mejor.

Para el resto de los elementos de la barra, el cristal tiene otra función interesante: el teñido. Para especificar un estilo prominente, usa la nueva propiedad style de NSToolbarItem. El estilo destacado tiñe el cristal con color de acento, ideal para un estado o acción importante. Adapta el cristal del elemento prominente de la barra con backgroundTintColor para colores específicos. Las insignias son otra forma de llamar la atención sobre un elemento de la barra de herramientas. Usa la API NSItemBadge para marcar los elementos de la barra para contenido nuevo o pendiente. Por ejemplo, puedes usar una insignia para indicar la cantidad de mensajes no leídos o nuevas notificaciones. Terminadas las barras de herramientas de cristal, ve el contenido principal organizado en Split View. Los inspectores son cristales de borde a borde y las barras laterales son paneles de cristal flotantes. Usa NSSplitViewController para conseguir este efecto en tu app. AppKit aplica automáticamente el cristal adecuado a los elementos divididos de la barra lateral o inspector. La barra lateral antigua ya no es necesaria ahora que la barra lateral está sobre el cristal. NSVisualEffectView en la barra lateral bloquea la visualización del material de cristal. Debes eliminar estas vistas de efectos visuales de tu jerarquía de vistas.

Como el cristal de la barra lateral parece flotar, puede aparecer sobre contenido de la división adyacente. Es ideal para el contenido de desplazamiento horizontal, elementos en lista o contenido enriquecido, como mapas, que pueden extenderse en las barras laterales. Para ver contenido dividido bajo la barra lateral, fija Ajustar automáticamente inserciones de área segura a true. Establece esto en el contenido que se extiende bajo la barra lateral, no en la propia barra lateral. Cuando es true, NSSplitView amplía el marco del elemento bajo la barra lateral, con una guía para ubicar el contenido. El contenido enriquecido resalta el cristal flotante de la barra lateral, pero se desaconseja cubrir parte del contenido para lograrlo. Este póster del App Store tiene un aspecto llamativo de borde a borde, pero le falta espacio para barra lateral. Al ocultar la barra lateral se revela lo que ocurre realmente aquí. El contenido se refleja y se difumina, lo que amplía el aspecto de la ilustración sin ocultar su contenido. AppKit tiene una nueva API que proporciona este efecto.

Se llama NSBackgroundExtensionView. Esta vista utiliza un área segura para el contenido y un efecto visual para el aspecto de borde a borde. Crea una NSBackgroundExtensionView y colócala de manera que ocupe todo el marco del elemento dividido. Asígnale un ContentView, que se posiciona en el área segura, evitando la barra lateral flotante. Eso es todo. BackgroundExtensionView replicará automáticamente ContentView para rellenar el espacio fuera del área segura. La barra lateral flotante y la barra de herramientas muestran un elemento clave del nuevo sistema de diseño: la concentricidad. La curvatura de cada elemento se ajusta perfectamente al radio de la esquina de su contenedor, como una ventana. Y esta relación va en ambos sentidos. Las ventanas ahora tienen un radio de esquina más suave y amplio, que varía según el estilo de la ventana. Las ventanas con barras de herramientas tienen ahora un radio de esquina concéntrico más grande. Las ventanas con solo barra de título conservan un radio de esquina más pequeño. Las esquinas más grandes dan a las ventanas una sensación más suave, pero pueden cortar el contenido cerca del borde. Usa la nueva API NSView.LayoutRegion para colocar contenido que se anida en una esquina. Una región de diseño describe un área de una vista, pero con funciones integradas como evitar las esquinas. Puedes insertar una región horizontal o verticalmente según el tamaño de la esquina. Te mostraré cómo funciona la API. Puedes obtener una región para el área segura o para el área con márgenes de diseño estándar. La región incluye el ajuste de esquinas, que puede aplicar un margen horizontal o vertical a la región. Desde una región de diseño, usa el método layoutGuide para las restricciones de diseño automático. También puedes obtener la geometría sin procesar de la región en forma de inserciones de bordes o rectángulo.

Este es un ejemplo de la nueva API en acción. Mi botón de nueva carpeta choca con esta esquina y quiero limitarlo a una región que evite este choque. En updateConstraints, obtengo una guía de diseño para el área segura, con adaptación horizontal de esquinas. Esta guía de diseño es igual que la guía habitual, pero incluye un recuadro adicional en el borde con la esquina.

Ahora voy a crear algunas restricciones de diseño para vincular la geometría de botón a la guía de área segura. Solo hizo falta unas pocas líneas de código, y ahora mi botón queda alineado con la esquina. Ahora, hablemos del efecto de borde de desplazamiento. El diseño fomenta la fluidez del contenido de borde a borde, con elementos de Liquid Glass flotando encima. Para separar el cristal y el contenido, el sistema aplica un efecto visual en las áreas donde ambos se superponen. Este efecto viene en dos variantes: el borde suave se difumina; el borde duro usa un soporte opaco para separar mejor el contenido y los elementos.

Para el contenido desplazable, el efecto de borde de desplazamiento está en una vista de desplazamiento. La vista de desplazamiento varía el tamaño y la forma del efecto en función del contenido que flota sobre ella. El efecto se adapta automáticamente a medida que los elementos flotantes aparecen y desaparecen. El efecto de borde de desplazamiento se aplica automáticamente a los elementos y los accesorios. Los accesorios de elemento dividido son como accesorios de barra de título, pero abarcan una división de un controlador de Split View y se puede colocar arriba o abajo. Agrega un accesorio de elemento dividido creando un NSSplitViewItemAccessoryViewController y agrégalo al elemento de Split View con el método addTopAligned o addBottomAlignedAccessoryViewController. Los accesorios de elemento dividido y barra de título son lo mejor para agregar contenido flotante al efecto de borde. Influyen en el tamaño y la forma del efecto, y establecen el área segura del contenido, lo que simplifica su diseño. Ahora bien, ningún sistema de diseño está completo sin mi favorito personal: controles. Los controles tienen un aspecto completamente nuevo en macOS Tahoe. El nuevo diseño unifica botones, interruptores y controles deslizantes en macOS, iOS y iPadOS. Estos cambios se aplican para conservar el carácter y la capacidad que esperas de los controles de la Mac.

Los controles de macOS están disponibles en una variedad de tamaños: de mini a grande. Estos tamaños establecen distintos niveles de densidad y jerarquía entre tus controles. macOS Tahoe agrega un tamaño más a esta lista: extra grande, para enfatizar tus acciones más importantes. El tamaño extra grande es ideal para mostrar las acciones más destacadas de tu app. Éstas son las acciones para las se inicia tu app, como poner música o hacer una llamada en una app. También aprovechamos la oportunidad para replantearnos la altura de los controles.

Los controles de macOS son más altos, así que las etiquetas tienen más espacio y los objetivos de clic son más grandes. Para ajustar las diferentes alturas de control, usa Auto Layout y evita codificar las alturas de los controles. AppKit ofrece una API para tamaños de control antiguos de macOS, y asegura la compatibilidad con los existentes. En NSView, usa la nueva propiedad prefersCompactControlSizeMetrics. Cuando es true, esta propiedad heredada hace que los controles de AppKit sean del tamaño anterior de macOS. El nuevo sistema de diseño también introduce algunas nuevas formas de control. Los tamaños mini-mediano son rectángulos redondeados para más densidad; los grandes-extragrandes son cápsulas. Para lograr la concentricidad en tus diseños personalizados, anula la forma por defecto de un control. En este ejemplo, creé una barra emergente personalizada para revisión ortográfica con control de tamaño mediano. El contenedor de la barra tiene forma de cápsula, pero no encaja con los controles rectangulares redondeados. Este es un ejemplo perfecto del uso de la nueva propiedad borderShaped. Esta API permite sobrescribir formas de botones, botones emergentes y controles segmentados.

Al anular estos controles para utilizar una forma de cápsula, encajan en mi contenedor personalizado.

Además de la forma, también puedes personalizar el material de un botón usando el estilo de bisel de cristal. Este bisel sustituye el soporte estándar de los botones por un material Liquid Glass, ideal para botones flotantes. El estilo de bisel de cristal funciona con la propiedad bezelColor, lo que tiñe el cristal con el color dado. El nuevo sistema de diseño también introduce la idea de la prominencia del control en AppKit. Al variar la prominencia del botón, puedes controlar el nivel de peso visual que se le da a su color de tinte. Esto te permite agregar color a un botón sin restar protagonismo a los controles más destacados. Esta técnica se usa para botones destructivos. El rojo distintivo insinúa una acción destructiva, prominente pero sin dominar los controles cercanos.

El tipo de prominencia del tinte tiene cuatro casos: automático, cuando el control debe tener una prominencia adecuada para su estilo. Ninguno, tinte mínimo o inexistente. Secundario, una aplicación tenue. Primario, el más prominente.

Para aplicar un tono de menor prominencia a un botón, configura la propiedad tintProminence como secondary. De forma predeterminada, esto se mostrará usando el color de acento. Estoy haciendo que el botón Play sea predeterminado dándole el equivalente a la tecla Retorno. Esto garantiza una respuesta predecible del teclado y aplica automáticamente el matiz destacado por defecto.

TintProminence también tiene una función con controles deslizantes. La API TintProminence te permite elegir si la vía se rellena con el color de acento. Los deslizadores fijados en .none no rellenarán las vías; en cambio, los secundarios o primarios sí. El relleno del control deslizante tiene una nueva función en macOS Tahoe. Puede anclarse en cualquier punto de la vía, en vez de solo en el extremo mínimo. Usa neutralValue para establecer el valor de anclaje del relleno de la vía. En la velocidad de reproducción, ajustar neutralValue a 1x hace que el relleno azul muestre diferencias de velocidad cuando se la aumenta o reduce. También se incluye una actualización de los menús con un aspecto renovado y una ampliación en el uso de íconos.

Tanto los menús de la barra como los contextuales usan ahora íconos para representar acciones principales. Dentro de cada sección de un menú, los íconos forman una única columna que es fácil de recorrer. Agregar símbolos reconocibles a los elementos del menú ayuda a los usuarios a encontrar rápidamente las acciones.

Encontrarás una gran cantidad de orientación para elegir símbolos en el video "Conoce el nuevo sistema de diseño". No te lo pierdas. Por último, integra elementos de Liquid Glass en tu app. Ten en cuenta la intención de su diseño antes de utilizar Liquid Glass en tu interfaz de usuario.

Liquid Glass flota en la parte superior de la UI, elevando controles y navegación a una capa funcional diferenciada. Limita Liquid Glass a los controles más importantes de tu app, los situados en la parte superior de la jerarquía. Los controles de edición en línea de Freeform son un gran ejemplo. Flotan por encima del contenido, no al lado, y funcionan perfectamente con Liquid Glass.

Usa la API NSGlassEffectView para colocar tu contenido en cristal. contentView ayuda a AppKit a aplicar tratamientos visuales: el contenido es legible y el cristal se adapta. Así que evita colocar NSGlassEffectView detrás de tu contenido como vista secundaria. Puedes personalizar el aspecto del cristal con las propiedades cornerRadius y tintColor. Te mostraré un ejemplo de cómo adoptar NSGlassEffectView para un elemento existente.

Esta app de fitness muestra las estadísticas diarias y un selector de tipo de entrenamiento personalizado. Los muestro usando un NSStackView horizontal. Esta es una parte importante de mi UI, por lo que colocaré ambas partes en cristal. Incorporar el material Liquid Glass solo requiere unas pocas líneas nuevas de código. Crea un NSGlassEffectView para cada elemento de cristal y establece su contentView a la vista deseada. GlassEffectView usa Auto Layout para atar su geometría al contentView, lo que simplifica la sincronización.

Pon GlassEffectViews en la jerarquía de vistas. En este ejemplo, actualicé la vista de pila para intercambiar las nuevas GlassEffectViews. Si tienes varias formas de cristal muy próximas entre sí, agrúpalas con NSGlassEffectContainerView. El GlassEffectContainerView combina varios elementos de cristal en un único efecto de renderizado. Esto tiene algunos beneficios.

Los elementos de cristal agrupados pueden unirse y separarse con fluidez con un efecto visual de Liquid Glass. Las formas de cristal se funden según la proximidad y la propiedad de spacing de NSGlassEffectContainerView.

El aspecto adaptable del cristal es compartido, y asegura un aspecto uniforme en función del contenido subyacente. La agrupación es vital para la corrección visual. El material Liquid Glass refleja y refracta la luz, captando el color del contenido cercano.

Para crear este efecto, el material de cristal toma muestras de contenido de un área más grande que él mismo. ¿Pero qué sucede si esa región de muestreo incluye otro elemento de cristal? El cristal no toma muestras directamente de otro cristal, por lo que los resultados visuales no serán consistentes. El uso de un contenedor con efecto de cristal permite que estos elementos compartan su región de muestreo. Proporciona imágenes uniformes y un mejor rendimiento de los efectos de cristal con una sola pasada de muestreo.

Para un rendimiento y una mezcla óptimos, dos efectos de cristal de un grupo lógico deben estar en un contenedor. Es muy sencillo configurarlo. En este ejemplo, creo un NSGlassEffectContainerView y establezco la vista de pila como su vista de contenido. Auto Layout garantiza el intercambio fluido de contenedores y su contenido en diseños existentes. Liquid Glass mejora los controles de las apps y permite que el contenido fluya a la perfección de un borde a otro. Es una excelente manera de resaltar la funcionalidad que hace que tu app sea única.

¿Qué sigue? Como primer paso, crea tu app con Xcode 26. Gran parte del nuevo diseño comenzará a funcionar de inmediato. Maximiza el contenido extendiéndolo de borde a borde, con la barra lateral y de herramientas de cristal flotante. Si existen alturas codificadas y restricciones de diseño inflexibles, adapta tu app a los nuevos tamaños de control. Mejora los menús con íconos de símbolos y eleva los elementos clave de la interfaz con Liquid Glass. Gracias por acompañarnos y por crear excelentes apps para Mac.