Widget: co to jest, widżety na iOS WidgetKit i Android

Co to jest Widget

Widget — to kompaktowy element interfejsu użytkownika umieszczany na ekranie głównym urządzenia mobilnego w celu wyświetlania aktualnych informacji z aplikacji. W przeciwieństwie do pełnej aplikacji, widżet nie wymaga uruchamiania — użytkownik widzi dane natychmiast po odblokowaniu ekranu. Koncepcja pochodzi z systemów desktopowych (macOS Dashboard, Windows Sidebar), a w środowisku mobilnym Android wprowadził obsługę widżetów od pierwszej wersji (Android 1.5 Cupcake, 2009), podczas gdy Apple dodało je dopiero w iOS 14.

Implementacja techniczna różni się na platformach. Widżet iOS — osobny target w Xcode, kompilowany jako Widget Extension, działający we własnym procesie. Widżet Android — BroadcastReceiver rozszerzający AppWidgetProvider, renderujący układ przez RemoteViews. Obie platformy nakładają ścisłe ograniczenia na wydajność i pamięć: system może usunąć widżet przy przekroczeniu limitów. iOS ogranicza widżet do 30–50 MB i czasu tworzenia timeline do 10 sekund. Android — interwał aktualizacji nie częściej niż 30 minut przez updatePeriodMillis i wymuszone zakończenie przy zawieszeniu onUpdate.

Smart Stack w iOS i stosy w Android pozwalają użytkownikowi grupować wiele widżetów w jeden slot na home screen. Urządzenie automatycznie przełącza wyświetlany widżet w zależności od pory dnia, lokalizacji lub aktywności użytkownika. Na przykład rano pokazywany jest kalendarz, w ciągu dnia — pogoda, wieczorem — notatki. Dla dewelopera oznacza to, że widżet musi poprawnie działać w ramach stosu i nie polegać na stałym wyświetlaniu.

iOS WidgetKit: SwiftUI i TimelineProvider

WidgetKit — framework Apple do tworzenia widżetów na iOS 14+, iPadOS 14+ i macOS 11+. Widżety pisze się w Swift z użyciem SwiftUI i mechanizmu TimelineProvider do aktualizacji treści. Architektura WidgetKit obejmuje trzy komponenty: TimelineProvider — źródło danych tworzące oś czasu z wpisami; Widget Entry View — SwiftUI View wyświetlająca zawartość na podstawie wpisu; Widget Configuration — opis typu, rozmiarów i rodzin widżetu.

WidgetKit sam zarządza aktualizacją — deweloper nie może wymusić aktualizacji widżetu częściej niż pozwala na to system. Apple stosuje budżet aktualizacji rozdzielany pomiędzy wszystkie widżety na urządzeniu. Minimalny interwał — 15–30 minut. W przypadku krytycznych danych (np. status dostawy) stosuje się push-to-refresh — wysłanie powiadomienia push z odpowiednią datą w przyszłości, po którym WidgetKit żąda nowego timeline. Od iOS 17 widżety obsługują interaktywność przez App Intents — użytkownik może naciskać przyciski wewnątrz widżetu bez otwierania aplikacji.

Android AppWidgetProvider: RemoteViews

AppWidgetProvider — klasa bazowa do tworzenia widżetów w Android, wchodząca w skład Android SDK od API level 3. Widżet Android — to BroadcastReceiver otrzymujący zdarzenia aktualizacji, włączenia i wyłączenia od systemu. W przeciwieństwie do iOS, gdzie widżet jest rysowany przez SwiftUI na własnym silniku, Android używa RemoteViews — ograniczonego zestawu komponentów View renderowanych w procesie systemu (launchera). Nie można używać niestandardowych View, złożonych animacji ani bibliotek UI.

Schemat działania widżetu Android obejmuje cztery etapy. Konfiguracja — podczas dodawania widżetu do ekranu system może uruchomić Activity konfiguracji, gdzie użytkownik wybiera ustawienia. Aktualizacja — system wywołuje onUpdate() w określonym interwale (minimum 30 minut) lub na sygnał z aplikacji przez WorkManager. Renderowanie — dostawca tworzy RemoteViews z aktualnymi danymi i przekazuje je przez AppWidgetManager. Obsługa kliknięć — widżet obsługuje PendingIntent dla przycisków: po kliknięciu otwierane jest Activity lub wykonywana jest akcja. Od Android 12 widżety otrzymały obsługę zaokrąglonych rogów, adaptacyjnych kolorów Material You i dynamicznej zmiany rozmiaru.

Tworzenie widżetu w iOS z WidgetKit

Stwórzmy widżet pogody w Swift z użyciem WidgetKit i SwiftUI. Projekt powinien zawierać Widget Extension target, dodawany w Xcode przez File → New → Target → Widget Extension.

import WidgetKit
import SwiftUI

// 1. Model danych dla widżetu
struct WeatherEntry: TimelineEntry {
    let date: Date
    let temperature: Int
    let condition: String
}

// 2. TimelineProvider — dostawca danych
struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> WeatherEntry {
        WeatherEntry(date: Date(), temperature: 22, condition: "Słonecznie")
    }

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

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

// 3. SwiftUI View do wyświetlania
struct WeatherWidgetEntryView: View {
    var entry: WeatherEntry

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

// 4. Konfiguracja widżetu
@main
struct WeatherWidget: Widget {
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: "WeatherWidget", provider: Provider()) { entry in
            WeatherWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("Pogoda")
        .description("Pokazuje aktualną temperaturę")
        .supportedFamilies([.systemSmall, .systemMedium])
    }
}

Kluczowe punkty: TimelineProvider określa, kiedy i jakie dane pokazywać; getTimeline tworzy oś czasu z polityką aktualizacji .after(nextUpdate); StaticConfiguration łączy dostawcę z View. Do danych dynamicznych używa się IntentConfiguration z parametrami użytkownika.

Tworzenie widżetu w Android z AppWidgetProvider

Zaimplementujemy analogiczny widżet pogody w Kotlin z AppWidgetProvider i RemoteViews.

// 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 = "Pochmurnie"
            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 — rejestracja dostawcy
<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>

Plik widget_weather_info.xml określa minimalne rozmiary, interwał i layout: minWidth 160dp, minHeight 80dp, updatePeriodMillis 3600000 (1 godzina). RemoteViews używa tylko obsługiwanych komponentów: LinearLayout, TextView, ImageView. Niestandardowe View i ConstraintLayout są dostępne od Android 5.0. GlanceLayout — eksperymentalne podejście Compose dla RemoteViews — pojawiło się w Android 15.