Crie um app do UIKit com o novo design

Olá! Esta é a sessão “Criar um app do UIKit com o novo design”. Meu nome é Sanaa. Sou engineer na equipe UIKit. Neste vídeo, vou mostrar como adotar o novo design e usar o Liquid Glass nos seus apps.

O iOS 26 apresenta um novo design, atualizando a aparência dos materiais e controles em todo o sistema. No centro desse design está o novo material Liquid Glass. Ele é translúcido, dinâmico e vivo. Em todo o sistema, os componentes e materiais do UIKit foram atualizados com o Liquid Glass.

Os apps ficam com essa nova aparência assim que você recompila com o novo SDK. Confira os vídeos de design "Conhecer o Liquid Glass" e "Criar com o sistema de design do Liquid Glass" para ter uma visão geral e aprender as melhores práticas do novo sistema de design.

Saiba como visualizações em abas e Split Views são usadas no novo sistema de design e flutuam sobre o conteúdo.

Depois, explicarei a nova aparência e comportamento das barras de navegação e de ferramentas, que agora são transparentes, contêm botões de Liquid Glass e dão mais espaço ao conteúdo.

E vamos explorar as atualizações nas apresentações, incluindo a nova transição de zoom e o novo comportamento para alertas e menus action sheet.

Descreverei como a experiência de busca foi atualizada, com mais opções para o posicionamento da barra de busca.

Mostrarei controles, como botões e controles deslizantes e explicarei como adotar a aparência do Liquid Glass em elementos da interface.

Vamos começar com visualizações em abas e Split Views.

O UITabBarController e o UISplitViewController foram atualizados com a nova aparência de Liquid Glass.

As barras de abas possibilitam uma navegação fixa no app. Elas fornecem uma visão geral do seu app e ajudam a mudar rapidamente de uma seção para outra. No novo design, a barra de abas do iPhone flutua sobre o conteúdo e pode ser configurada para minimizar na rolagem, mantendo o foco no conteúdo.

Para que a barra de abas seja minimizada na rolagem, defina tabBarMinimizeBehavior com a direção desejada. Aqui, o app TV está definido como .onScrollDown. A barra de abas é expandida ao rolar na direção oposta.

Acima da barra de abas, pode haver uma visualização de acessório, como o minirreprodutor no app Música. O UITabBarController exibe a accessoryView acima da barra de abas, combinando com a sua aparência. Com a barra de abas minimizada, a visualização de acessório é animada e enviada para baixo, alinhando-se à barra de abas.

Para definir um acessório inferior, crie um UITabAccessory com a visualização de conteúdo. Depois, defina a propriedade bottomAccessory no UITabBarController.

Quando o acessório está alinhado com a barra de abas, há menos espaço para exibi-lo. Aqui, o app Música está acomodando o espaço reduzido, escondendo alguns controles de mídia no minirreprodutor.

Para ajustar a visualização de acessório, observe as alterações no traço tabAccessoryEnvironment. Confira se a visualização do acessório está alinhada com a barra de abas e, se necessário, atualize-a.

Use o updateProperties para atualizar a visualização de acessório com o comportamento de rastreamento automático de traços.

Para saber mais sobre rastreamento automático de traços e o novo método updateProperties, confira "Novidades do UIKit".

No iPad, as barras lateral e de abas também adotam o Liquid Glass. Elas flutuam sobre o conteúdo do seu app ao usar o UITabBarController. Ao adotar a UITab e o UITabGroup, seu app tem adaptabilidade automática, permitindo alternar entre a barra lateral e de abas no iPad. Para saber mais, confira os vídeos "Aprimorar a experiência nas barras de abas e lateral no iPadOS" da WWDC24 e "Deixar o seu app do UIKit mais flexível" da WWDC25.

Com o novo design, as barras laterais ficam melhores com conteúdo vibrante ao fundo, combinando com a rolagem principal. O app TV no iOS 26 é um ótimo exemplo disso. A arte parece se estender por toda a tela e por baixo da barra lateral. Ela fica centralizada e totalmente visível. Esse efeito é usado em muitos apps no iOS 26, e o seu app também ficará ótimo usando a nova UIBackgroundExtensionView.

A ExtensionView deve cobrir toda a largura, incluindo a margem segura à esquerda usada pela barra lateral. A entrada do efeito é uma visualização de conteúdo que você fornece. Por exemplo, uma imageView. Ela é colocada na hierarquia de visualização e se estende para preencher o espaço vazio.

Este é um efeito especial que deve ser usado com propósito. Seções como a lista de episódios na parte inferior rolam por baixo da barra lateral e não precisam ser estendidas.

Elementos sobre a arte, como o nome e a descrição do programa, também não devem ser estendidos. Adicione esses elementos como irmãos da extensão, e não como subvisualizações.

O controle de visualização do programa já tem uma visualização da arte do pôster. Para adicionar o efeito, crie a backgroundExtensionView e atribua imageView à propriedade contentView. Adicione a visualização de extensão à hierarquia. Por fim, adicione a visualização de detalhes como um irmão da extensionView. Por padrão, a contentView preenche a área segura da extensionView. As bordas com uma área segura positiva dentro são estendidas para preencher o espaço vazio. Neste exemplo, elas são a borda superior das barras de navegação e de status e a borda principal da barra lateral. Como o app TV tem pouco conteúdo na barra de navegação que possa cobrir a arte, ele não precisa do efeito de extensão no topo. Em vez disso, a contentView é posicionada manualmente fora da área segura no topo.

Vou voltar ao exemplo de código para ajustar manualmente o layout do efeito. Primeiro, defina a automaticallyPlacesContentView como false na extensionView. Use restrições de AutoLayout para posicionar a imageView no topo da tela. Para estender a imageView sob a barra lateral, adicione uma restrição para a leadingAnchor igual ao safeAreaLayoutGuide da extensionView.

E também adicione restrições para as âncoras à direita e inferior.

Agora explicarei a aparência e o comportamento das barras de navegação e de ferramentas no novo design. No iOS 26, as barras de navegação e de ferramentas também adotam a nova aparência de vidro e flutuam sobre o conteúdo. Ao especificar barButtonItem da barra de ferramentas ou de navegação, o sistema os separa em grupos visuais de itens. Cada grupo compartilha um fundo de vidro.

Por padrão, o barButtonItem com imagens tem o mesmo fundo de outros botões de imagem. Grupos de botões com vários itens também compartilham os fundos.

Botões de texto, os botões padrão OK e Fechar do sistema e botões com estilo destacado têm fundos de vidro separados. Este exemplo mostra essas regras em ação: o botão Selecionar no início e o botão OK no final não têm o mesmo fundo de vidro dos quatro botões de imagem no meio. Para configurar a navigationBar, atribua todos os BarButtonItems diretamente a rightBarButtonItems do navigationItem. Isso aplica o comportamento padrão do sistema que descrevi anteriormente. Para separar ainda mais os itens em grupos distintos, use um item fixedSpace. Neste exemplo, quero separar o botão Compartilhar, então insiro fixedSpace entre os botões Compartilhar e Informações.

Os botões da barra usam a labelColor por padrão para melhorar a legibilidade. Se for necessário usar cor para transmitir informações sobre a ação, defina outra cor.

Por exemplo, vou atualizar o botão Sinalizar para usar systemOrange como a tintColor.

Apenas o símbolo de Sinalizar será colorido.

Para colorir o fundo do botão, defina o estilo como destacado.

Antes, talvez você usasse espaços flexíveis para distribuir os itens da barra de ferramentas de maneira uniforme. Com o Liquid Glass, por padrão, cada item flexibleSpace separa o fundo entre os itens.

Para distribuir os itens uniformemente e agrupá-los em um único fundo, use espaços flexíveis com o hidesSharedBackground definido como false.

No iOS 26, o UINavigationItem oferece mais controle sobre as áreas de título e título grande na navigationBar. Isso inclui a adição de um novo subtítulo renderizado abaixo do título.

Use strings atribuídas para ajustar em detalhes o título e o subtítulo.

Especifique visualizações para adicionar elementos interativos. Os títulos grandes agora ficam no topo da rolagem e rolam junto com o conteúdo abaixo da barra.

Para manter o título grande visível, estenda a visualização de rolagem sob a navigationBar.

Aqui, o Mail coloca o campo de busca na barra de ferramentas e mostra o número de e-mails não lidos na barra de navegação usando a nova API de subtítulo.

Ao filtrar e-mails, o Mail exibe o filtro atual em um botão abaixo do título grande. O botão é definido como largeSubtitleView no navigationItem, aparecendo abaixo do título grande na navigationBar. Como parte do novo sistema de design no iOS 26, o fundo da barra agora é transparente por padrão. Remova qualquer personalização de fundo das barras de navegação e de ferramentas. Usar a UIBarAppearance ou a backgroundColor interfere na aparência de vidro.

Os botões da barra usam um fundo de vidro. Organize o conteúdo da customView usando as margens de layout para obter o espaçamento correto. Todas as visualizações de rolagem sob barras de navegação ou de ferramentas aplicam um tratamento visual. Isso garante a legibilidade do conteúdo sobreposto nas barras. Isso é chamado de efeito edge. Esse novo efeito não é só para as barras do sistema. Pode ser usado em contêineres de visualizações que ficam sobre uma borda da visualização de rolagem. Este exemplo mostra dois botões sobrepondo a borda inferior da visualização de rolagem. Para inserir um efeito de borda atrás dessa pilha de botões, crie scrollEdgeElementContainerInteraction, atribua contentScrollView e edge e adicione a buttonsContainerView. Para interfaces mais densas, com elementos flutuantes, escolha um estilo rígido nas bordas da visualização de rolagem. A aparência é similar aos fundos padrão das barras no iOS 18. Ative-o definindo o estilo do efeito de borda como .hard. O iOS 18 lançou uma transição de zoom sempre interativa e interrompível. O iOS 26 traz a mesma fluidez para a transição padrão de deslizar na navegação.

Aqui, estou usando o app Notas. Posso abrir uma nota, e o app ainda responde durante a transição.

Posso deslizar para trás se escolhi a nota errada ou começar a rolar enquanto a transição ainda está acontecendo. Também posso tocar várias vezes no botão de voltar para retornar ainda mais.

Isso é ótimo porque as pessoas podem interagir com seu app a qualquer momento. Mas isso também significa que seu app precisa estar pronto para interagir a qualquer momento. Para lidar corretamente com transições interrompíveis, confira o vídeo "Aprimorar as animações e transições da interface". Agora posso deslizar para trás em qualquer lugar da área de conteúdo, não só na borda esquerda. O novo gesto de deslizar para trás no conteúdo verifica outras interações concorrentes.

Ações de deslizar impedem o movimento de deslizar para trás no conteúdo. No entanto, áreas não interativas permitem o movimento.

Para priorizar o gesto de deslizar para trás no conteúdo, os gestos personalizados devem ter requisitos de falha no interactiveContentPopGestureRecognizer.

O novo design também se estende às apresentações, incluindo a nova transição dinâmica de zoom. Quando uma apresentação, como menu ou popover, vem de um botão de vidro, o botão se transforma na sobreposição.

Isso mantém a continuidade visual entre a origem e a apresentação durante toda a animação.

Menus têm esse comportamento automaticamente. Popovers também têm essa nova animação quando a origem é o barButtonItem. As páginas podem adotar esse efeito usando a transição de zoom atualizada. Defina a transição preferida no viewController apresentado como .zoom e retorne o barButtonItem de origem no fechamento.

As páginas têm um design atualizado no iOS 26. Elas adaptam a aparência de alturas menores para maiores. Para aproveitar a nova aparência de vidro, remova qualquer fundo personalizado.

As ActionSheets no iPad são ancoradas às suas visualizações de origem. A partir do iOS 26, elas se comportarão do mesmo modo no iPhone, aparecendo sobre a visualização de origem.

No alertController, defina o item ou a visualização de origem no popoverPresentationController, independentemente do dispositivo. Atribuir a visualização de origem aplica automaticamente as novas transições ao menu action sheet.

O menu action sheet apresentado em linha não tem botão de cancelar, pois tocar em outro lugar já cancela. Se você não definir a origem, o menu action sheet será centralizado e terá botão de cancelar. O iOS 26 traz uma nova experiência de busca mais integrada, permitindo posicionar o campo de busca onde for melhor para o app. No iPhone, a barra de busca se desloca para a barra de ferramentas, mantendo o campo de busca acessível.

Se já tiver uma barra de ferramentas, inclua o searchBarPlacementBarButtonItem junto com os outros botões da barra. Isso posiciona a busca exatamente onde você quer.

Ela aparece como campo expandido ou botão na barra de ferramentas, conforme o espaço disponível.

No iPad, para busca universalmente acessível, siga o padrão da barra do macOS. Coloque a busca na borda direita de navigationBar. Isso é ideal para Split Views. Para ativar esse comportamento, defina a searchBarPlacementAllowsExternalIntegration no item de navegação como true.

Para que a busca fique disponível ao trocar de visualizações, use o UITabBarController. Agora é possível incluir uma aba distinta para a busca no lado direito. Ao tocar, o botão de busca vira um campo, enquanto os outros botões se contraem.

Essa tabView de busca é um ótimo lugar para mostrar sugestões de busca. Por padrão, uma das sugestões pode ser selecionada ou o campo de busca pode ser tocado para iniciar a busca.

Para ativar o campo de busca ao tocar na aba de busca, defina a automaticallyActivateSearch como true nessa aba.

Para visualizações dedicadas à busca, considere incluir a busca como uma seção na barra de abas ou lateral. A barra de busca pode ser integrada na borda direita da barra de navegação, empilhada ou centralizada na largura regular do iPad. Para centralizar a searchBar, use integratedCentered como preferredSearchBarPlacement. Quando a tabBar está visível, a searchBar fica abaixo. Agora, vou falar sobre o visual atualizado dos controles.

Os controles no iOS foram redesenhados com uma nova aparência, mas continuam familiares. Os tamanhos foram atualizados para controles como UISwitch. Confira se os seus layouts estão configurados para acomodar atualizações de tamanho. Miniaturas de controles, como os de switch e segmentedControl, agora têm uma nova aparência de Liquid Glass durante interações.

Além dos estilos de botão existentes, dois novos visuais de vidro estão disponíveis com a UIButtonConfiguration. Use a configuração .glass() para obter o vidro padrão. E use .prominentGlass() para obter vidro com a cor de destaque do app. Nos controles deslizantes, além dos efeitos de Liquid Glass na miniatura, agora eles aproveitam o momento e esticam ao serem movidos. No iOS 26, os controles deslizantes podem ter marcas de verificação com uma TrackConfiguration. Essa configuração é usada para definir a aparência e o comportamento do controle deslizante. Para limitar este controle deslizante de velocidade a cinco valores, defina a configuração como allowsTickValuesOnly e cinco marcações.

Os controles deslizantes também podem usar um valor neutro, ancorando o preenchimento em qualquer ponto, não só na extremidade mínima. Isso permite que o preenchimento do controle deslizante mostre a diferença entre o valor selecionado e o neutro. Neste exemplo, o preenchimento do controle deslizante mostra uma velocidade maior que a padrão. Os controles deslizantes podem não ter uma miniatura para parecerem uma barra de progresso quando não forem interativos. Isso é ótimo para reprodução de mídia, para não distrair com uma miniatura grande. São casos em que os controles do sistema adotaram o Liquid Glass. Para casos especiais, o UIKit também oferece APIs para adotar o novo visual e aparência do Liquid Glass. Ao usar o Liquid Glass na interface, tenha em mente a intenção do design desse efeito. O Liquid Glass é diferente de outros efeitos visuais, como UIBlurEffect. Por isso, deve ser usado em locais específicos apropriados. O Liquid Glass foi projetado para ser uma camada interativa. Ele flutua sobre o conteúdo, logo abaixo dos dedos, e oferece os controles principais em que o usuário toca. Por isso, limite o uso do Liquid Glass aos elementos mais importantes do app. Sempre que possível, use visualizações e controles do sistema para ter a melhor experiência.

O Mapas usa Liquid Glass em botões personalizados que flutuam sobre o mapa. Eles ficam naturais, como uma camada de controle distinta. Por isso, são ótimas opções para usar o efeito de vidro, criando uma ilusão flutuante. Quando a página se expande, o Mapas remove os botões. Isso evita que elementos de vidro se sobreponham e mantém a ilusão de uma única camada flutuante de vidro.

Para usar vidro em visualizações personalizadas, crie uma UIVisualEffectView, um novo UIGlassEffect e, em um bloco de animação, defina o efeito.

O vidro aparece usando uma animação especial de materialização.

Por padrão, o vidro tem formato de cápsula. Para personalizar a forma, use a nova API cornerConfiguration.

O vidro tem aparência clara e escura. Ele se adapta ao userInterfaceStyle selecionado. Ao adicionar vidro a um contêiner de vidro existente, ele adapta sua aparência automaticamente. Para que os cantos se adaptem automaticamente ao contêiner, use a configuração de canto .containerRelative. Ao aproximar a visualização do canto do contêiner, o cornerRadius se ajusta automaticamente.

Ao se afastar, o raio do canto diminui para manter a concentricidade automaticamente. O vidro adapta a aparência com base no seu tamanho.

Um tamanho maior é mais opaco.

Um tamanho menor é mais transparente e alterna entre o modo claro e escuro para aumentar o contraste.

Para adicionar conteúdo, como rótulos e imagens, use a contentView da visualEffectView. O rótulo ficará automaticamente vibrante com base na textColor. Isso garante legibilidade em diversos tipos de fundo.

De acordo com as cores atrás, o vidro e seu conteúdo mudam automaticamente entre os modos claro e escuro, usando cores dinâmicas.

Para destacar visualizações importantes, defina a .tintColor no vidro e anime-a junto com outras propriedades do vidro. Anime as mudanças no conteúdo, como textColor, aqui ao mesmo tempo.

Para usar uma cor de destaque personalizada no vidro, crie um novo UIGlassEffect, atribua a tintColor personalizada e anime o efeito para o novo UIGlassEffect. A cor do vidro se adapta automaticamente para uma versão vibrante. Para remover conteúdo sobre o vidro, anime o alfa do conteúdo até zero.

Elementos interativos do sistema, como botões, respondem às interações do usuário. Ao tocar no botão, ele expande e faz um efeito de vai e volta. Para ter esse mesmo tipo de interatividade em suas visualizações personalizadas, defina a isInteractive como true no glassEffect.

Por fim, quando não precisar mais do vidro na tela, remova-o com uma animação definindo o efeito como nil.

Sempre prefira definir a propriedade do efeito em vez de alfa para que o vidro apareça e desapareça com a animação apropriada. Nesses exemplos, havia apenas uma visualização usando o Liquid Glass. O vidro tem comportamentos adicionais integrados quando vários elementos interagem. O Liquid Glass pode se mesclar entre diferentes formas.

Para mesclar visualizações de vidro dinamicamente, use o UIGlassContainerEffect, configure a UIVisualEffectView com ele, crie visualizações de vidro e adicione-as como subvisualizações à contentView do contêiner. Enquanto houver espaço entre elas, elas aparecem como duas visualizações separadas.

Somente quando se aproximam, elas começam a se misturar como pequenas gotas d'água. Para controlar a distância em que começam a interagir, use a propriedade de espaçamento no UIGlassContainerEffect.

Ao animar para um quadro sobreposto, as visualizações de vidro se combinam em uma única forma. Para dividir o vidro em vários elementos, primeiro adicione-os na mesma posição sem animação. Então, anime-os juntos.

O UIGlassContainerEffect faz mais do que apenas permitir animações. Ele garante uma adaptação uniforme. O vidro se adapta dinamicamente ao fundo, mas mantém uma aparência consistente.

Revisei os componentes e materiais do UIKit atualizados com o Liquid Glass. O UIKit oferece as ferramentas necessárias para atualizar seu app para o novo design. A partir daqui, comece a criar seu app com o Xcode 26. Grande parte do novo design funcionará no seu app imediatamente. Analise cada tela do seu app e identifique quais visualizações se destacam.

Se você tem controles personalizados, decida se os controles padrão do UIKit podem ser mais adequados. Por fim, defina como destacar seus casos especiais com o Liquid Glass.

Estou ansiosa para ver seu app depois que você adotar o novo sistema de design. Agradeço a participação.