-
Crie um app em SwiftUI com o novo design
Descubra como o Liquid Glass transforma a aparência e experiência do seu app. Confira como esse novo material aprimora barras de ferramentas, controles e estruturas de apps em todas as plataformas, proporcionando interações fluidas e integrando perfeitamente seu app ao sistema. Saiba como adotar novas APIs que ajudam você a aproveitar ao máximo o Liquid Glass.
Capítulos
- 0:00 - Introdução
- 3:07 - Estrutura do app
- 7:49 - Barras de ferramentas
- 11:10 - Busca
- 14:03 - Controles
- 17:57 - Efeitos de Liquid Glass
- 21:31 - Próximas etapas
Recursos
- Applying Liquid Glass to custom views
- Landmarks: Building an app with Liquid Glass
- Adopting Liquid Glass
Vídeos relacionados
WWDC25
-
Buscar neste vídeo...
-
-
- 0:00 - Introdução
O iOS 26 e o macOS Tahoe trazem o Liquid Glass, um novo material adaptativo para controles e elementos de navegação inspirados em vidro e líquido. Esse material muda de cor conforme alguém rola a tela e torna controles, como botões de alternância e controles deslizantes, mais interativos e visualmente atraentes. As atualizações se aplicam a todas as plataformas Apple e incluem alterações em componentes estruturais, como "TabView" e "NavigationSplitView", barras de ferramentas, experiências de pesquisa e a introdução de novas APIs para desenvolvedores personalizarem a interface de seus apps. O app Landmarks demonstra esses novos recursos.
- 3:07 - Estrutura do app
A estrutura do app é atualizada com APIs refinadas, incluindo "NavigationSplitView", "TabView" e "Sheets", todas com o novo design do Liquid Glass. "NavigationSplitView" agora tem uma barra lateral flutuante de Liquid Glass com um modificador "backgroundExtensionEffect", que permite que as visualizações se estendam além da área segura sem serem cortadas. "TabViews" no iPhone têm uma barra de abas flutuante, que pode se minimizar ao rolar a tela, melhorando a visibilidade do conteúdo, e pode incluir uma visualização acessória na parte inferior para controles adicionais. "Sheets" agora têm um fundo Liquid Glass que faz a transições suaves entre alturas parcial e total. Elas também podem surgir a partir dos botões que as apresentam, criando uma experiência de usuário fluida e integrada. Outras apresentações, como menus, alertas e popovers, também fluem suavemente a partir de controles de Liquid Glass. As caixas de diálogo agora se transformam automaticamente a partir dos botões que as apresentam.
- 7:49 - Barras de ferramentas
O novo design do app apresenta barras de ferramentas flutuantes em superfícies Liquid Glass com agrupamento automático de itens. Você pode usar a API ToolbarSpacer para criar agrupamentos e espaçamentos personalizados, melhorando a clareza visual. Adicione badges com uma única linha de código para indicar notificações. Ícones monocromáticos reduzem o ruído visual, e um efeito automático na borda de rolagem desfoca o conteúdo sob barras de ferramentas para facilitar a legibilidade. É possível remover fundos extras e ajustar a interface para um design mais compacto.
- 11:10 - Busca
O novo design apresenta dois padrões principais de busca em todas as plataformas: Busca na barra de ferramentas. O campo de busca fica na parte inferior da tela no iPhone, no canto superior direito no iPad e Mac, ou minimizado em um botão que se expande ao ser tocado. Página de busca dedicada. A busca é acessada por meio de uma aba, substituindo a barra de abas por um campo de busca e pelo conteúdo do app. O campo de busca aparece centralizado acima das sugestões no iPad e no Mac.
- 14:03 - Controles
O novo design apresenta uma aparência familiar e consistente entre plataformas para diverso controles. Por padrão, os botões agora têm uma forma de cápsula, com alturas maiores no macOS para facilitar a leitura e oferecer alvos de clique maiores. Botões extragrandes e novos estilos de vidro também estão disponíveis. Os controles deslizantes agora aceitam marcações, posicionamento manual dessas marcações e preenchimento inicial da faixa com valores específicos. Os menus receberam um design renovado com posicionamento consistente de ícones entre as plataformas. O novo design também inclui concentricidade de cantos, garantindo que os controles se alinhem perfeitamente dentro dos seus contêineres.
- 17:57 - Efeitos de Liquid Glass
Para personalizar ainda mais um app, você pode criar elementos Liquid Glass personalizados. Por exemplo, o app Landmarks usa selos com o efeito Liquid Glass. Para isso, aplique o modificador "glassEffect" a visualizações personalizadas, que você pode moldar e colorir para dar ênfase. O modificador "interactive" está disponível para os controles do iOS, permitindo dimensionamento, oscilação e cintilação após a interação. Agrupe vários elementos de vidro dentro de um "GlassEffectContainer" para garantir resultados visuais consistentes, pois o vidro não pode amostrar outros vidros. Crie transições entre elementos de vidro usando o modificador "glassEffectID", que permite efeitos de transformação fluida. Essa técnica realça o apelo visual e a singularidade de um app, destacando-o.
- 21:31 - Próximas etapas
O novo design do Xcode 26 inclui controles padrão que fornecem melhorias automáticas e Liquid Glass para criar componentes expressivos. Revise os fluxos do seu app, remova cores de fundo desnecessárias e aproveite o Liquid Glass para destacar seus apps.