Widget: यह क्या है, iOS WidgetKit और Android पर विजेट

Widget क्या है

Widget एक कॉम्पैक्ट यूज़र इंटरफ़ेस तत्व है जो किसी मोबाइल डिवाइस की होम स्क्रीन पर रखा जाता है ताकि किसी ऐप से प्रासंगिक जानकारी प्रदर्शित हो सके। पूर्ण एप्लिकेशन के विपरीत, विजेट को लॉन्च करने की आवश्यकता नहीं होती — उपयोगकर्ता स्क्रीन अनलॉक करने के तुरंत बाद डेटा देखता है। यह अवधारणा डेस्कटॉप OS (macOS Dashboard, Windows Sidebar) से उत्पन्न हुई, और मोबाइल वातावरण में, Android ने अपने पहले रिलीज़ (Android 1.5 Cupcake, 2009) से विजेट समर्थन पेश किया, जबकि Apple ने इसे केवल iOS 14 में जोड़ा।

तकनीकी कार्यान्वयन प्लेटफ़ॉर्म के अनुसार भिन्न होता है। iOS विजेट Xcode में एक अलग target है, जिसे Widget Extension के रूप में संकलित किया जाता है और अपनी प्रक्रिया में चलता है। Android विजेट एक BroadcastReceiver है जो AppWidgetProvider का विस्तार करता है और RemoteViews के माध्यम से लेआउट प्रस्तुत करता है। दोनों प्लेटफ़ॉर्म सख्त प्रदर्शन और मेमोरी प्रतिबंध लगाते हैं: सीमा पार होने पर सिस्टम विजेट को हटा सकता है। iOS विजेट को 30–50 MB और टाइमलाइन निर्माण समय को 10 सेकंड तक सीमित करता है। Android — updatePeriodMillis के माध्यम से 30 मिनट से अधिक का अंतराल नहीं और onUpdate हैंग होने पर जबरन समाप्ति।

Smart Stack iOS पर और Android पर स्टैक उपयोगकर्ता को होम स्क्रीन स्लॉट में कई विजेट समूहित करने की अनुमति देते हैं। डिवाइस दिन के समय, स्थान या उपयोगकर्ता गतिविधि के आधार पर प्रदर्शित विजेट को स्वचालित रूप से स्विच करता है। उदाहरण के लिए, सुबह कैलेंडर दिखाया जाता है, दिन में — मौसम, शाम को — नोट्स। डेवलपर्स के लिए, इसका मतलब है कि विजेट को स्टैक के हिस्से के रूप में सही ढंग से काम करना चाहिए और निरंतर प्रदर्शन पर निर्भर नहीं होना चाहिए।

iOS WidgetKit: SwiftUI और TimelineProvider

WidgetKit iOS 14+, iPadOS 14+ और macOS 11+ पर विजेट बनाने के लिए Apple का फ्रेमवर्क है। विजेट SwiftUI और सामग्री अपडेट के लिए TimelineProvider तंत्र का उपयोग करके Swift में लिखे जाते हैं। WidgetKit आर्किटेक्चर में तीन घटक शामिल हैं: TimelineProvider — एक डेटा स्रोत जो प्रविष्टियों के साथ एक समयरेखा बनाता है; Widget Entry View — एक SwiftUI View जो प्रविष्टि के आधार पर सामग्री प्रदर्शित करती है; Widget Configuration — विजेट प्रकार, आकार और परिवारों का विवरण।

WidgetKit अपडेट को स्वचालित रूप से प्रबंधित करता है — डेवलपर सिस्टम की अनुमति से अधिक बार विजेट अपडेट करने के लिए बाध्य नहीं कर सकता। Apple डिवाइस पर सभी विजेट के बीच वितरित अपडेट बजट का उपयोग करता है। न्यूनतम अंतराल 15–30 मिनट है। महत्वपूर्ण डेटा (जैसे डिलीवरी स्थिति) के लिए, push-to-refresh का उपयोग किया जाता है — प्रासंगिक भविष्य की तारीख के साथ एक push सूचना भेजना, जिसके बाद WidgetKit एक नई टाइमलाइन का अनुरोध करता है। iOS 17 से, विजेट App Intents के माध्यम से इंटरैक्टिविटी का समर्थन करते हैं — उपयोगकर्ता ऐप खोले बिना विजेट के अंदर बटन दबा सकते हैं।

Android AppWidgetProvider: RemoteViews

AppWidgetProvider Android पर विजेट बनाने के लिए आधार वर्ग है, जो API level 3 से Android SDK का हिस्सा है। Android विजेट एक BroadcastReceiver है जो सिस्टम से अपडेट, सक्षम और अक्षम ईवेंट प्राप्त करता है। iOS के विपरीत, जहाँ विजेट अपने इंजन पर SwiftUI के साथ प्रस्तुत किया जाता है, Android RemoteViews का उपयोग करता है — सिस्टम प्रक्रिया (launcher) में प्रस्तुत View घटकों का सीमित सेट। कस्टम Views, जटिल एनिमेशन या UI लाइब्रेरी का उपयोग नहीं किया जा सकता।

Android विजेट का कार्यप्रवाह चार चरणों में शामिल है। कॉन्फ़िगरेशन — स्क्रीन पर विजेट जोड़ते समय, सिस्टम एक कॉन्फ़िगरेशन Activity लॉन्च कर सकता है जहाँ उपयोगकर्ता सेटिंग्स चुनता है। अपडेट — सिस्टम निर्दिष्ट अंतराल पर (न्यूनतम 30 मिनट) या WorkManager के माध्यम से ऐप से सिग्नल पर onUpdate() कॉल करता है। रेंडरिंग — प्रदाता वर्तमान डेटा के साथ RemoteViews बनाता है और उन्हें AppWidgetManager के माध्यम से पास करता है। टच हैंडलिंग — विजेट बटन के लिए PendingIntent का समर्थन करता है: क्लिक करने पर Activity खुलती है या कार्रवाई होती है। Android 12 से, विजेट को गोल कोनों, अनुकूली Material You रंगों और गतिशील आकार परिवर्तन का समर्थन मिला।

iOS पर WidgetKit के साथ विजेट बनाना

आइए WidgetKit और SwiftUI का उपयोग करके Swift में मौसम विजेट बनाएं। प्रोजेक्ट में Widget Extension target शामिल होना चाहिए, जिसे Xcode में File → New → Target → Widget Extension के माध्यम से जोड़ा जाता है।

import WidgetKit
import SwiftUI

// 1. विजेट के लिए डेटा मॉडल
struct WeatherEntry: TimelineEntry {
    let date: Date
    let temperature: Int
    let condition: String
}

// 2. TimelineProvider — डेटा प्रदाता
struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> WeatherEntry {
        WeatherEntry(date: Date(), temperature: 22, condition: "धूप")
    }

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

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

// 3. प्रदर्शन के लिए SwiftUI View
struct WeatherWidgetEntryView: View {
    var entry: WeatherEntry

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

// 4. विजेट कॉन्फ़िगरेशन
@main
struct WeatherWidget: Widget {
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: "WeatherWidget", provider: Provider()) { entry in
            WeatherWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("मौसम")
        .description("वर्तमान तापमान दिखाता है")
        .supportedFamilies([.systemSmall, .systemMedium])
    }
}

मुख्य बिंदु: TimelineProvider यह निर्धारित करता है कि कब और कौन सा डेटा दिखाना है; getTimeline .after(nextUpdate) अपडेट नीति के साथ एक टाइमलाइन बनाता है; StaticConfiguration प्रदाता को View से जोड़ता है। गतिशील डेटा के लिए, कस्टम पैरामीटर के साथ IntentConfiguration का उपयोग किया जाता है।

Android पर AppWidgetProvider के साथ विजेट बनाना

आइए AppWidgetProvider और RemoteViews के साथ Kotlin में समान मौसम विजेट लागू करें।

// 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 = "बादल"
            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 — प्रदाता पंजीकरण
<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>

widget_weather_info.xml फ़ाइल न्यूनतम आकार, अंतराल और लेआउट सेट करती है: minWidth 160dp, minHeight 80dp, updatePeriodMillis 3600000 (1 घंटा)। RemoteViews केवल समर्थित घटकों का उपयोग करता है: LinearLayout, TextView, ImageView। कस्टम Views और ConstraintLayout Android 5.0 से उपलब्ध हैं। GlanceLayout — RemoteViews के लिए एक प्रायोगिक Compose-आधारित दृष्टिकोण — Android 15 में दिखाई दिया।