Ambiente

• macOS Monterey Versión 12.4
• Xcode Versión 14.0 (14A309)
• iOS 16.0

Si es la primera vez que desarrolla widgets de iOS, le recomiendo que lea sobre cómo crear una extensión de widget . En este artículo, centraré mi explicación en cómo desarrollar un widget de pantalla de bloqueo y no cubriré cómo funciona WidgetKit, pero definitivamente lo ayudará a comprender cómo desarrollar widgets más complejos.

Documentación de Apple: Creación de widgets de pantalla de bloqueo

WWDC2022: Complicaciones y artilugios: Reloaded

¿Qué son los widgets de la pantalla de bloqueo?

Inspirado en la carátula del Apple Watch que mantienes presionado durante mucho tiempo para ingresar al editor, ahora puedes mantener presionada la pantalla de bloqueo de tu iPhone para ingresar a la nueva interfaz de edición que te permite personalizar tu pantalla de bloqueo y agregar widgets.

¡Comencemos a implementar un widget en la pantalla de bloqueo!

1 — Agrega una extensión de widget a tu proyecto

Si es nuevo en iOS Widgets, primero debe agregar un nuevo objetivo a su proyecto.

File > New > Target

En la pestaña de iOS busca Widget Extension.

Agregue el nombre de su producto (LockScreenWidget para este ejemplo) y luego haga clic en el Finishbotón. Xcode podría pedirle que active el esquema, haga clic en Activate.

Se debería haber agregado un nuevo objetivo a su proyecto.

2 — Agreguemos nuevas familias de widgets

En primer lugar, en la configuración de su widget, agreguemos un modificador de familia admitido .supportedFamilies()y, como parámetro, las 3 nuevas familias..supportedFamilies([.accessoryCircular, .accessoryInline, .accessoryRectangular])

Los widgets ya tenían diferentes familias y los widgets de pantalla de bloqueo son 3 nuevas familias agregadas a la lista:

• WidgetFamily.accesorioCircular
• WidgetFamily.accesorioRectangular
• WidgetFamily.accessoryInline

NOTA : Si desea poder ver directamente su widget en la vista previa, lo que debe hacer es cambiar la familia WidgetPreviewContext a la que desea mostrar. Para tener una organización limpia te recomiendo agregar el nombre de tu Widget para esta familia en el .previewDisplayName()modificador.

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 — Crear vistas para estas 3 nuevas familias

Dependiendo del tamaño, es posible que desee mostrar contenido diferente. Así que tomemos el widgetFamilydel medio ambiente.

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

Pero aquí hay un ejemplo de contenido con valores codificados:

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

Para agregar los widgets recién creados, mantenga presionada la pantalla de bloqueo y haga clic en el botón personalizar.

Tres secciones diferentes deben aparecer en la pantalla.

• La sección superior le permite agregar el .accessoryInline()widget, se agregará a la fecha.

• La sección central solo muestra la personalización del tiempo.
• La sección inferior le permite agregar .accessoryRectangular()y .accessoryCircular()widget.