Environnement

• macOS Monterey Version 12.4
• Code X version 14.0 (14A309)
• iOS 16.0

Si c'est la première fois que vous développez des widgets iOS, je vous recommande de lire comment créer une extension de widget . Dans cet article, je concentrerai mon explication sur la façon de développer un widget d'écran de verrouillage et je ne couvrirai pas le fonctionnement de WidgetKit, mais cela vous aidera certainement à comprendre comment développer des widgets plus complexes.

Documentation Apple : Création de widgets d'écran de verrouillage

WWDC2022 : Complications et widgets : rechargés

Que sont les widgets de l'écran de verrouillage ?

Inspiré par le visage Apple Watch que vous tenez longtemps pour entrer dans l'éditeur, vous pouvez maintenant appuyer longuement sur l'écran de verrouillage de votre iPhone pour accéder à la nouvelle interface d'édition vous permettant de personnaliser votre écran de verrouillage et d'ajouter des widgets.

Commençons à implémenter un widget sur l'écran de verrouillage !

1 — Ajoutez une extension de widget à votre projet

Si vous débutez avec les Widgets iOS, vous devez d'abord ajouter une nouvelle cible à votre projet.

File > New > Target

Dans l'onglet iOS, recherchez Widget Extension.

Ajoutez le nom de votre produit (LockScreenWidget pour cet exemple) puis cliquez sur le Finishbouton. Xcode peut vous demander d'activer le schéma, cliquez sur Activate.

Une nouvelle cible doit avoir été ajoutée à votre projet.

2 — Ajoutons de nouvelles familles de Widgets

Tout d'abord, dans votre configuration Widget ajoutons un modificateur de famille supporté .supportedFamilies()et en paramètre les 3 nouvelles familles.supportedFamilies([.accessoryCircular, .accessoryInline, .accessoryRectangular])

Les widgets avaient déjà différentes familles et les widgets d'écran de verrouillage sont 3 nouvelles familles ajoutées à la liste :

• WidgetFamille.accessoireCirculaire
• WidgetFamille.accessoireRectangulaire
• WidgetFamily.accessoryInline

NOTE : Si vous souhaitez pouvoir voir directement votre widget sur l'aperçu, il vous suffit de changer la famille WidgetPreviewContext pour celle que vous souhaitez afficher. Pour avoir une organisation propre je vous recommande d'ajouter le nom de votre Widget pour cette famille dans le .previewDisplayName()modificateur.

struct LockScreenWidget_Previews: PreviewProvider {
    static var previews: some View {
        LockScreenWidgetEntryView(entry: SimpleEntry(date: Date()))
            .previewContext(WidgetPreviewContext(family: .accessoryCircular))
	    .previewDisplayName("Accessory Circular")
		
        LockScreenWidgetEntryView(entry: SimpleEntry(date: Date()))
            .previewContext(WidgetPreviewContext(family: .accessoryInline))
            .previewDisplayName("Accessory Inline")
		
        LockScreenWidgetEntryView(entry: SimpleEntry(date: Date()))
            .previewContext(WidgetPreviewContext(family: .accessoryRectangular))
	    .previewDisplayName("Accessory Rectangular")
    }
}

3 — Créer des vues pour ces 3 nouvelles familles

Selon la taille, vous souhaiterez peut-être afficher un contenu différent. Prenons donc le widgetFamilyde l'environnement.

struct LockScreenWidgetEntryView : View {
    @Environment(\\.widgetFamily) var widgetFamily // Here
    var entry: Provider.Entry
	
    var body: some View {
        Text(entry.date, style: .time)
    }
}

switch family {
    case .accessoryInline:
        // A flat widget that contains a single row of text and an optional image.
        // <https://developer.apple.com/documentation/widgetkit/widgetfamily/accessoryinline>
    case .accessoryRectangular:
        // A rectangular widget.
        // <https://developer.apple.com/documentation/widgetkit/widgetfamily/accessoryrectangular>
    case .accessoryCircular:
        // A circular widget.
        // <https://developer.apple.com/documentation/widgetkit/widgetfamily/accessorycircular>
    default:
        Text("Size not implemented yet.")
}

Mais voici un exemple de contenu avec des valeurs codées en dur :

switch family {
    case .accessoryInline:
        // A flat widget that contains a single row of text and an optional image.
	// <https://developer.apple.com/documentation/widgetkit/widgetfamily/accessoryinline>
        HStack {
            Text("Sunrise")
            Image(systemName: "sunrise")
  	}
    case .accessoryRectangular:
	// A rectangular widget.
	// <https://developer.apple.com/documentation/widgetkit/widgetfamily/accessoryrectangular>
	Gauge(value: 21, in: 16...30) {
	    Text("")
	} currentValueLabel: {
	    Text("")
	} minimumValueLabel: {
	    Text("16")
	} maximumValueLabel: {
	    Text("30")
	}
	.gaugeStyle(.accessoryLinear)
    case .accessoryCircular:
	// A circular widget.
	// <https://developer.apple.com/documentation/widgetkit/widgetfamily/accessorycircular>
	Gauge(value: 80, in: 0...100) {
	    Image(systemName: "drop.fill")
	}
	.gaugeStyle(.accessoryCircular)
    default:
        Text("Size not implemented yet.")
}

Pour ajouter les widgets nouvellement créés, appuyez longuement sur l'écran de verrouillage et cliquez sur le bouton de personnalisation.

Trois sections différentes devraient apparaître à l'écran.

• La section supérieure vous permet d'ajouter le .accessoryInline()widget, il s'ajoutera à la date.

• La section du milieu ne montre que la personnalisation de l'heure.
• .accessoryRectangular()La section inférieure vous permet d' ajouter un .accessoryCircular()widget.