Crie um app em SwiftUI com o novo design

Olá! Sou Franck, engenheiro da equipe SwiftUI. Neste vídeo, você vai aprender a criar um ótimo app com o novo design. O iOS 26 e o macOS Tahoe incluem atualizações importantes na aparência dos apps e na experiência do sistema. No cerne dessas atualizações está um novo material adaptável para controles e elementos de navegação chamado Liquid Glass.

Sua inspiração foram as propriedades ópticas do vidro e a fluidez do líquido para criar um material leve e dinâmico que ajuda a elevar o conteúdo essencial em vários componentes. Conforme você navega pelo conteúdo, o vidro se adapta automaticamente a ele, mudando de claro para escuro. Com um novíssimo visual em todas as plataformas, os controles ganham vida em cada interação. Recursos, como controles de ativação, seletores segmentados e controles deslizantes se transformam em Liquid Glass na interação, criando uma experiência sofisticada. Essas atualizações estão em todas as plataformas em que o seu app é executado. Assista a "Conheça o Liquid Glass" para conhecer o design desse novo material. Depois, confira "Conheça o novo sistema de design" para aprender as melhores práticas do novo design. Às vezes, na vida, para ter clareza e se concentrar no que é realmente importante, você precisa se reinventar e analisar o todo. Hoje, aplico esse conhecimento ao app Landmarks, um projeto de amostra disponível no site Apple Developer. Vou mostrar elementos do novo sistema de design nas plataformas Apple e trazer mais clareza e foco em relação ao app Landmarks usando as novas APIs. Ao criar seu app com os SDKs do Xcode 26, você perceberá mudanças em toda a interface do usuário. Vou começar com as atualizações em componentes estruturais do app, como "TabView" e "NavigationSplitView".

Depois, vou falar sobre o novo comportamento e aparência das barras de ferramentas. Então, compartilharei as atualizações na experiência de busca, que aumentam a consistência e facilitam o uso. Em seguida, vou mostrar como os controles ganham vida com o Liquid Glass. Por fim, vou descrever como você pode adotar o Liquid Glass em seus elementos personalizados de interface.

Em cada uma dessas cinco áreas, há melhorias que você vai obter automaticamente e novas APIs para personalizar ainda mais a experiência. Estrutura do app refere-se à família de APIs que definem como as pessoas navegam no seu app.

Isso inclui visualizações e modificadores, como "NavigationSplitView", "TabView" e "Sheets". Todos esses itens foram refinados para o novo design. "NavigationSplitView" permite navegar em uma hierarquia bem-definida de muitas categorias raiz possíveis.

Agora, há uma barra lateral de Liquid Glass que flutua sobre o conteúdo. Este banner de tirar o fôlego no Landmarks ilustra bem isso, com a refração das flores rosas na barra lateral. No entanto, a equipe do Landmarks não viajou para esses destinos fantásticos, tirando fotos espetaculares, para que elas aparecessem cortadas, mesmo em uma barra lateral tão linda. Com o novo modificador "backgroundExtensionEffect", as imagens vão além das bordas da área segura, sem cortar o conteúdo.

Quando oculto a barra lateral, você vê o que está acontecendo por trás dela. A imagem é espelhada e desfocada fora da área segura, estendendo a arte enquanto todo o conteúdo fica visível. O novo design com o Liquid Glass dá ainda mais destaque aos inspetores. Do lado oposto à barra lateral no Landmarks, o inspetor tem conteúdo em camadas mais sutis. Isso associa o inspetor à respectiva seleção.

"TabViews" proporciona uma navegação persistente e avançada. Esse recurso traz uma visão geral rápida das possibilidades e otimiza a alternância de uma seção para outra, mantendo o contexto dentro de cada seção.

No novo design, a barra de abas do iPhone flutua sobre o conteúdo e pode ser configurada para minimizar na rolagem. Assim, o conteúdo do app continua sendo a estrela do show.

Para adotar esse comportamento, use o modificador "tabBarMinimizeBehavior". No exemplo, o app TV usa o comportamento "onScrollDown".

Nessa configuração, a barra de abas expande novamente ao rolar na direção oposta.

Vamos supor que você queira que outros controles do app estejam ao alcance, como a visualização de reprodução no app Música.

Inclua uma visualização sobre a barra com o modificador "tabViewBottomAccessory". Assim, você aproveita o espaço extra fornecido pelo comportamento de recolhimento da barra de abas.

Na visualização de acessórios, leia o "tabViewBottomAccessoryPlacement" do ambiente. Então, ajuste o conteúdo do acessório quando ele ficar oculto na área da barra de abas.

Mostrei como "NavigationSplitView" fica incrível no Landmarks com o novo design e como adaptar apps que usam o TabView. Agora, vou apresentar o recurso "Sheets". Ao criar uma coleção de pontos de referência, uma folha de opções é apresentada.

No iOS 26, as folhas de altura parcial são inseridas por padrão com um fundo de Liquid Glass.

Em alturas menores, as bordas inferiores ficam para dentro, aninhando-se nas bordas curvas da tela.

Ao fazer a transição para uma folha de altura total, o fundo de vidro se transforma gradualmente, ficando opaco e ancorando na borda da tela. Se você usou o modificador "presentationBackground" para aplicar um plano de fundo personalizado às folhas, considere removê-lo para o novo material se destacar.

As folhas também podem surgir dos botões que as apresentam. Para que o conteúdo surja visualização de origem, torne o item da barra de ferramentas da apresentação uma origem para uma transição de zoom na navegação. E marque o conteúdo da folha como o destino da transição.

Assim como as folhas, outras apresentações, como menus, alertas e popovers, saem suavemente dos controles do Liquid Glass, para que o foco seja o conteúdo da apresentação, não a ação.

No novo design, as caixas de diálogo também surgem dos botões que as apresentam.

Agora que você compreendeu a estrutura dos apps, vamos para as barras de ferramentas. No novo design, os itens da barra de ferramentas são colocados em uma superfície de Liquid Glass que flutua sobre o conteúdo do app e automaticamente se adapta ao que está abaixo dele. Os itens da barra de ferramentas são agrupados automaticamente. Quando crio o app Landmarks com o Xcode 26, meus itens da barra de ferramentas personalizada não estão agrupados com o botão Voltar.

Quero enfatizar que os botões "adicionar aos favoritos" e "adicionar à coleção" são ações relacionadas. Por isso, usei a nova API "ToolbarSpacer" com espaçamentos fixos para dividi-los em seu próprio grupo.

Isso garante a clareza visual de que as ações agrupadas estão relacionadas, enquanto as ações separadas, como o link de compartilhamento e o inspetor, têm um comportamento distinto. "ToolbarSpacer" também pode ser usado para criar um espaço flexível que se expande entre os itens da barra de ferramentas.

O app Mail usa essa técnica para criar um item de filtro alinhado à esquerda e um grupo alinhado à direita com os itens de busca e composição.

Alguns itens da barra de ferramentas podem ficar sem esse agrupamento visual, como este item do Livros mostrando meu avatar.

Use o modificador "sharedBackgroundVisibility" para separar um item em seu próprio grupo sem um plano de fundo.

No app Landmarks, adicionei um recurso que permite que amigos reajam à minha coleção de pontos de referência. Gostaria de adicionar um indicador no item de notificação quando houver uma nova reação. Não quero perder os elogios das outras pessoas.

Ao usar o modificador "badge" nos itens da barra de ferramentas, basta uma linha de código para ganhar elogios.

Eu apliquei o modificador "badge" ao conteúdo do item da barra de ferramentas para exibir esse indicador. Além de agrupar e marcar itens nas barras de ferramentas, o novo design apresenta outras mudanças. Os ícones usam renderização monocromática em mais lugares, inclusive nas barras de ferramentas.

A paleta monocromática reduz o ruído visual, enfatiza o conteúdo do seu app e mantém a legibilidade.

Você ainda pode tingir ícones com o modificador "tint()". Mas use-o para transmitir significado, como uma call-to-action ou próxima etapa, não apenas para efeito visual.

No novo design, um efeito de borda de rolagem automático mantém os controles legíveis.

É um efeito sutil de desfoque e fade aplicado ao conteúdo das barras de ferramentas do sistema. Se o app tiver fundos extras ou efeitos de escurecimento atrás dos itens da barra, remova-os porque eles vão interferir no efeito.

Nas interfaces mais densas com muitos elementos flutuantes, como no app Calendário, ajuste a nitidez do efeito no conteúdo com o modificador "scrollEdgeEffectStyle".

Isso é tudo sobre as barras de ferramentas. Agora vou mostrar como criar experiências de busca inteligentes no novo design. Há grandes atualizações nos dois padrões principais para busca em todas as plataformas. "Buscar na barra de ferramentas" coloca o campo na parte inferior da tela, com fácil acesso. No iPad e no Mac, ele aparece mais à direita na barra de ferramentas. O segundo padrão é tratar como uma página dedicada em um app de várias abas. No app Landmarks, coloquei a busca no canto superior direito. Ao usar esse posicionamento, você deve disponibilizar o máximo de conteúdo do app por meio da busca.

O campo de busca aparece em sua própria superfície de Liquid Glass.

Basta um toque para ativá-lo e exibir o teclado. Para obter essa variante no Landmarks, apliquei o modificador "searchable" no "NavigationSplitView". Declarar o modificador aqui indica que a busca se aplica a todo o "NavigationSplitView", não apenas a uma das colunas.

No iPhone, essa variante se adapta automaticamente para deixar o campo de busca na parte inferior da tela.

Dependendo do tamanho do dispositivo, do número de botões na barra de ferramentas e de outros fatores, o sistema pode optar por minimizar o campo de busca em um botão na barra de ferramentas, como ocorre aqui no Mail.

Quando toco no botão, o campo de busca completo aparece acima do teclado.

Para optar explicitamente pelo comportamento minimizado, supondo que a busca não é uma parte principal da experiência do app, use o novo modificador "searchToolbarBehavior".

A busca em apps com várias abas geralmente é feita em uma página de busca dedicada.

O padrão é usado por apps em todas as nossas plataformas, como o app Saúde, para verificar as tendências de preparo físico. Para fazer isso no app, defina uma função de busca em uma das abas e coloque o modificador "searchable" no TabView.

Quando alguém seleciona essa aba, um campo de busca toma o lugar da barra de abas, e o conteúdo correspondente é mostrado. As pessoas podem interagir com as sugestões de navegação ou tocar no campo de busca para abrir o teclado e continuar com termos de busca específicos.

No iPad e no Mac, quando alguém seleciona a aba Buscar, o campo de busca aparece centralizado, acima das sugestões de navegação dos apps. Esses padrões conferem flexibilidade e controle na experiência de busca no app. Por falar em controle, vamos conhecer as atualizações nos controles padrão.

O novo design cria uma forte semelhança entre as plataformas para controles, como botões, controles deslizantes, menus e muito mais.

Vou começar com as atualizações em botões, um dos controles mais comuns. Os botões com bordas agora têm um formato de cápsula que harmoniza com os cantos curvos do novo design. Os controles mini, pequeno e médio no macOS mantêm um formato retangular arredondada, que preserva a densidade horizontal.

E o modificador "buttonBorderShape" existente permite especificar o formato para qualquer tamanho.

As alturas do controle foram atualizadas no novo design.

A maioria dos controles no macOS é um pouco mais alta, proporcionando mais espaço ao redor do rótulo do controle e aumentando o tamanho dos destinos de clique.

Para ter compatibilidade com os layouts de alta densidade existentes, como inspetores complexos e pop-overs, o modificador "controlSize" pode ser aplicado a um único controle ou a um conjunto de controles. Para as ações mais importantes, agora há suporte para botões extragrandes. Por último, mas não menos importante, os estilos de botões "glass" e "glassProminent" aplicam o Liquid Glass a qualquer botão do seu app.

Vamos falar sobre os controles deslizantes, que aprenderam alguns truques.

Agora eles podem ter marcações. As marcações aparecem automaticamente ao inicializar um controle deslizante com um parâmetro "step". Você também colocar marcações individuais manualmente.

Use o fechamento "ticks" para especificar a localização, como estou fazendo aqui nas marcações em 60% e 90%.

Os controles deslizantes permitem iniciar o preenchimento da faixa em um local específico. Isso é útil nos valores que podem ser ajustados para a esquerda ou direita a partir de um valor padrão não predominante, como selecionar velocidades de reprodução mais rápidas ou mais lentas.

Especifique o ponto de partida com o parâmetro "neutralValue". Os menus em todas as plataformas têm um novo design e um layout mais consistente. Os ícones estão consistentemente na borda esquerda e, agora, também são usados no macOS. A mesma API que usa inicializadores de controle padrão ou de rótulo agora cria o mesmo resultado em ambas as plataformas. Além das atualizações nos controles da SwiftUI, há novas APIs para atualizar os controles para o novo design.

Os cantos de muitos controles estão alinhados perfeitamente dentro dos contêineres, mesmo que o contêiner seja o iPhone. Isso é chamado de "concentricidade de canto". Por exemplo, um botão posicionado na parte inferior de uma folha deve estar centralizado com os cantos da folha.

Para criar visualizações que mantenham automaticamente a concentricidade com o contêiner, use o formato de retângulo concêntrico. Passe a configuração "containerConcentric" para

o parâmetro "corner" de um retângulo, e o formato corresponderá automaticamente ao contêiner, em diferentes telas e formas de janelas. A melhor maneira de adotar o novo design é usar estruturas de apps, barras de ferramentas, posicionamentos de busca e controles padrão. No entanto, às vezes, o app pode precisar ser um pouco mais personalizado. Agora, vou mostrar como criar elementos de Liquid Glass personalizados para o seu app. O Mapas é um ótimo exemplo de caso de uso. Seus controles de Liquid Glass personalizados flutuam perfeitamente sobre o conteúdo do mapa.

De modo semelhante, vou adicionar selos ao app Landmarks para cada ponto de referência visitado. Vamos começar criando uma visualização de selo personalizada com o efeito de Liquid Glass. Para adicionar o efeito de vidro às suas visualizações personalizadas, use o modificador "glassEffect". Por padrão, um efeito de vidro é aplicado em um formato de cápsula atrás do conteúdo.

O SwiftUI usa automaticamente uma cor de texto vibrante que se adapta para manter a legibilidade em fundos coloridos.

Personalize o formato do efeito de vidro, definindo um formato para o modificador.

Para visualizações especialmente importantes, use o modificador "tint".

Assim como nos botões da barra de ferramentas, use-o para transmitir significado, não apenas para efeito visual.

Assim como o texto dentro de um efeito de vidro, "tint" também usa uma cor vibrante que se adapta ao conteúdo por trás dela. No iOS, nos controles personalizados ou contêineres com elementos interativos, adicione o modificador "interactive" ao efeito de vidro. O Liquid Glass reage à interação mudando de tamanho, saltando levemente e cintilando, acompanhando o efeito usado pelos controles deslizantes e botões da barra de ferramentas. Agora que personalizamos o selo, vamos reunir vários selos para que eles interajam e se mesclem. Para combinar vários elementos de vidro, use "GlassEffectContainer". Esse agrupamento é essencial para a precisão visual. O material Liquid Glass reflete e refrata as luzes, captando as cores do conteúdo ao redor. Esse efeito é alcançado por meio da amostragem de conteúdo de uma área maior do que ele próprio.

Porém, o vidro não pode criar amostras de outros vidros, por esse motivo, elementos de vidro próximos em contêineres diferentes causará um comportamento inconsistente.

Usar um contêiner de vidro permite que esses elementos tenham a mesma região de amostragem, resultando em um visual consistente.

No app Landmarks, estou usando o "GlassEffectContainer" para agrupar meus selos. Ao expandir os selos, consigo essa bela transformação fluida.

Adicione essas transições ao seu próprio contêiner de vidro usando o modificador "glassEffectID".

Para fazer essa configuração, primeiro eu declaro um namespace local. Depois, associo o namespace a cada elemento de efeito de vidro na pilha expandida de selos e ao botão de ativação/desativação. Agora, quando eu toco no botão novamente, os selos de prêmio são reabsorvidos perfeitamente. O efeito de Liquid Glass é uma excelente maneira de destacar a funcionalidade que torna o seu app realmente único. Espero que tenham gostado dessa rápida apresentação sobre aplicar o novo design e usar o Liquid Glass. Agora é com você. Use o novo design no seu app com o Xcode 26. Você vai gostar de todos os benefícios dos controles padrão, sem fazer nenhum esforço.

Revise o fluxo do seu app e identifique se alguma visualização precisa de alterações, prestando atenção especial às cores de fundo por trás das folhas e barras de ferramentas que você pode remover. Por fim, crie componentes expressivos com o Liquid Glass que realmente destaquem seu app. Espero que você curta muito experimentar o novo design. Continue a brilhar!