Build complications in SwiftUI

Build complications in SwiftUI

Spice up your graphic complications on Apple Watch using SwiftUI. We'll teach you how to use custom SwiftUI views in complications on watch faces like Meridian and Infograph, look at some best practices when creating your complications, and show you how to preview your work in Xcode 12.

To get the most out of this session, you should be familiar with the basics of SwiftUI and building complications on Apple Watch. For an overview, watch “Create Complications for Apple Watch” and read “Building watchOS App Interfaces with SwiftUI.”

Once you've discovered how to build graphic complications in SwiftUI, you can combine this with other watchOS 7 features like multiple complications and Face Sharing to create a watch face packed with personality and customized for people who love your app.

Ressources
Vidéos connexes

WWDC22
- Go further with Complications in WidgetKit
WWDC21
- Swift concurrency: Update a sample app
WWDC20

import SwiftUI
import ClockKit

struct RelativeText: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Count Down")
                .font(.headline)
                .foregroundColor(.accentColor)
            Label("Nap Time", systemImage: "moon.fill")
            Text(Date() + 100, style: .relative)
        }
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

struct RelativeText_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicRectangularFullView(RelativeText())
            .previewContext()
    }
}

3:26 - Timer Text

import SwiftUI
import ClockKit

struct TimerText: View {
    var body: some View {
        VStack(alignment: .leading) {
            Label("Sourdough Timer", systemImage: "timer")
                .foregroundColor(.orange)
            Text("Time remaining: \(Date() + 100, style: .timer)")
        }
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

struct TimerText_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicRectangularFullView(TimerText())
            .previewContext()
    }
}

4:04 - Progress View Sample #1

import SwiftUI
import ClockKit

struct ProgressSample: View {
    var body: some View {
        ProgressView(value: 0.7)
            .progressViewStyle(CircularProgressViewStyle())
    }
}

struct ProgressSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(ProgressSample())
            .previewContext()
    }
}

4:15 - Progress View Sample #2

import SwiftUI
import ClockKit

struct ProgressSample: View {
    var body: some View {
        ProgressView(value: 0.7) {
            Image(systemName: "music.note")
        }
        .progressViewStyle(CircularProgressViewStyle())
    }
}

struct ProgressSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(ProgressSample())
            .previewContext()
    }
}

4:23 - Progress View Sample #3

import SwiftUI
import ClockKit

struct ProgressSample: View {
    var body: some View {
        ProgressView(value: 0.7) {
            Image(systemName: "music.note")
        }
        .progressViewStyle(CircularProgressViewStyle(tint: .red))
    }
}

struct ProgressSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(ProgressSample())
            .previewContext()
    }
}

4:29 - Progress View Sample #4

import SwiftUI
import ClockKit

struct ProgressSample: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Water Reminder")
                .foregroundColor(.blue)
            Text("32 oz. consumed")
            ProgressView(value: 0.7)
                .progressViewStyle(LinearProgressViewStyle(tint: .blue))
        }
        
    }
}

struct ProgressSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicRectangularFullView(ProgressSample())
            .previewContext()
    }
}

4:45 - Gauge Sample #1

import SwiftUI
import ClockKit

struct GaugeSample: View {
    var body: some View {
        Gauge(value: 5.8, in: 3...10) {
            Image(systemName: "drop.fill")
                .foregroundColor(.green)
        }
        .gaugeStyle(CircularGaugeStyle())
    }
}

struct GaugeSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(GaugeSample())
            .previewContext()
    }
}

4:55 - Gauge Sample #2

import SwiftUI
import ClockKit

struct GaugeSample: View {
    @State var acidity = 5.8
    
    var body: some View {
        Gauge(value: acidity, in: 3...10) {
            Image(systemName: "drop.fill")
                .foregroundColor(.green)
        } currentValueLabel: {
            Text("\(acidity, specifier: "%.1f")")
        }
        .gaugeStyle(CircularGaugeStyle())
    }
}

struct GaugeSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(GaugeSample())
            .previewContext()
    }
}

5:02 - Gauge Sample #3

import SwiftUI
import ClockKit

struct GaugeSample: View {
    @State var acidity = 5.8
    
    var body: some View {
        Gauge(value: acidity, in: 3...10) {
            Image(systemName: "drop.fill")
                .foregroundColor(.green)
        } currentValueLabel: {
            Text("\(acidity, specifier: "%.1f")")
        } minimumValueLabel: {
            Text("3")
        } maximumValueLabel: {
            Text("10")
        }
        .gaugeStyle(CircularGaugeStyle())
    }
}

struct GaugeSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(GaugeSample())
            .previewContext()
    }
}

5:14 - Gauge Sample #4

import SwiftUI
import ClockKit

struct GaugeSample: View {
    @State var acidity = 5.8
    
    var body: some View {
        Gauge(value: acidity, in: 3...10) {
            Image(systemName: "drop.fill")
                .foregroundColor(.green)
        } currentValueLabel: {
            Text("\(acidity, specifier: "%.1f")")
        } minimumValueLabel: {
            Text("3")
        } maximumValueLabel: {
            Text("10")
        }
        .gaugeStyle(CircularGaugeStyle(tint: .green))
    }
}

struct GaugeSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(GaugeSample())
            .previewContext()
    }
}

5:21 - Gauge Sample #5

import SwiftUI
import ClockKit

struct GaugeSample: View {
    @State var acidity = 5.8
    
    var body: some View {
        Gauge(value: acidity, in: 3...10) {
            Image(systemName: "drop.fill")
                .foregroundColor(.green)
        } currentValueLabel: {
            Text("\(acidity, specifier: "%.1f")")
        } minimumValueLabel: {
            Text("3")
        } maximumValueLabel: {
            Text("10")
        }
        .gaugeStyle(
            CircularGaugeStyle(
                tint: Gradient(colors: [.orange, .yellow, .green, .blue, .purple])
            )
        )
    }
}

struct GaugeSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(GaugeSample())
            .previewContext()
    }
}

5:34 - Gauge Sample #6

import SwiftUI
import ClockKit

struct GaugeSample: View {
    @State var acidity = 5.8
    
    var body: some View {
        VStack(alignment: .leading) {
            Text("Garden Soil Acidity")
                .foregroundColor(.green)
            Gauge(value: acidity, in: 3...10) {
                Image(systemName: "drop.fill")
                    .foregroundColor(.green)
            } currentValueLabel: {
                Text("\(acidity, specifier: "%.1f")")
            } minimumValueLabel: {
                Text("3")
            } maximumValueLabel: {
                Text("10")
            }
            .gaugeStyle(
                LinearGaugeStyle(
                    tint: Gradient(colors: [.orange, .yellow, .green, .blue, .purple])
                )
            )
        }
    }
}

struct GaugeSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicRectangularFullView(GaugeSample())
            .previewContext()
    }
}

Explore Get Started

Stay Updated

Explore Platforms

Featured

Explore Technologies

Featured

Explore Community

Featured

Explore Documentation

Release Notes

Explore Downloads

Featured

Explore Support

Featured

Quick Links

Ressources

Vidéos connexes

WWDC22

WWDC21

WWDC20