Widget: mi ez, widgetek iOS WidgetKit és Android rendszeren

Mi az a Widget

Widget — egy kompakt felhasználói felület elem, amely a mobileszköz kezdőképernyőjére kerül az alkalmazás aktuális információinak megjelenítésére. Ellentétben egy teljes alkalmazással, a widget nem igényel indítást — a felhasználó közvetlenül a képernyő feloldása után látja az adatokat. A koncepció asztali operációs rendszerekből (macOS Dashboard, Windows Sidebar) származik, a mobil környezetben pedig az Android az első kiadásától (Android 1.5 Cupcake, 2009) támogatja a widgeteket, míg az Apple csak az iOS 14-ben adta hozzá őket.

Technikai megvalósítás platformonként eltér. iOS widget — külön target az Xcode-ban, Widget Extensionként lefordítva, saját folyamatban fut. Android widget — BroadcastReceiver, amely kiterjeszti az AppWidgetProvider-t, a layout-ot RemoteViews segítségével rendereli. Mindkét platform szigorú korlátozásokat ír elő a teljesítményre és memóriára: a rendszer eltávolíthatja a widgetet a határértékek túllépése esetén. Az iOS 30–50 MB-ra és a timeline kialakítási idejét 10 másodpercre korlátozza a widgetet. Android — frissítési intervallum legfeljebb 30 percenként az updatePeriodMillis segítségével, és kényszerített leállítás az onUpdate lefagyása esetén.

Smart Stack iOS-en és halmok Androidon lehetővé teszik a felhasználó számára, hogy több widgetet egy slotba csoportosítson a home screen-en. A készülék automatikusan vált a megjelenített widget között a napszaktól, helytől vagy a felhasználó tevékenységétől függően. Például reggel a naptár, délben az időjárás, este a jegyzetek jelennek meg. A fejlesztő számára ez azt jelenti, hogy a widgetnek megfelelően kell működnie egy halmon belül, és nem támaszkodhat az állandó megjelenítésre.

iOS WidgetKit: SwiftUI és TimelineProvider

WidgetKit — az Apple keretrendszere widgetek létrehozásához iOS 14+, iPadOS 14+ és macOS 11+ rendszereken. A widgetek Swift nyelven íródnak a SwiftUI és a TimelineProvider mechanizmus használatával a tartalom frissítéséhez. A WidgetKit architektúra három összetevőből áll: TimelineProvider — adatforrás, amely idővonalat képez rekordokkal; Widget Entry View — SwiftUI View, amely a rekord alapján jeleníti meg a tartalmat; Widget Configuration — a widget típusának, méreteinek és családjainak leírása.

A WidgetKit maga kezeli a frissítést — a fejlesztő nem kényszerítheti ki a widget gyakoribb frissítését, mint amit a rendszer engedélyez. Az Apple frissítési költségvetést használ, amely eloszlik az eszköz összes widgetje között. Minimális időköz — 15–30 perc. Kritikus adatokhoz (pl. szállítási állapot) push-to-refresh használatos — egy push értesítés küldése releváns jövőbeli dátummal, amely után a WidgetKit új idővonalat kér. Az iOS 17-től kezdve a widgetek interaktivitást támogatnak az App Intenseken keresztül — a felhasználó megnyomhatja a widgeten belüli gombokat anélkül, hogy megnyitná az alkalmazást.

Android AppWidgetProvider: RemoteViews

AppWidgetProvider — a widgetek létrehozásának alaposztálya Androidon, az Android SDK része az API level 3 óta. Android widget — egy BroadcastReceiver, amely frissítési, aktiválási és deaktiválási eseményeket kap a rendszertől. Ellentétben az iOS-szel, ahol a widgetet a SwiftUI rajzolja a saját motorján, az Android RemoteViews-t — egy korlátozott View komponenskészletet használ, amely a rendszerfolyamatban (launcher) renderelődik. Egyéni View-k, összetett animációk vagy UI könyvtárak nem használhatók.

Az Android widget működési sémája négy szakaszból áll. Konfiguráció — a widget képernyőhöz adásakor a rendszer elindíthat egy konfigurációs Activity-t, ahol a felhasználó kiválasztja a beállításokat. Frissítés — a rendszer meghívja az onUpdate()-ot egy meghatározott időközönként (minimum 30 perc) vagy az alkalmazás jelzésére a WorkManageren keresztül. Renderelés — a szolgáltató RemoteViews-t hoz létre aktuális adatokkal, és továbbítja az AppWidgetManageren keresztül. Kattintások kezelése — a widget támogatja a PendingIntent-et a gombokhoz: kattintásra egy Activity nyílik meg, vagy művelet hajtódik végre. Az Android 12-től kezdve a widgetek támogatást kaptak a lekerekített sarkokhoz, az adaptív Material You színekhez és a dinamikus méretváltoztatáshoz.

Widget létrehozása iOS-en WidgetKit segítségével

Hozzunk létre egy időjárás widgetet Swift nyelven a WidgetKit és SwiftUI használatával. A projektnek tartalmaznia kell egy Widget Extension target-et, amely az Xcode-ban a File → New → Target → Widget Extension segítségével adható hozzá.

import WidgetKit
import SwiftUI

// 1. Adatmodell a widgethez
struct WeatherEntry: TimelineEntry {
    let date: Date
    let temperature: Int
    let condition: String
}

// 2. TimelineProvider — adatszolgáltató
struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> WeatherEntry {
        WeatherEntry(date: Date(), temperature: 22, condition: "Napos")
    }

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

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

// 3. SwiftUI View a megjelenítéshez
struct WeatherWidgetEntryView: View {
    var entry: WeatherEntry

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

// 4. Widget konfiguráció
@main
struct WeatherWidget: Widget {
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: "WeatherWidget", provider: Provider()) { entry in
            WeatherWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("Időjárás")
        .description("Aktuális hőmérsékletet mutat")
        .supportedFamilies([.systemSmall, .systemMedium])
    }
}

Kulcsfontosságú pontok: TimelineProvider meghatározza, hogy mikor és milyen adatokat jelenítsen meg; getTimeline idővonalat hoz létre .after(nextUpdate) frissítési irányelvvel; StaticConfiguration összeköti a szolgáltatót a View-val. Dinamikus adatokhoz az IntentConfiguration használatos felhasználói paraméterekkel.

Widget létrehozása Androidon AppWidgetProvider segítségével

Valósítsunk meg egy hasonló időjárás widgetet Kotlin nyelven az AppWidgetProvider és RemoteViews segítségével.

// 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 = "Felhős"
            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 — szolgáltató regisztrációja
<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>

A widget_weather_info.xml fájl beállítja a minimális méreteket, időközt és layout-ot: minWidth 160dp, minHeight 80dp, updatePeriodMillis 3600000 (1 óra). A RemoteViews csak támogatott összetevőket használ: LinearLayout, TextView, ImageView. Az egyéni View és a ConstraintLayout Android 5.0 óta érhető el. A GlanceLayout — kísérleti Compose megközelítés a RemoteViews számára — az Android 15-ben jelent meg.