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

WWDC21 · 24 min · Graphics & Games / SwiftUI & UI Frameworks

Add rich graphics to your SwiftUI app

Learn how you can bring your graphics to life with SwiftUI. We’ll begin by working with safe areas, including the keyboard safe area, and learn how to design beautiful, edge-to-edge graphics that won’t underlap the on-screen keyboard. We’ll also explore the materials and vibrancy you can use in SwiftUI to create easily customizable backgrounds and controls, and go over graphics APIs like drawingGroup and the all new canvas. With these tools, it’s simpler than ever to design fully interactive and interruptible animations and graphics in SwiftUI.

Watch at developer.apple.com ↗

Transcript all transcripts

Code shown on screen · 4 snippets

Ignoring safe areas swift · at 3:53 ↗ 
// Ignore all safe areas
ContentView()
    .ignoresSafeArea()

// Ignore keyboard only
ContentView()
    .ignoresSafeArea(.keyboard)
Foreground Styles swift · at 7:08 ↗ 
VStack {
    Text("Primary")
        .foregroundStyle(.primary)
    Text("Secondary")
        .foregroundStyle(.secondary)
    Text("Tertiary")
        .foregroundStyle(.tertiary)
    Text("Quaternary")
        .foregroundStyle(.quaternary)
}
Purple Foreground Styles swift · at 7:35 ↗ 
VStack {
    Text("Primary")
        .foregroundStyle(.primary)
    Text("Secondary")
        .foregroundStyle(.secondary)
    Text("Tertiary")
        .foregroundStyle(.tertiary)
    Text("Quaternary")
        .foregroundStyle(.quaternary)
}
.foregroundStyle(.purple)
Blue Gradient Foreground Styles swift · at 7:41 ↗ 
let blueGradient = LinearGradient(
    colors: [.blue, .teal], startPoint: .leading, endPoint: .trailing)
VStack {
    Text("Primary")
        .foregroundStyle(.primary)
    Text("Secondary")
        .foregroundStyle(.secondary)
    Text("Tertiary")
        .foregroundStyle(.tertiary)
    Text("Quaternary")
        .foregroundStyle(.quaternary)
}
.foregroundStyle(blueGradient)

Resources