View in English

  • Apple Developer
    • Get Started

    Explore Get Started

    • Overview
    • Learn
    • Apple Developer Program

    Stay Updated

    • Latest News
    • Hello Developer
    • Platforms

    Explore Platforms

    • Apple Platforms
    • iOS
    • iPadOS
    • macOS
    • tvOS
    • visionOS
    • watchOS
    • App Store

    Featured

    • Design
    • Distribution
    • Games
    • Accessories
    • Web
    • Home
    • CarPlay
    • Technologies

    Explore Technologies

    • Overview
    • Xcode
    • Swift
    • SwiftUI

    Featured

    • Accessibility
    • App Intents
    • Apple Intelligence
    • Games
    • Machine Learning & AI
    • Security
    • Xcode Cloud
    • Community

    Explore Community

    • Overview
    • Meet with Apple events
    • Community-driven events
    • Developer Forums
    • Open Source

    Featured

    • WWDC
    • Swift Student Challenge
    • Developer Stories
    • App Store Awards
    • Apple Design Awards
    • Apple Developer Centers
    • Documentation

    Explore Documentation

    • Documentation Library
    • Technology Overviews
    • Sample Code
    • Human Interface Guidelines
    • Videos

    Release Notes

    • Featured Updates
    • iOS
    • iPadOS
    • macOS
    • watchOS
    • visionOS
    • tvOS
    • Xcode
    • Downloads

    Explore Downloads

    • All Downloads
    • Operating Systems
    • Applications
    • Design Resources

    Featured

    • Xcode
    • TestFlight
    • Fonts
    • SF Symbols
    • Icon Composer
    • Support

    Explore Support

    • Overview
    • Help Guides
    • Developer Forums
    • Feedback Assistant
    • Contact Us

    Featured

    • Account Help
    • App Review Guidelines
    • App Store Connect Help
    • Upcoming Requirements
    • Agreements and Guidelines
    • System Status
  • Quick Links

    • Events
    • News
    • Forums
    • Sample Code
    • Videos
 

Vídeos

Abrir menu Fechar menu
  • Coleções
  • Todos os vídeos
  • Sobre

Mais vídeos

  • Sobre
  • Resumo
  • Código
  • 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

    • Adopting Liquid Glass
    • Human Interface Guidelines
      • Vídeo HD
      • Vídeo SD

    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

    • Elevate your tab and sidebar experience in iPadOS
    • Enhance your UI animations and transitions
  • 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.

Developer Footer

  • Vídeos
  • WWDC25
  • Crie um app do UIKit com o novo design
  • Open Menu Close Menu
    • iOS
    • iPadOS
    • macOS
    • tvOS
    • visionOS
    • watchOS
    • App Store
    Open Menu Close Menu
    • Swift
    • SwiftUI
    • Swift Playground
    • TestFlight
    • Xcode
    • Xcode Cloud
    • Icon Composer
    • SF Symbols
    Open Menu Close Menu
    • Accessibility
    • Accessories
    • Apple Intelligence
    • Audio & Video
    • Augmented Reality
    • Business
    • Design
    • Distribution
    • Education
    • Games
    • Health & Fitness
    • In-App Purchase
    • Localization
    • Maps & Location
    • Machine Learning & AI
    • Security
    • Safari & Web
    Open Menu Close Menu
    • Documentation
    • Downloads
    • Sample Code
    • Videos
    Open Menu Close Menu
    • Help Guides & Articles
    • Contact Us
    • Forums
    • Feedback & Bug Reporting
    • System Status
    Open Menu Close Menu
    • Apple Developer
    • App Store Connect
    • Certificates, IDs, & Profiles
    • Feedback Assistant
    Open Menu Close Menu
    • Apple Developer Program
    • Apple Developer Enterprise Program
    • App Store Small Business Program
    • MFi Program
    • Mini Apps Partner Program
    • News Partner Program
    • Video Partner Program
    • Security Bounty Program
    • Security Research Device Program
    Open Menu Close Menu
    • Meet with Apple
    • Apple Developer Centers
    • App Store Awards
    • Apple Design Awards
    • Apple Developer Academies
    • WWDC
    Read the latest news.
    Get the Apple Developer app.
    Copyright © 2026 Apple Inc. All rights reserved.
    Terms of Use Privacy Policy Agreements and Guidelines