-
Crie um app do UIKit com o novo design
Atualize seu app do UIKit para aproveitar ao máximo o novo sistema de design. Vamos nos aprofundar nas principais mudanças nas visualizações em abas, Split Views, barras, apresentações, busca e controles e mostrar como usar o Liquid Glass em sua interface de usuário personalizada. Para aproveitar ao máximo este vídeo, recomendamos assistir primeiro à sessão "Conheça o novo sistema de design” para obter orientações gerais sobre design.
Capítulos
- 0:00 - Introdução
- 1:55 - Visualizações em abas e Split Views
- 7:19 - Navegação e barras de ferramentas
- 13:31 - Apresentações
- 15:18 - Busca
- 17:24 - Controles
- 19:15 - Elementos personalizados
- 25:01 - Próximas etapas
Recursos
Vídeos relacionados
WWDC25
- Conheça o Liquid Glass
- Conheça o novo sistema de design
- Deixe o seu app do UIKit mais flexível
- Novidades do UIKit
WWDC24
-
Buscar neste vídeo...
-
-
2:31 - Minimize tab bar on scroll
// Minimize tab bar on scroll tabBarController.tabBarMinimizeBehavior = .onScrollDown -
3:08 - Add a bottom accessory
// Add a bottom accessory let nowPlayingView = NowPlayingView() let accessory = UITabAccessory(contentView: nowPlayingView) tabBarController.bottomAccessory = accessory -
3:35 - Update the accessory with the tabAccessoryEnvironment trait
// Update the accessory with the trait registerForTraitChanges([UITraitTabAccessoryEnvironment.self]) { (view: MiniPlayerView, _) in let isInline = view.traitCollection.tabAccessoryEnvironment == .inline view.updatePlayerAppearance(inline: isInline) } // Automatic trait tracking with updateProperties() override func updateProperties() { super.updateProperties() let isInline = traitCollection.tabAccessoryEnvironment == .inline updatePlayerAppearance(inline: isInline) } -
5:51 - Extend content under the sidebar
// Extend content underneath the sidebar let posterImageView = UIImageView(image: ...) let extensionView = UIBackgroundExtensionView() extensionView.contentView = posterImageView view.addSubview(extensionView) let detailsView = ShowDetailsView() view.addSubview(detailsView) -
6:51 - Adjust the effect layout
// Adjust the effect layout let posterImageView = UIImageView(image: ...) let extensionView = UIBackgroundExtensionView() extensionView.contentView = posterImageView extensionView.automaticallyPlacesContentView = false view.addSubview(extensionView) posterImageView.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ posterImageView.topAnchor.constraint(equalTo: extensionView.topAnchor), posterImageView.leadingAnchor.constraint(equalTo: extensionView.safeAreaLayoutGuide.leadingAnchor), posterImageView.trailingAnchor.constraint(equalTo: extensionView.safeAreaLayoutGuide.trailingAnchor), posterImageView.bottomAnchor.constraint(equalTo: extensionView.safeAreaLayoutGuide.bottomAnchor), ]) -
8:38 - Custom grouping
// Custom grouping navigationItem.rightBarButtonItems = [ doneButton, flagButton, folderButton, infoButton, .fixedSpace(0), shareButton, selectButton ] -
8:53 - UIBarButtonItem tint color and style
// Tint color and style let flagButton = UIBarButtonItem(image: UIImage(systemName: "flag.fill")) flagButton.tintColor = .systemOrange flagButton.style = .prominent -
9:10 - Toolbar with evenly distributed items in a single background
// Toolbar with evenly distributed items, grouped in a single background. let flexibleSpace = UIBarButtonItem.flexibleSpace() flexibleSpace.hidesSharedBackground = false toolbarItems = [ .init(image: UIImage(systemName: "location")), flexibleSpace, .init(image: UIImage(systemName: "number")), flexibleSpace, .init(image: UIImage(systemName: "camera")), flexibleSpace, .init(image: UIImage(systemName: "trash")), ] -
10:15 - Titles and subtitles
// Titles and subtitles navigationItem.title = "Inbox" navigationItem.subtitle = "49 Unread" -
10:27 - Large subtitle view
// Titles and subtitles navigationItem.title = "Inbox" navigationItem.largeSubtitleView = filterButton -
11:20 - Edge effect for a custom container
// Edge effect’s custom container let interaction = UIScrollEdgeElementContainerInteraction() interaction.scrollView = contentScrollView interaction.edge = .bottom buttonsContainerView.addInteraction(interaction) -
11:48 - Hard edge effect style
// Hard edge effect style scrollView.topEdgeEffect.style = .hard -
13:55 - Morph popover from its source button
// Morph popover from its source button viewController.popoverPresentationController?.sourceItem = barButtonItem -
14:07 - Morph sheet from bar button
// Morph sheet from bar button viewController.preferredTransition = .zoom { _ in folderBarButtonItem } -
14:46 - Source item for action sheets
// Setting source item for action sheets alertController.popoverPresentationController?.sourceItem = barButtonItem -
15:36 - Placing search in the toolbar
// Place search bar in a toolbar toolbarItems = [ navigationItem.searchBarPlacementBarButtonItem, .flexibleSpace(), addButton ] -
16:01 - Universally accessible search on iPad
// Place search at the trailing edge of the navigation bar navigationItem.searchBarPlacementAllowsExternalIntegration = true -
16:47 - Activate the search field when search bar is tapped
// Activate the search field when search bar is tapped searchTab.automaticallyActivatesSearch = true -
17:03 - Search as a dedicated view
// Search as a dedicated view navigationItem.preferredSearchBarPlacement = .integratedCentered -
17:52 - Buttons
// Standard glass button.configuration = .glass() // Prominent glass tintedButton.configuration = .prominentGlass() -
18:16 - Neutral slider with 5 ticks and a neutral value
// Neutral slider with 5 ticks and a neutral value slider.trackConfiguration = .init(allowsTickValuesOnly: true, neutralValue: 0.2, numberOfTicks: 5) -
18:59 - Thumbless slider
// Thumbless slider slider.sliderStyle = .thumbless -
20:28 - Glass for custom views
// Adopting glass for custom views let effectView = UIVisualEffectView() addSubview(effectView) let glassEffect = UIGlassEffect() // Animating setting the effect results in a materialize animation UIView.animate { effectView.effect = glassEffect } -
20:49 - Custom corner configuration
// Custom corner configuration UIView.animate { effectView.cornerConfiguration = .fixed(8) } -
20:54 - Dark mode
// Adapting to dark mode UIView.animate { view.overrideUserInterfaceStyle = .dark } -
21:02 - Adding glass to an existing glass container
// Adding glass to an existing glass container let container = UIVisualEffectView() container.effect = UIGlassEffect() container.contentView.addSubview(effectView) -
21:08 - Container relative corners
// Container relative corners UIView.animate { effectView.cornerConfiguration = .containerRelative() effectView.frame.origin = CGPoint(x: 10, y: 10) } -
21:23 - Container relative corners, animated
// Container relative corners UIView.animate { effectView.frame.origin = CGPoint(x: 30, y: 30) } -
21:30 - Glass adapts based on its size
// Glass adapts based on its size UIView.animate { view.overrideUserInterfaceStyle = .light effectView.bounds.size = CGSize(width: 250, height: 88) } UIView.animate { effectView.bounds.size = CGSize(width: 150, height: 44) } -
21:49 - Adding content to glass views
// Adding content to glass views let label = UILabel() label.text = "WWDC25" label.textColor = .secondaryLabel effectView.contentView.addSubview(label) -
22:15 - Applying tint color to glass
// Applying tint color to glass let glassEffect = UIGlassEffect() glassEffect.tintColor = .systemBlue UIView.animate { effectView.effect = glassEffect label.textColor = .label } -
22:33 - Using custom colors with glass
// Using custom colors with glass let glassEffect = UIGlassEffect() glassEffect.tintColor = UIColor(displayP3Red: r, green: g, blue: b, alpha: 1) UIView.animate { effectView.effect = glassEffect // Animate out the label label.alpha = 0 } -
23:03 - Enabling interactive glass behavior
// Enabling interactive glass behavior let glassEffect = UIGlassEffect() glassEffect.isInteractive = true effectView.effect = glassEffect -
23:20 - Animating glass out using dematerialize animation
// Animating glass out using dematerialize animation UIView.animate { effectView.effect = nil } -
23:52 - Adding glass elements to a container
// Adding glass elements to a container let container = UIGlassContainerEffect() let containerView = UIVisualEffectView(effect: container) let glassEffect = UIGlassEffect() let view1 = UIVisualEffectView(effect: glassEffect) let view2 = UIVisualEffectView(effect: glassEffect) containerEffectView.contentView.addSubview(view1) containerEffectView.contentView.addSubview(view2) -
24:12 - Adjusting the container spacing
// Adjusting the container spacing let containerEffect = UIGlassContainerEffect() containerEffect.spacing = 20 containerEffectView.effect = containerEffect -
24:27 - Merging two glass views
// Merging two glass views UIView.animate { view1.frame = finalFrame view2.frame = finalFrame } -
24:33 - Dividing glass into multiple views
// Dividing glass into multiple views UIView.performWithoutAnimation { for view in finalViews { containerEffectView.contentView.addSubview(view) view.frame = startFrame } } UIView.animate { for view in finalViews { view.frame = finalFrame(for: view) } }
-
-
- 0:00 - Introdução
Saiba como incorporar a nova linguagem de design do iOS 26 aos seus apps. O novo design, centrado no material dinâmico e translúcido chamado Liquid Glass, atualiza automaticamente a aparência dos apps recompilados com o SDK mais recente. Este vídeo aborda aspectos do novo design, incluindo a aparência atualizada e o comportamento das visualizações em abas, Split Views, barras de navegação, barras de ferramentas e muito mais, agora com elementos do Liquid Glass. Também há orientação sobre como trazer o Liquid Glass para elementos de interface personalizados.
- 1:55 - Visualizações em abas e Split Views
"UITabBarController" e "UISplitViewController" agora têm a aparência moderna do Liquid Glass. As barras de abas no iPhone agora flutuam acima do conteúdo e podem ser reduzidas ao rolar, aumentando o foco. Você pode personalizar esse comportamento e adicionar uma visualização de acessório acima da barra de abas, que é animada quando minimizada. No iPad, as barras de abas e barras laterais também flutuam no Liquid Glass. Os apps que adotarem "UITab" e "UITabGroup" se adaptam automaticamente entre visualizações da barra de abas e barra lateral. As barras laterais ficam melhores com conteúdo vibrante se estendendo por baixo, obtido com o novo "UIBackgroundExtensionView", que cria um efeito visual integrado.
- 7:19 - Navegação e barras de ferramentas
No iOS 26, a navegação e as barras de ferramentas têm uma nova aparência semelhante a vidro, flutuando acima do conteúdo com agrupamento de botões da barra em grupos visuais com o mesmo fundo de vidro. 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. Você pode personalizar grupos de botões, cores de tonalidade e fundos. "UINavigationItem" dá mais controle sobre o título e grandes áreas de título, e também permite definir legendas. As visualizações de rolagem sob barras de navegação ou de ferramentas aplicam um efeito de borda para legibilidade.
- 13:31 - Apresentações
O design de apresentações, menus, popovers, folhas e menus action sheet foi atualizado para aprimorar a continuidade visual. Os botões em Liquid Glass se transformam em sobreposições para menus e popovers, e as folhas agora adaptam sua aparência de alturas menores para maiores. Os menus action sheet no iPhone e no iPad ficam ancorados às suas visualizações de origem e aparecem diretamente sobre elas. Remova fundos personalizados das folhas e especifique visualizações de origem para menus action sheet e controladores de alertas, para aplicar novas transições e comportamentos. Os menus action sheet em linha no iPhone não têm mais o botão de cancelamento, pois tocar em qualquer outro lugar os fecha automaticamente.
- 15:18 - Busca
A experiência de busca no iPhone e no iPad ficou melhor no iOS 26. No iPhone, a barra de pesquisa fica na barra de ferramentas, aparecendo como um campo expandido ou botão com base no espaço. No iPad, a busca fica na borda inferior da barra de navegação para Split Views ou como uma aba dedicada em um "UITabBarController", que se expande para um campo de busca quando tocado. Você pode personalizar o posicionamento da pesquisa em barras laterais, de abas e de navegação, e habilitar a ativação automática do campo de pesquisa após a seleção de abas.
- 17:24 - Controles
Os controles do iOS passaram por uma sutil reformulação, mantendo sua familiaridade e incorporando novos efeitos de Liquid Glass. Os controles deslizantes têm recursos aprimorados, como preservação de momento, alongamento e a opção de exibir marcas de seleção, valores neutros e um estilo sem miniatura como uma barra de progresso. Duas novas aparências Liquid Glass estão disponíveis para botões. Verifique se seus layouts acomodam os tamanhos de controle atualizados.
- 19:15 - Elementos personalizados
UIKit fornece APIs para você trazer o Liquid Glass para sua IU personalizada. Use Liquid Glass com moderação para os elementos mais importantes. Aplique o efeito a visualizações personalizadas usando "UIVisualEffectView" e "UIGlassEffect", e personalize a forma, a aparência e a cor da tonalidade. Você pode animar elementos Liquid Glass para se materializarem, desmaterializarem e se fundirem perfeitamente como gotículas de água ao se sobreporem. O "UIGlassContainerEffect" garante adaptação uniforme e consistência em diferentes fundos. Os elementos interativos podem aumentar e saltar de acordo com a interação do usuário, melhorando a experiência.
- 25:01 - Próximas etapas
O Liquid Glass apresenta novos componentes e materiais UIKit que você pode integrar facilmente em apps. Crie seus apps com o Xcode 26, revise cada tela e considere substituir controles personalizados por controles UIKit padrão. Aproveite o Liquid Glass para aprimorar o design do seu app enquanto os casos de uso especiais se destacam.