Окружающая среда

• macOS Монтерей версии 12.4
• Версия Xcode 14.0 (14A309)
• iOS 16.0

Если вы впервые разрабатываете виджеты для iOS, я рекомендую вам прочитать о том, как создать расширение виджета . В этой статье я сосредоточу свое объяснение на том, как разработать виджет блокировки экрана, и я не буду рассказывать, как работает WidgetKit, но это определенно поможет вам понять, как разрабатывать более сложные виджеты.

Документация Apple: Создание виджетов экрана блокировки

WWDC2022: Усложнения и виджеты: перезагрузка

Что такое виджеты экрана блокировки?

Вдохновленный циферблатом Apple Watch , который вы долго удерживаете, чтобы попасть в редактор, теперь вы можете долго нажимать на экран блокировки вашего iPhone, чтобы попасть в новый интерфейс редактирования, позволяющий настраивать экран блокировки и добавлять виджеты.

Приступим к реализации виджета на Экране Блокировки!

1 — Добавьте расширение виджета в свой проект

Если вы новичок в виджетах iOS, вам нужно сначала добавить новую цель в свой проект.

File > New > Target

На вкладке iOS найдите Widget Extension.

Добавьте название вашего продукта (LockScreenWidget в этом примере), затем нажмите Finishкнопку. Xcode может попросить вас активировать схему, нажмите Activate.

В ваш проект должна быть добавлена ​​новая цель.

2 — Добавим новые семейства виджетов

Прежде всего, давайте добавим в конфигурацию вашего виджета поддерживаемый модификатор семейства .supportedFamilies()и в качестве параметра 3 новых семейства..supportedFamilies([.accessoryCircular, .accessoryInline, .accessoryRectangular])

Виджеты уже имели разные семейства, а виджеты экрана блокировки — это 3 новых семейства, добавленных в список:

• WidgetFamily.accessoryКруговой
• WidgetFamily.accessoryПрямоугольный
• WidgetFamily.accessoryInline

ПРИМЕЧАНИЕ . Если вы хотите иметь возможность непосредственно видеть свой виджет в предварительном просмотре, вам нужно изменить семейство WidgetPreviewContext на то, которое вы хотите показать. Чтобы иметь чистую организацию, я рекомендую вам добавить имя вашего виджета для этого семейства в .previewDisplayName()модификаторе.

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 — Создать виды для этих 3 новых семейств

В зависимости от размера может потребоваться отобразить разное содержимое. Итак, давайте возьмем widgetFamilyиз окружающей среды.

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

Но вот пример контента с жестко закодированными значениями:

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

Чтобы добавить вновь созданные виджеты, нажмите и удерживайте экран блокировки и нажмите кнопку настройки.

На экране должны появиться три разных раздела.

• Верхний раздел позволяет добавить .accessoryInline()виджет, он будет добавлен к дате.

• Средняя часть показывает только настройку времени.
• Нижний раздел позволяет добавлять .accessoryRectangular()и .accessoryCircular()виджет.