Widget: bu nima, iOS WidgetKit va Android uchun vidjetlar

Widget nima

Widget — mobil qurilmaning bosh ekraniga ilovadan dolzarb ma'lumotni ko'rsatish uchun joylashtiriladigan ixcham foydalanuvchi interfeysi elementi. To'liq ilovadan farqli o'laroq, vidjet ishga tushirishni talab qilmaydi — foydalanuvchi ekranni qulfdan chiqargach darhol ma'lumotni ko'radi. Kontseptsiya ish stoli OT laridan (macOS Dashboard, Windows Sidebar) kelib chiqqan, mobil muhitda esa Android vidjetlarni qo'llab-quvvatlashni birinchi chiqarilishidan (Android 1.5 Cupcake, 2009) kiritgan, Apple esa ularni faqat iOS 14 da qo'shgan.

Texnik amalga oshirish platformalarda farq qiladi. iOS vidjeti — Xcode da alohida target, Widget Extension sifatida kompilyatsiya qilinadi, o'z jarayonida ishlaydi. Android vidjeti — AppWidgetProvider ni kengaytiruvchi BroadcastReceiver, layout ni RemoteViews orqali render qiladi. Ikkala platforma ham samaradorlik va xotiraga qattiq cheklovlar qo'yadi: sistema limitlar oshib ketganda vidjetni o'chirishi mumkin. iOS vidjetni 30–50 MB va timeline shakllantirish vaqtini 10 soniya bilan cheklaydi. Android — updatePeriodMillis orqali yangilash oralig'i 30 daqiqadan tez bo'lmasligi kerak va onUpdate osilib qolganda majburiy to'xtatish.

Smart Stack iOS da va to'plamlar Android da foydalanuvchiga bir nechta vidjetlarni home screen da bitta slotga guruhlash imkonini beradi. Qurilma kun vaqti, joy yoki foydalanuvchi faoliyatiga qarab ko'rsatiladigan vidjetni avtomatik ravishda o'zgartiradi. Masalan, ertalab kalendar, kunduzi ob-havo, kechqurun eslatmalar ko'rsatiladi. Dasturchi uchun bu vidjet to'plam tarkibida to'g'ri ishlashi va doimiy ko'rsatilishga tayanmasligi kerak degan ma'noni anglatadi.

iOS WidgetKit: SwiftUI va TimelineProvider

WidgetKit — iOS 14+, iPadOS 14+ va macOS 11+ uchun vidjetlar yaratish uchun Apple freymvorki. Vidjetlar SwiftUI va tarkibni yangilash uchun TimelineProvider mexanizmidan foydalanib Swift da yoziladi. WidgetKit arxitekturasi uch komponentdan iborat: TimelineProvider — yozuvlar bilan vaqt shkalasini shakllantiruvchi ma'lumot manbai; Widget Entry View — yozuv asosida tarkibni ko'rsatuvchi SwiftUI View; Widget Configuration — vidjet turi, o'lchamlari va oilalarini tavsiflovchi konfiguratsiya.

WidgetKit yangilashni o'zi boshqaradi — dasturchi sistema ruxsat berganidan tez-tez vidjetni yangilay olmaydi. Apple qurilmadagi barcha vidjetlar o'rtasida taqsimlanadigan yangilash byudjetidan foydalanadi. Minimal interval — 15–30 daqiqa. Kritik ma'lumotlar uchun (masalan, yetkazib berish holati) push-to-refresh ishlatiladi — kelajakda tegishli sana bilan push bildirishnomasi yuboriladi, shundan so'ng WidgetKit yangi timeline ni so'raydi. iOS 17 dan boshlab vidjetlar App Intents orqali interaktivlikni qo'llab-quvvatlaydi — foydalanuvchi ilovani ochmasdan vidjet ichidagi tugmalarni bosishi mumkin.

Android AppWidgetProvider: RemoteViews

AppWidgetProvider — Android da vidjetlar yaratish uchun API level 3 dan Android SDK tarkibiga kiruvchi asosiy sinf. Android vidjeti — sistemadan yangilash, faollashtirish va o'chirish hodisalarini oluvchi BroadcastReceiver dir. iOS da vidjet SwiftUI tomonidan o'z dvigatelida chizilgan bo'lsa, Android RemoteViews — sistema jarayonida (launcher da) render qilinadigan cheklangan View komponentlar to'plamidan foydalanadi. Maxsus View lar, murakkab animatsiyalar yoki UI kutubxonalaridan foydalanish mumkin emas.

Android vidjetining ish sxemasi to'rt bosqichdan iborat. Konfiguratsiya — vidjet ekranga qo'shilganda sistema foydalanuvchi sozlamalarni tanlaydigan konfiguratsiya Activity sini ishga tushirishi mumkin. Yangilash — sistema onUpdate() ni belgilangan intervalda (minimum 30 daqiqa) yoki WorkManager orqali ilovadan signal bilan chaqiradi. Renderlash — provayder joriy ma'lumotlar bilan RemoteViews yaratadi va uni AppWidgetManager orqali uzatadi. Bosishlarni qayta ishlash — vidjet tugmalar uchun PendingIntent ni qo'llab-quvvatlaydi: bosilganda Activity ochiladi yoki amal bajariladi. Android 12 dan boshlab vidjetlar yumaloq burchaklar, Material You adaptiv ranglari va dinamik o'lcham o'zgartirishni qo'llab-quvvatlaydi.

iOS da WidgetKit bilan vidjet yaratish

WidgetKit va SwiftUI dan foydalanib Swift da ob-havo vidjetini yarataylik. Loyiha Xcode da File → New → Target → Widget Extension orqali qo'shiladigan Widget Extension target ini o'z ichiga olishi kerak.

import WidgetKit
import SwiftUI

// 1. Vidjet uchun ma'lumot modeli
struct WeatherEntry: TimelineEntry {
    let date: Date
    let temperature: Int
    let condition: String
}

// 2. TimelineProvider — ma'lumot yetkazib beruvchi
struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> WeatherEntry {
        WeatherEntry(date: Date(), temperature: 22, condition: "Quyoshli")
    }

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

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

// 3. Ko'rsatish uchun SwiftUI View
struct WeatherWidgetEntryView: View {
    var entry: WeatherEntry

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

// 4. Vidjet konfiguratsiyasi
@main
struct WeatherWidget: Widget {
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: "WeatherWidget", provider: Provider()) { entry in
            WeatherWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("Ob-havo")
        .description("Joriy haroratni ko'rsatadi")
        .supportedFamilies([.systemSmall, .systemMedium])
    }
}

Asosiy nuqtalar: TimelineProvider qachon va qanday ma'lumotlarni ko'rsatishni aniqlaydi; getTimeline .after(nextUpdate) yangilash siyosati bilan vaqt shkalasini yaratadi; StaticConfiguration provayderni View bilan bog'laydi. Dinamik ma'lumotlar uchun foydalanuvchi parametrlari bilan IntentConfiguration ishlatiladi.

Android da AppWidgetProvider bilan vidjet yaratish

AppWidgetProvider va RemoteViews bilan Kotlin da o'xshash ob-havo vidjetini amalga oshiramiz.

// 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 = "Bulutli"
            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 — provayderni ro'yxatdan o'tkazish
<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 fayli minimal o'lchamlarni, intervalni va layout ni belgilaydi: minWidth 160dp, minHeight 80dp, updatePeriodMillis 3600000 (1 soat). RemoteViews faqat qo'llab-quvvatlanadigan komponentlardan foydalanadi: LinearLayout, TextView, ImageView. Maxsus View va ConstraintLayout Android 5.0 dan boshlab mavjud. GlanceLayout — RemoteViews uchun eksperimental Compose yondashuvi — Android 15 da paydo bo'ldi.