Środowisko

• macOS Monterey wersja 12.4
• Wersja Xcode 14.0 (14A309)
• iOS 16.0

Jeśli po raz pierwszy tworzysz widżety dla systemu iOS, polecam przeczytanie o tym, jak utworzyć rozszerzenie widżetu . W tym artykule skupię się na wyjaśnieniu, jak opracować widżet blokady ekranu i nie będę opisywał, jak działa WidgetKit, ale z pewnością pomoże ci to zrozumieć, jak opracować bardziej złożone widżety.

Dokumentacja Apple: Tworzenie widżetów ekranu blokady

WWDC2022: Komplikacje i widżety: ponownie załadowane

Co to są widżety ekranu blokady?

Zainspirowany tarczą zegarka Apple Watch , którą długo trzymasz, aby dostać się do edytora, możesz teraz nacisnąć i przytrzymać ekran blokady swojego iPhone'a, aby uzyskać dostęp do nowego interfejsu edycji, umożliwiającego dostosowanie ekranu blokady i dodawanie widżetów.

Zacznijmy wdrażać widżet na ekranie blokady!

1 — Dodaj rozszerzenie widżetu do swojego projektu

Jeśli dopiero zaczynasz korzystać z widżetów iOS, musisz najpierw dodać nowy cel do swojego projektu.

File > New > Target

Na karcie iOS wyszukaj Widget Extension.

Dodaj nazwę produktu (w tym przykładzie LockScreenWidget), a następnie kliknij Finishprzycisk. Xcode może poprosić o aktywację schematu, kliknij Activate.

Nowy cel powinien zostać dodany do twojego projektu.

2 — Dodajmy nowe rodziny widżetów

Przede wszystkim w konfiguracji widżetu dodajmy obsługiwany modyfikator rodziny .supportedFamilies()i jako parametr 3 nowe rodziny.supportedFamilies([.accessoryCircular, .accessoryInline, .accessoryRectangular])

Widżety miały już różne rodziny, a widżety ekranu blokady to 3 nowe rodziny dodane do listy:

• WidgetFamily.accessoryCircular
• WidgetFamily.accessoryRectangular
• WidgetFamily.akcesoriumInline

UWAGA : Jeśli chcesz mieć możliwość bezpośredniego zobaczenia widżetu na podglądzie, musisz zmienić rodzinę WidgetPreviewContext na tę, którą chcesz pokazać. Aby mieć przejrzystą organizację, polecam dodać nazwę swojego Widżetu dla tej rodziny w .previewDisplayName()modyfikatorze.

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 — Utwórz widoki dla tych 3 nowych rodzin

W zależności od rozmiaru możesz chcieć wyświetlać różne treści. Weźmy więc widgetFamilyz otoczenia.

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

Ale oto przykład treści z zakodowanymi na stałe wartościami:

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

Aby dodać nowo utworzone widżety, naciśnij i przytrzymaj ekran blokady i kliknij przycisk dostosowywania.

Na ekranie powinny pojawić się trzy różne sekcje.

• Górna sekcja umożliwia dodanie .accessoryInline()widżetu, który zostanie dodany do daty.

• Środkowa sekcja pokazuje tylko dostosowanie czasu.
• Dolna sekcja umożliwia dodawanie .accessoryRectangular()i .accessoryCircular()widżet.