Crie um app do AppKit com o novo design

Olá, sou Jeff Nadeau, frameworks engineering manager na Apple. Esta é a sessão "Criar um app do AppKit com o novo design". O novo design do macOS estabelece uma base comum para a aparência dos apps para Mac, com materiais de atualização e controles em todo o sistema. Um elemento importante desse novo design é o material Liquid Glass, uma superfície translúcida que reflete e refrata a luz, criando uma sensação de profundidade e dinamismo na interface. O AppKit tem tudo o que precisa para se adaptar ao novo design. Vou mostrar as mudanças importantes no framework, descrevendo os comportamentos que você pode esperar no macOS Tahoe e as novas APIs que você pode usar para aprimorar a adoção do novo design. Vou mostrar todas essas mudanças, começando com os componentes estruturais básicos do seu app. Depois, vou mostrar o efeito de borda de rolagem, um efeito visual que permite ler o conteúdo rolando-o de ponta a ponta. O novo design também inclui uma grande atualização na aparência e no layout dos controles. Por fim, vou mostrar o material Liquid Glass e como ele funciona e abordar as APIs do AppKit para incluir vidro nos elementos personalizados da interface. Vou começar com a estrutura do app. O novo sistema de design transforma a aparência da janela do Mac, alterando o formato dela e emoldurando suas principais regiões estruturais em vidro. Uma dessas regiões é a barra de ferramentas. No novo sistema de design, os elementos da barra de ferramentas ficam em um material de vidro e toda a barra parece flutuar acima do conteúdo, aumentando a sensação de hierarquia dentro da janela. O vidro também reúne controles em grupos lógicos. Como todos representam ações únicas, o AppKit agrupa vários botões da barra de ferramentas em um único pedaço de vidro. Diversos tipos de controles são separados em seus próprios elementos de vidro, como controles segmentados, botões pop-up e o controle de busca. O AppKit determina esse agrupamento com base no tipo de visualização de controle de cada item. Para substituir o comportamento automático, use NSToolbarItemGroup para agrupar itens ou insira espaçadores para separá-los. O material Liquid Glass é adaptativo, ou seja, ele reage de modo inteligente ao contexto, mudando a aparência para se adequar ao brilho do conteúdo por trás dele. O vidro da barra de ferramentas alterna entre uma aparência clara e escura quando o conteúdo é claro ou escuro. A alteração de aparência é comunicada ao conteúdo da barra de ferramentas com o sistema NSAppearance. Se você incluiu o Modo Escuro, ele também se aplicará aqui. A NSToolbar coloca automaticamente o material de vidro atrás de cada item da barra de ferramentas. Mas nem todos os itens devem aparecer sobre o vidro. Itens não interativos, como títulos personalizados e indicadores de status, devem evitar o material de vidro.

O texto informativo na barra de ferramentas Fotos é um ótimo exemplo. Com o material de vidro, ele quase parece um botão. Você pode remover o vidro de um NSToolbarItem definindo a propriedade isBordered como false. A aparência está muito melhor.

Para os demais itens da barra de ferramentas, o material de vidro tem outro recurso legal: cores. Use a nova propriedade de estilo em NSToolbarItem para especificar um estilo destacado. O estilo destacado colore o vidro usando a cor de destaque, que é perfeita para exibir o estado ou enfatizar uma ação importante. Para personalizar ainda mais a aparência do item destacado da barra, use a propriedade backgroundTintColor e escolha uma cor específica para o vidro. Outra maneira de chamar a atenção para itens da barra de ferramentas é usar avisos. Use a API NSItemBadge para indicar que um item da barra de ferramentas navega para conteúdo novo ou pendente. Por exemplo, você pode usar um aviso para indicar uma série de mensagens não lidas ou a presença de novas notificações. Agora que falei sobre as barras de ferramentas de vidro, mostrarei o conteúdo principal da janela, geralmente organizado com Split View. No novo design, as barras laterais aparecem como um painel de vidro que flutua acima do conteúdo da janela. Os inspetores usam um vidro de borda a borda que fica junto com o conteúdo. Para obter esse efeito no seu app, use o NSSplitViewController. Ao criar itens divididos com uma barra lateral ou comportamentos do inspetor, o AppKit apresenta automaticamente o material de vidro apropriado. Agora que a barra lateral fica sobre o vidro, o material antigo dela não é mais necessário. Se você estiver usando um NSVisualEffectView para exibir esse material dentro da barra lateral, ele impedirá que o material de vidro apareça. Remova essas visualizações de efeitos visuais da sua hierarquia de exibição.

Como o vidro da barra lateral parece flutuar acima da janela, ele pode aparecer sobre o conteúdo da divisão adjacente. Isso é bom para conteúdo de rolagem horizontal, itens de lista que movem para mostrar ações de deslizar ou conteúdo avançado, como um mapa ou pôster de filme que pode se estender para a região da barra lateral. Para que o conteúdo dividido apareça abaixo da barra lateral, defina a propriedade automaticallyAdjustSafeAreaInsets como true. Defina isso no conteúdo que você deseja estender sob a barra lateral, e não na própria barra lateral. Quando essa propriedade for true, o NSSplitView estenderá o quadro desse item abaixo da barra lateral e aplicará um guia de layout com área segura para ajudar a posicionar o conteúdo dentro da área não obscurecida. Conteúdo avançado, como fotografias ou artes, mostram o material de vidro flutuante na barra lateral, mas muitas vezes não é bom encobrir parte do conteúdo para obter esse efeito. Este pôster da App Store cria um efeito marcante quando exibido de ponta a ponta, mas a arte não tem espaço negativo extra para acomodar a barra lateral.

Ao ocultar a barra lateral, notamos o que está acontecendo aqui. O conteúdo é espelhado e desfocado, estendendo a aparência da arte sem obscurecer conteúdo. O AppKit tem uma nova API que aplica esse efeito.

Ela se chama NSBackgroundExtensionView. Essa visualização usa a área segura para posicionar seu conteúdo na parte não obscurecida, estendendo sua aparência de ponta a ponta com um efeito visual. Para colocar isso em prática, crie um NSBackgroundExtensionView e posicione-o para preencher todo o quadro do item dividido. Atribua a ele um contentView, que ele posiciona na área segura, evitando a barra lateral flutuante. É isso. O BackgroundExtensionView criará automaticamente uma réplica do ContentView para preencher o espaço fora da área segura. A barra lateral flutuante, junto com a barra de ferramentas, demonstram um elemento importante do novo sistema de design: a concentricidade. Cada elemento é criado com uma curvatura que se encaixa dentro do raio de canto do contêiner, neste caso, a própria janela. E essa relação é mútua. No novo sistema de design, as janelas têm um raio de canto mais suave e generoso, que varia de acordo com o estilo da janela. As janelas com barras de ferramentas usam um raio maior, criado para envolver concentricamente os elementos da barra de vidro, dimensionando para corresponder ao tamanho dela. As janelas somente com a barra de título mantêm um raio de canto menor, envolvendo de modo compacto os controles da janela. Esses cantos maiores conferem à janela uma sensação mais suave e uma concentricidade elegante, mas também podem cortar o conteúdo perto da borda da janela. Para posicionar o conteúdo aninhado em um canto, use a nova API NSView.LayoutRegion. Uma região de layout descreve uma área de uma visualização, como a área segura, mas com recursos como evitar cantos integrados. Você pode inserir uma região horizontal ou verticalmente de acordo com o tamanho do canto. Vou mostrar a API. Você pode obter uma região para a área segura ou a área com margens de layout padrão. A região inclui adaptação de canto, que pode aplicar uma inserção horizontal ou vertical à região. Em uma região de layout, use o método layoutGuide e consiga um guia para aplicar restrições de layout automático. Você também pode obter a geometria bruta da região na forma de inserções de bordas ou o retângulo atual dela.

Confira um exemplo da nova API em ação. Meu novo botão de pasta está colidindo com este canto, e eu quero restringi-lo a uma região que evite essa colisão. Em um método updateConstraints, obtenho um guia de layout para a área segura, incluindo adaptação de canto horizontal. Esse guia é como o guia de layout de área segura comum, mas inclui uma inserção extra na borda com o canto.

Em seguida, crio restrições de layout para vincular a geometria do botão à guia da área segura. Precisei apenas de algumas linhas de código. Agora meu botão está bem posicionado no canto. Em seguida, vou mostrar o efeito de borda de rolagem. O novo design incentiva o fluxo de conteúdo de ponta a ponta, com elementos em Liquid Glass flutuando no topo. Para separar o vidro do conteúdo, o sistema aplica um efeito visual nas áreas onde esses dois se sobrepõem. Esse efeito tem duas variações: um estilo de borda suave, que esmaece e desfoca aos poucos o conteúdo, e um estilo de borda rígida, que usa um fundo mais opaco para aumentar a separação entre o conteúdo e os elementos flutuantes.

Para conteúdo rolável, o efeito de borda de rolagem fica dentro da NSScrollView. A visualização de rolagem muda o tamanho e a forma do efeito com base no conteúdo que flutua acima dela. O efeito se adapta automaticamente enquanto elementos flutuantes entram e saem. O efeito de borda de rolagem é aplicado abaixo dos itens da barra de ferramentas, dos acessórios da barra de título e de um novo tipo de acessório: os acessórios de itens divididos. Eles são muito semelhantes aos da barra de título, mas abrangem só uma divisão dentro de um controle do Split View e podem ser colocados na borda superior ou inferior da divisão. Para adicionar um acessório de item dividido, crie um NSSplitViewItemAccessoryViewController e anexe-o ao item do Split View usando o método de controle de visualização de adição alinhado na parte superior ou inferior. Os acessórios de itens divididos, com os acessórios da barra de título, são a melhor maneira de incorporar conteúdo flutuante ao efeito de borda de rolagem. Eles influenciam o tamanho e a forma do efeito e inserem a área segura do conteúdo, simplificando o layout do conteúdo. Nenhum sistema de design está completo sem o meu item favorito: os controles. Os controles têm um visual totalmente novo no macOS Tahoe. O novo design cria uma semelhança mais sólida entre os dispositivos, unificando a aparência de elementos como botões, chaves e controles deslizantes, entre o macOS, iOS e iPadOS. Essas alterações foram cuidadosamente aplicadas para manter as características e recursos que você espera dos controles do Mac.

Os controles do macOS estão disponíveis em vários tamanhos padrão, do mini ao grande. Esses tamanhos estabelecem níveis variados de densidade e hierarquia entre seus controles. O macOS Tahoe inclui mais um tamanho, o extragrande, para enfatizar suas ações mais importantes. O tamanho extragrande é ideal para exibir as ações mais destacadas no seu app. Essas são as ações que as pessoas iniciam ao abrir seu app, como criar uma lista de músicas em um reprodutor de mídia ou fazer uma ligação em um app de comunicação. Além do novo tamanho, também aproveitamos para repensar as alturas dos controles.

Em comparação com versões anteriores do macOS, os controles mini, pequeno e médio estão um pouco mais altos, com mais espaço ao redor do rótulo de controle e tamanho do destino de clique maior. Para se adaptar a diversas alturas de controle, use o AutoLayout e evite codificar as alturas dos controles. Para compatibilidade com layouts de alta densidade, como popovers e inspetores complexos, o AppKit fornece uma API para solicitar tamanhos de controle apropriados para versões anteriores do macOS. Use a nova propriedade prefersCompactControlSizeMetrics no NSView. Essa propriedade é herdada na hierarquia de visualização e, quando definida como true, os controles do AppKit são revertidos para o dimensionamento compatível com versões anteriores do macOS. O novo sistema de design também introduz algumas novas formas de controle. Os tamanhos mini e médio mantêm uma forma de retângulo arredondado, permitindo maior densidade horizontal, enquanto os tamanhos grande e extragrande formam uma cápsula, aproveitando o espaço extra. Para obter concentricidade nos seus designs personalizados, você pode substituir a forma de um controle. Neste exemplo, criei uma barra de texto explicativo personalizada para verificação ortográfica usando controles médios. O contêiner da barra tem um formato de cápsula, mas não se encaixa bem com os controles de retângulo arredondados dentro. Este é um caso de uso perfeito para a nova propriedade borderShaped. Essa API permite que você substitua as formas de botões, botões pop-up e controles segmentados.

Ao substituir esses controles para usar uma forma de cápsula, eles se encaixam perfeitamente no meu contêiner personalizado.

Além do formato, você também pode personalizar o material de um botão usando o novo estilo de moldura de vidro. Esse estilo de moldura substitui o fundo padrão do botão pelo material Liquid Glass, perfeito para botões que precisam flutuar sobre outros conteúdos. O estilo da moldura de vidro é compatível com a propriedade bezelColor existente, que colore o vidro usando a cor fornecida. O novo sistema de design também introduz a ideia de destaque de controle para o AppKit. Ao mudar o destaque de um botão, você pode controlar o nível de peso visual dado à sua cor. Isso permite que você adicione cor a um botão sem alterar controles de destaque mais altos dentro da mesma interface, como o botão padrão. Essa técnica é usada para botões destrutivos. A cor vermelha destacada é um indício útil de que a ação é destrutiva, mas com um nível de destaque que não domina os controles próximos.

O tipo de destaque da cor tem quatro casos: automático, que indica que o controle deve escolher um nível de destaque adequado ao seu estilo e configuração, nenhum, que indica cor mínima ou nenhuma cor, secundário, que indica uma aplicação mais moderada da cor, e principal, que aplica a cor no nível mais destacado.

Para aplicar uma cor de menor destaque a um botão, defina a propriedade tintProminence como secundária. Por padrão, ele vai aparecer usando a cor de destaque. Neste exemplo, estou tratando o botão de reprodução de modo diferente, pois quero que se comporte como o botão padrão, então dei a ele o equivalente à tecla Return. Isso garante que o botão responda ao teclado de forma previsível e, como é o botão padrão, ele aplicará automaticamente o nível mais destacado da tonalidade.

O destaque da tonalidade também tem uma função com controles deslizantes. A API tintProminence permite que você escolha se a faixa é preenchida com a cor de destaque. Um controle deslizante definido como nenhum evitará preencher a faixa, e outro definido como secundário ou principal a preencherá. O preenchimento do controle deslizante está mais avançado no macOS Tahoe. Ele pode se fixar em qualquer local da faixa, não apenas na extremidade mínima. Use a nova propriedade neutralValue para definir um valor que sirva como âncora para o preenchimento da faixa. Neste exemplo de um controle de velocidade de reprodução, defini o neutralValue como 1x. Então, quando a velocidade é reduzida ou aumentada, o preenchimento azul ajuda a comunicar a diferença entre o valor selecionado e o valor padrão. O novo sistema de design também traz uma atualização dos menus com uma aparência renovada e uma expansão significativa no uso de ícones.

Os menus da barra de menus e os de contexto agora usam ícones para representar suas principais ações. Dentro de cada seção de um menu, os ícones formam uma única coluna fácil de percorrer. Adicionar símbolos claros e reconhecíveis aos itens de menu ajuda as pessoas a encontrar as ações mais importantes nele.

O vídeo "Conhecer o novo sistema de design" fornece outras orientações para escolher símbolos para seus itens de menu. Não deixe de conferir. Por fim, há a integração de elementos em Liquid Glass ao seu app. Antes de integrar o material Liquid Glass aos elementos personalizados da interface, pense na intenção de design por trás desse novo material.

Os elementos em Liquid Glass flutuam no nível superior da interface, elevando os controles e a navegação para uma camada funcional distinta. Por isso, limite o uso de Liquid Glass aos elementos mais importantes do seu app, os controles que pertencem a esse nível superior de hierarquia. Os controles de edição em linha do Freeform são um ótimo exemplo. Eles flutuam acima do conteúdo, em vez de ficarem ao lado, e funcionam muito bem com o material Liquid Glass.

Para colocar seu conteúdo em vidro, use a API NSGlassEffectView. Ao definir uma visualização de conteúdo, o AppKit aplica os tratamentos visuais necessários para manter o conteúdo legível conforme o vidro se adapta ao ambiente. Portanto, evite colocar o NSGlassEffectView atrás do seu conteúdo como uma visualização secundária. Você pode personalizar a aparência do vidro usando as propriedades de cor de raio de canto e tonalidade. Vou mostrar um exemplo de adoção de NSGlassEffectView para um elemento existente.

Neste exemplo, tenho um app de exercícios que mostra estatísticas de treinos diários e um controle personalizado para escolher o tipo de exercício. Eles estão sendo exibidos com um NSStackView horizontal. Essa é uma parte destacada da minha interface. Vou colocar as duas partes dela no vidro. A adoção do material Liquid Glass requer apenas algumas novas linhas de código. Primeiro, crie um NSGlassEffectView para cada elemento de vidro que você quer exibir e defina a propriedade contentView de cada um como a visualização desejada. O GlassEffectView vincula sua geometria à visualização de conteúdo usando o AutoLayout para que você não precise se preocupar em mantê-los sincronizados.

Em seguida, coloque o GlassEffectViews na hierarquia de visualização. Neste exemplo, atualizei a visualização de pilha para troca no novo GlassEffectViews. Se você tiver várias formas de vidro próximas, agrupe-as usando NSGlassEffectContainerView. O GlassEffectContainerView combina vários elementos de vidro em um único efeito de renderização. Isso tem alguns benefícios.

Elementos de vidro agrupados podem se unir e se separar de modo fluido com um efeito visual líquido. As formas de vidro se fundem com base na proximidade e no valor da propriedade de espaçamento, que está disponível em NSGlassEffectContainerView.

A aparência adaptativa do vidro é compartilhada entre os elementos agrupados. Assim, eles mantêm uma aparência uniforme conforme o conteúdo subjacente muda. E o agrupamento é importante para a correção visual. O material Liquid Glass reflete e refrata a luz, escolhendo a cor do conteúdo próximo.

Para criar esse efeito, o material de vidro coleta amostras de conteúdo de uma área maior do que ele mesmo. Mas o que acontecerá se essa região de amostragem incluir outro elemento de vidro? Um vidro não pode sobrepor outro vidro, então os resultados visuais nesse caso não serão consistentes. O uso de um contêiner de efeito de vidro permite que esses elementos compartilhem a região de amostragem. Isso não só fornece um resultado visual mais consistente, mas também melhora o desempenho do efeito de vidro, já que ele só precisa de uma etapa de amostragem para todo o grupo.

Revendo a amostra anterior, esses dois efeitos de vidro fazem parte de um grupo lógico, então eles precisam estar dentro de um contêiner de efeito de vidro. A criação dele é um processo simples. Neste exemplo, crio uma visualização de contêiner de efeito de vidro e defino a exibição de pilha como a exibição de conteúdo. O contêiner e sua visualização de conteúdo também são restritos usando o layout automático. Assim, eu posso trocar esse contêiner de forma limpa para o layout existente. O material Liquid Glass é uma ferramenta robusta para aprimorar os principais controles do seu app e permitir que o conteúdo flua de ponta a ponta. É uma boa maneira de destacar as funcionalidades que tornam seu app único.

O que vem por aí? Antes de tudo, crie seu app com o Xcode 26. Uma grande parte do novo design começará a funcionar imediatamente. Estenda seu conteúdo de ponta a ponta sempre que possível, aproveitando a barra de ferramentas flutuante de vidro e a barra lateral. Implemente os novos tamanhos de controle buscando no seu app alturas de controle codificadas ou restrições de layout inflexíveis. Aprimore as ações do menu com ícones de símbolos e identifique os principais elementos da interface para elevá-lo com o Liquid Glass. Agradeço a participação e os ótimos apps criados para Mac.