Dunfey · Hotel WWDC as data, est. 1983
Front desk everything
Years
Topics

WWDC23 · 27 min · Essentials / Developer Tools

Build programmatic UI with Xcode Previews

Learn how you can use the #Preview macro on Xcode 15 to quickly iterate on your UI code written in SwiftUI, UIKit, or AppKit. Explore a collage of unique workflows for interacting with views right in the canvas, find out how to view multiple variations of UI simultaneously, and discover how you can travel through your widget’s timeline in seconds to test the transitions between entries. We’ll also show you how to add previews to libraries, provide sample assets, and preview your views in your physical devices to leverage their capabilities and existing data.

Watch at developer.apple.com ↗

Transcript all transcripts

Chapters

  • 1:26 — What are previews
  • 3:42 — Preview syntax basics
  • 4:44 — Writing SwiftUI previews
  • 5:50 — Writing UIKit & AppKit previews
  • 6:08 — Demo: Putting writing previews into action
  • 11:39 — Writing previews for widgets
  • 15:58 — Previewing in library targets
  • 20:28 — Passing sample data into previews
  • 22:08 — Previewing on devices for full fidelity and access to data
  • 25:50 — Wrap-up

Code shown on screen · 8 snippets

Basic preview swift · at 1:30 ↗ 
#Preview {
    MyView()
}
Previewing a SwiftUI view in a list swift · at 5:05 ↗ 
#Preview {
    List {
        CollageView(layout: .twoByTwoGrid)
    }
    .environment(CollageLayoutStore.sample)
}
Previews can have a name and configuration traits swift · at 5:37 ↗ 
#Preview(“2x2 Grid”, traits: .landscapeLeft) {
    List {
        CollageView(layout: .twoByTwoGrid)
    }
    .environment(CollageLayoutStore.sample)
}
Previewing UIKit view controllers and views swift · at 5:58 ↗ 
#Preview {
    var controller = SavedCollagesController()
    controller.dataSource = CollagesDataStore.sample
    controller.layoutMode = .grid
    return controller
}

#Preview(“Filter View”) {
    var view = CollageFilterDisplayView()
    view.filter = .bloom(amount: 15.0)
    view.imageData = …
    return view
}
Xcode can help suggest a preview swift · at 7:08 ↗ 
#Preview {
    FilterEditor()
}
Setting a UIKit preview to start in landscape swift · at 11:30 ↗ 
#Preview("All Filters", traits: .landscapeLeft) {
    let viewController = FilterRenderingViewController()
    if let image = UIImage(named: "sample-001")?.cgImage {
        viewController.imageData = image
    }
    viewController.filter = Filter(
        bloomAmount: 1.0,
        vignetteAmount: 1.0,
        saturationAmount: 0.5
    )
    return viewController
}
Previewing a small widget with a timeline provider swift · at 12:20 ↗ 
#Preview(as: .systemSmall) {
    FrameWidget()
} timelineProvider: {
    RandomCollageProvider()
}
Updating the navigation title while previewing on device swift · at 25:07 ↗ 
.navigationTitle(“Add Collage”)