Widget: ano ito, mga widget sa iOS WidgetKit at Android

Ano ang Widget

Widget — ay isang compact na elemento ng user interface na inilalagay sa home screen ng mobile device para sa pagpapakita ng napapanahong impormasyon mula sa application. Hindi tulad ng isang buong application, ang widget ay hindi nangangailangan ng paglulunsad — nakikita ng gumagamit ang data kaagad pagkatapos i-unlock ang screen. Ang konsepto ay nagmula sa desktop OS (macOS Dashboard, Windows Sidebar), at sa mobile na kapaligiran, ipinakilala ng Android ang suporta para sa mga widget mula sa unang paglabas nito (Android 1.5 Cupcake, 2009), habang idinagdag lamang ito ng Apple sa iOS 14.

Teknikal na pagpapatupad ay naiiba sa mga platform. Widget ng iOS — isang hiwalay na target sa Xcode, na compile bilang Widget Extension, tumatakbo sa sarili nitong proseso. Widget ng Android — isang BroadcastReceiver na nagpapalawak ng AppWidgetProvider, nagre-render ng layout sa pamamagitan ng RemoteViews. Ang parehong platform ay nagpapataw ng mahigpit na paghihigpit sa pagganap at memorya: maaaring tanggalin ng system ang widget kapag lumampas sa mga limitasyon. Nililimitahan ng iOS ang widget sa 30–50 MB at oras ng pagbuo ng timeline hanggang 10 segundo. Android — agwat ng pag-update hindi hihigit sa 30 minuto sa pamamagitan ng updatePeriodMillis at sapilitang pagtatapos kapag nag-freeze ang onUpdate.

Smart Stack sa iOS at mga stack sa Android ay nagpapahintulot sa gumagamit na pagsama-samahin ang maraming widget sa isang slot sa home screen. Awtomatikong pinapalitan ng device ang ipinapakitang widget depende sa oras ng araw, lokasyon, o aktibidad ng gumagamit. Halimbawa, sa umaga ay nagpapakita ng kalendaryo, sa tanghali — panahon, sa gabi — mga tala. Para sa developer, nangangahulugan ito na ang widget ay dapat gumana nang tama sa loob ng isang stack at hindi umasa sa patuloy na pagpapakita.

iOS WidgetKit: SwiftUI at TimelineProvider

WidgetKit — framework ng Apple para sa paglikha ng mga widget sa iOS 14+, iPadOS 14+ at macOS 11+. Ang mga widget ay isinulat sa Swift gamit ang SwiftUI at mekanismo ng TimelineProvider para sa pag-update ng nilalaman. Ang arkitektura ng WidgetKit ay may kasamang tatlong bahagi: TimelineProvider — pinagmumulan ng data na bumubuo ng timeline na may mga tala; Widget Entry View — SwiftUI View na nagpapakita ng nilalaman batay sa tala; Widget Configuration — paglalarawan ng uri, sukat, at pamilya ng widget.

WidgetKit mismo ang namamahala sa pag-update — hindi maaaring pilitin ng developer ang widget na mag-update nang mas madalas kaysa pinapayagan ng system. Gumagamit ang Apple ng badyet sa pag-update na ipinamamahagi sa lahat ng widget sa device. Pinakamababang agwat — 15–30 minuto. Para sa kritikal na data (hal., katayuan ng paghahatid) ginagamit ang push-to-refresh — pagpapadala ng push notification na may kaugnay na petsa sa hinaharap, pagkatapos ay humihiling ang WidgetKit ng bagong timeline. Mula noong iOS 17, sinusuportahan ng mga widget ang interaktibidad sa pamamagitan ng App Intents — maaaring pindutin ng gumagamit ang mga button sa loob ng widget nang hindi binubuksan ang application.

Android AppWidgetProvider: RemoteViews

AppWidgetProvider — base class para sa paglikha ng mga widget sa Android, bahagi ng Android SDK mula noong API level 3. Widget ng Android — ay isang BroadcastReceiver na tumatanggap ng mga kaganapan sa pag-update, pag-activate, at pag-deactivate mula sa system. Hindi tulad ng iOS, kung saan ang widget ay iginuhit ng SwiftUI sa sarili nitong engine, ang Android ay gumagamit ng RemoteViews — isang limitadong hanay ng mga bahagi ng View na nire-render sa proseso ng system (launcher). Hindi maaaring gumamit ng custom na View, kumplikadong animation, o UI library.

Skema ng trabaho ng Android widget ay may kasamang apat na yugto. Configuration — kapag idinagdag ang widget sa screen, maaaring maglunsad ang system ng configuration Activity kung saan pinipili ng gumagamit ang mga setting. Update — tinatawagan ng system ang onUpdate() sa isang tinukoy na agwat (minimum 30 minuto) o sa signal mula sa application sa pamamagitan ng WorkManager. Rendering — lumilikha ang provider ng RemoteViews na may kasalukuyang data at ipinapadala ito sa pamamagitan ng AppWidgetManager. Paghawak ng pag-click — sinusuportahan ng widget ang PendingIntent para sa mga button: kapag na-click, nagbubukas ang isang Activity o nagsasagawa ng aksyon. Mula noong Android 12, nakatanggap ang mga widget ng suporta para sa mga bilugan na sulok, adaptive na kulay ng Material You, at dynamic na pagbabago ng laki.

Paglikha ng widget sa iOS gamit ang WidgetKit

Gumawa tayo ng widget ng panahon sa Swift gamit ang WidgetKit at SwiftUI. Ang proyekto ay dapat maglaman ng Widget Extension target, idinagdag sa Xcode sa pamamagitan ng File → New → Target → Widget Extension.

import WidgetKit
import SwiftUI

// 1. Modelo ng data para sa widget
struct WeatherEntry: TimelineEntry {
    let date: Date
    let temperature: Int
    let condition: String
}

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

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

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

// 3. SwiftUI View para sa pagpapakita
struct WeatherWidgetEntryView: View {
    var entry: WeatherEntry

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

// 4. Configuration ng widget
@main
struct WeatherWidget: Widget {
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: "WeatherWidget", provider: Provider()) { entry in
            WeatherWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("Panahon")
        .description("Nagpapakita ng kasalukuyang temperatura")
        .supportedFamilies([.systemSmall, .systemMedium])
    }
}

Mga pangunahing punto: TimelineProvider ay tumutukoy kung kailan at anong data ang ipapakita; getTimeline ay lumilikha ng timeline na may patakaran sa pag-update na .after(nextUpdate); StaticConfiguration ay nag-uugnay ng provider sa View. Para sa dynamic na data, ginagamit ang IntentConfiguration na may mga parameter ng gumagamit.

Paglikha ng widget sa Android gamit ang AppWidgetProvider

Ipapatupad natin ang isang katulad na widget ng panahon sa Kotlin gamit ang AppWidgetProvider at 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 = "Maulap"
            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 — pagpaparehistro ng provider
<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>

Ang file na widget_weather_info.xml ay nagtatakda ng mga minimum na sukat, agwat, at layout: minWidth 160dp, minHeight 80dp, updatePeriodMillis 3600000 (1 oras). Ang RemoteViews ay gumagamit lamang ng mga sinusuportahang bahagi: LinearLayout, TextView, ImageView. Ang custom na View at ConstraintLayout ay available mula noong Android 5.0. GlanceLayout — eksperimental na Compose approach para sa RemoteViews — ay lumitaw sa Android 15.