Crea una app de UIKit con el nuevo diseño

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)
    }
}