Widget: Was ist das, Widgets auf iOS WidgetKit und Android

Was ist ein Widget

Widget ist ein kompaktes Benutzeroberflächenelement, das auf dem Startbildschirm eines mobilen Geräts platziert wird, um relevante Informationen aus einer App anzuzeigen. Im Gegensatz zu einer vollständigen Anwendung benötigt ein Widget keinen Start — der Benutzer sieht die Daten sofort nach dem Entsperren des Bildschirms. Das Konzept stammt von Desktop-Betriebssystemen (macOS Dashboard, Windows Sidebar), und in der mobilen Umgebung führte Android Widget-Unterstützung mit der ersten Version ein (Android 1.5 Cupcake, 2009), während Apple sie erst in iOS 14 hinzufügte.

Die technische Implementierung unterscheidet sich je nach Plattform. Ein iOS-Widget ist ein separater Target in Xcode, der als Widget Extension kompiliert wird und in einem eigenen Prozess läuft. Ein Android-Widget ist ein BroadcastReceiver, der AppWidgetProvider erweitert und das Layout über RemoteViews rendert. Beide Plattformen legen strenge Leistungs- und Speicherbeschränkungen fest: Das System kann das Widget entfernen, wenn Grenzen überschritten werden. iOS begrenzt Widgets auf 30–50 MB und die Timeline-Erstellungszeit auf 10 Sekunden. Android — Aktualisierungsintervall nicht länger als 30 Minuten über updatePeriodMillis und erzwungene Beendigung, wenn onUpdate hängt.

Smart Stack auf iOS und Stapel auf Android ermöglichen es dem Benutzer, mehrere Widgets in einem Startbildschirm-Slot zu gruppieren. Das Gerät wechselt automatisch das angezeigte Widget basierend auf Tageszeit, Standort oder Benutzeraktivität. Beispielsweise wird morgens der Kalender angezeigt, tagsüber das Wetter, abends die Notizen. Für Entwickler bedeutet dies, dass das Widget als Teil eines Stapels korrekt funktionieren und nicht auf ständige Anzeige angewiesen sein muss.

iOS WidgetKit: SwiftUI und TimelineProvider

WidgetKit ist Apples Framework zum Erstellen von Widgets auf iOS 14+, iPadOS 14+ und macOS 11+. Widgets werden in Swift mit SwiftUI und dem TimelineProvider-Mechanismus zur Inhaltsaktualisierung geschrieben. Die WidgetKit-Architektur umfasst drei Komponenten: TimelineProvider — eine Datenquelle, die eine Zeitleiste mit Einträgen bildet; Widget Entry View — eine SwiftUI-View, die Inhalte basierend auf einem Eintrag anzeigt; Widget Configuration — eine Beschreibung des Widget-Typs, der Größen und Familien.

WidgetKit verwaltet Aktualisierungen automatisch — der Entwickler kann ein Widget nicht häufiger aktualisieren, als das System erlaubt. Apple verwendet ein Aktualisierungsbudget, das auf alle Widgets auf dem Gerät verteilt wird. Das Mindestintervall beträgt 15–30 Minuten. Für kritische Daten (z. B. Lieferstatus) wird Push-to-Refresh verwendet — Senden einer Push-Benachrichtigung mit einem relevanten zukünftigen Datum, woraufhin WidgetKit eine neue Zeitleiste anfordert. Ab iOS 17 unterstützen Widgets Interaktivität über App Intents — Benutzer können Schaltflächen innerhalb eines Widgets drücken, ohne die App zu öffnen.

Android AppWidgetProvider: RemoteViews

AppWidgetProvider ist die Basisklasse zum Erstellen von Widgets auf Android, Teil des Android SDK seit API Level 3. Ein Android-Widget ist ein BroadcastReceiver, der Aktualisierungs-, Aktivierungs- und Deaktivierungsereignisse vom System empfängt. Im Gegensatz zu iOS, wo das Widget mit SwiftUI auf einer eigenen Engine gerendert wird, verwendet Android RemoteViews — eine begrenzte Anzahl von View-Komponenten, die im Systemprozess (Launcher) gerendert werden. Benutzerdefinierte Views, komplexe Animationen oder UI-Bibliotheken können nicht verwendet werden.

Der Android-Widget-Workflow umfasst vier Phasen. Konfiguration — beim Hinzufügen eines Widgets zum Bildschirm kann das System eine Konfigurations-Activity starten, in der der Benutzer Einstellungen auswählt. Aktualisierung — das System ruft onUpdate() in einem festgelegten Intervall (mindestens 30 Minuten) oder auf ein Signal der App über WorkManager auf. Rendering — der Anbieter erstellt RemoteViews mit aktuellen Daten und übergibt sie über AppWidgetManager. Berührungsbehandlung — das Widget unterstützt PendingIntent für Schaltflächen: Ein Klick öffnet eine Activity oder führt eine Aktion aus. Ab Android 12 unterstützen Widgets abgerundete Ecken, adaptive Material You-Farben und dynamische Größenänderung.

Ein Widget auf iOS mit WidgetKit erstellen

Lassen Sie uns ein Wetter-Widget in Swift mit WidgetKit und SwiftUI erstellen. Das Projekt muss einen Widget Extension-Target enthalten, der in Xcode über File → New → Target → Widget Extension hinzugefügt wird.

import WidgetKit
import SwiftUI

// 1. Datenmodell für das Widget
struct WeatherEntry: TimelineEntry {
    let date: Date
    let temperature: Int
    let condition: String
}

// 2. TimelineProvider — Datenanbieter
struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> WeatherEntry {
        WeatherEntry(date: Date(), temperature: 22, condition: "Sonnig")
    }

    func getSnapshot(in context: Context, completion: @escaping (WeatherEntry) -> Void) {
        let entry = WeatherEntry(date: Date(), temperature: 22, condition: "Sonnig")
        completion(entry)
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<WeatherEntry>) -> Void) {
        let now = Date()
        let entry = WeatherEntry(date: now, temperature: 20, condition: "Bewölkt")
        let nextUpdate = Calendar.current.date(byAdding: .hour, value: 3, to: now)!
        let timeline = Timeline(entries: [entry], policy: .after(nextUpdate))
        completion(timeline)
    }
}

// 3. SwiftUI-View zur Anzeige
struct WeatherWidgetEntryView: View {
    var entry: WeatherEntry

    var body: some View {
        VStack(alignment: .leading) {
            Text("Wetter").font(.caption).foregroundColor(.secondary)
            HStack {
                Text("\(entry.temperature)°").font(.largeTitle).fontWeight(.bold)
                Spacer()
                Text(entry.condition).font(.body)
            }
        }.padding()
    }
}

// 4. Widget-Konfiguration
@main
struct WeatherWidget: Widget {
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: "WeatherWidget", provider: Provider()) { entry in
            WeatherWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("Wetter")
        .description("Zeigt die aktuelle Temperatur an")
        .supportedFamilies([.systemSmall, .systemMedium])
    }
}

Wichtige Punkte: TimelineProvider bestimmt, wann und welche Daten angezeigt werden; getTimeline erstellt eine Zeitleiste mit der Aktualisierungsrichtlinie .after(nextUpdate); StaticConfiguration verbindet den Anbieter mit der View. Für dynamische Daten wird IntentConfiguration mit benutzerdefinierten Parametern verwendet.

Ein Widget auf Android mit AppWidgetProvider erstellen

Lassen Sie uns ein ähnliches Wetter-Widget in Kotlin mit AppWidgetProvider und RemoteViews implementieren.

// WeatherWidgetProvider.kt
class WeatherWidgetProvider : AppWidgetProvider() {

    override fun onUpdate(
        context: Context,
        appWidgetManager: AppWidgetManager,
        appWidgetIds: IntArray
    ) {
        for (appWidgetId in appWidgetIds) {
            updateAppWidget(context, appWidgetManager, appWidgetId)
        }
    }

    override fun onAppWidgetOptionsChanged(
        context: Context,
        appWidgetManager: AppWidgetManager,
        appWidgetId: Int,
        newOptions: Bundle
    ) {
        updateAppWidget(context, appWidgetManager, appWidgetId)
    }

    companion object {
        fun updateAppWidget(
            context: Context,
            appWidgetManager: AppWidgetManager,
            appWidgetId: Int
        ) {
            val temperature = 20
            val condition = "Bewölkt"
            val views = RemoteViews(
                context.packageName, R.layout.widget_weather
            ).apply {
                setTextViewText(R.id.tv_temperature, "$temperature°")
                setTextViewText(R.id.tv_condition, condition)
                setOnClickPendingIntent(
                    R.id.widget_root, PendingIntent.getActivity(
                        context, 0,
                        Intent(context, MainActivity::class.java),
                        PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_IMMUTABLE
                    )
                )
            }
            appWidgetManager.updateAppWidget(appWidgetId, views)
        }
    }
}

// AndroidManifest — Anbieterregistrierung
<receiver android:name=".WeatherWidgetProvider" android:exported="true">
    <intent-filter>
        <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
    </intent-filter>
    <meta-data
        android:name="android.appwidget.provider"
        android:resource="@xml/widget_weather_info" />
</receiver>

Die Datei widget_weather_info.xml legt Mindestgrößen, Intervall und Layout fest: minWidth 160dp, minHeight 80dp, updatePeriodMillis 3600000 (1 Stunde). RemoteViews verwendet nur unterstützte Komponenten: LinearLayout, TextView, ImageView. Benutzerdefinierte Views und ConstraintLayout sind seit Android 5.0 verfügbar. GlanceLayout — ein experimenteller Compose-basierter Ansatz für RemoteViews — erschien in Android 15.