एक नज़र में जानकारी देखने की सुविधा की मदद से ऐप्लिकेशन का विजेट बनाना

इन सेक्शन में, एक नज़र में जानकारी देखने की सुविधा की मदद से ऐप्लिकेशन का विजेट बनाने का तरीका बताया गया है.

अहम जानकारी: एक नज़र में जानकारी देखने की सुविधा, Compose का इस्तेमाल करके ऐप्लिकेशन के विजेट बनाने का नया तरीक़ा उपलब्ध कराती है. लेकिन AppWidgets और RemoteViews की सीमाओं के तहत प्रतिबंधित है. इसलिए, एक नज़र में जानकारी देखने की सुविधा, Jetpack Compose के यूज़र इंटरफ़ेस (यूआई) से अलग कंपोज़ेबल का इस्तेमाल करती है.

मेनिफ़ेस्ट में AppWidget का एलान करें

सेटअप के चरण पूरे करने के बाद, AppWidget और मेटाडेटा भी शामिल है.

1. ऐप्लिकेशन विजेट की सेवा देने वाले को अपनी AndroidManifest.xml फ़ाइल में रजिस्टर करें और संबंधित मेटाडेटा फ़ाइल:

<receiver android:name=".glance.MyReceiver"
    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/my_app_widget_info" />
</receiver>
AndroidManifest.xml

1. GlanceAppWidgetReceiver से AppWidget पाने वाले डिवाइस का समय बढ़ाएं:

class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {
    override val glanceAppWidget: GlanceAppWidget = TODO("Create GlanceAppWidget")
}
GlanceSnippets.kt

AppWidgetProviderInfo मेटाडेटा जोड़ें

इसके बाद, AppWidgetProviderInfo मेटाडेटा जोड़ने के लिए यह तरीका अपनाएं:

1. ऐप्लिकेशन बनाने और तय करने के लिए, आसान विजेट बनाएं गाइड का पालन करें @xml/my_app_widget_info फ़ाइल में विजेट की जानकारी.

   एक नज़र में जानकारी देखने में सिर्फ़ यह अंतर है कि इसमें कोई initialLayout एक्सएमएल नहीं है, लेकिन आपको एक की परिभाषा तय करनी होगी. आपके पास, लोड होने के लिए पहले से तय किए गए लेआउट का इस्तेमाल करने का विकल्प होता है. लाइब्रेरी:

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:initialLayout="@layout/glance_default_loading_layout">
</appwidget-provider>
my_app_widget_info.xml

GlanceAppWidget तय करें

1. एक ऐसी नई क्लास बनाएं जो GlanceAppWidget से जुड़ी हो और provideGlance तरीका. आप इस तरीके से वह डेटा लोड कर सकते हैं आपके विजेट को रेंडर करने के लिए ज़रूरी है:

   ध्यान दें: provideGlance मुख्य थ्रेड पर चलता है. लंबे समय तक दौड़ने के लिए provideGlance में ऑपरेशन, इसका इस्तेमाल करके किसी दूसरी थ्रेड पर स्विच करें withContext. इस बारे में ज़्यादा जानने के लिए, मुख्य सुरक्षा के लिए कोरूटीन इस्तेमाल करना लेख पढ़ें मुख्य थ्रेड से बाहर कैसे काम करते हैं.

class MyAppWidget : GlanceAppWidget() {

    override suspend fun provideGlance(context: Context, id: GlanceId) {

        // In this method, load data needed to render the AppWidget.
        // Use `withContext` to switch to another thread for long running
        // operations.

        provideContent {
            // create your AppWidget here
            Text("Hello World")
        }
    }
}
GlanceSnippets.kt

1. इसे अपने GlanceAppWidgetReceiver पर glanceAppWidget में इंस्टैंशिएट करें:

class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {

    // Let MyAppWidgetReceiver know which GlanceAppWidget to use
    override val glanceAppWidget: GlanceAppWidget = MyAppWidget()
}
GlanceSnippets.kt

अब आपने एक नज़र में जानकारी का इस्तेमाल करके AppWidget को कॉन्फ़िगर कर लिया है.

यूज़र इंटरफ़ेस (यूआई) बनाएं

नीचे दिया गया स्निपेट यूज़र इंटरफ़ेस (यूआई) बनाने का तरीका बताता है:

/* Import Glance Composables
 In the event there is a name clash with the Compose classes of the same name,
 you may rename the imports per https://kotlinlang.org/docs/packages.html#imports
 using the `as` keyword.

import androidx.glance.Button
import androidx.glance.layout.Column
import androidx.glance.layout.Row
import androidx.glance.text.Text
*/
class MyAppWidget : GlanceAppWidget() {

    override suspend fun provideGlance(context: Context, id: GlanceId) {
        // Load data needed to render the AppWidget.
        // Use `withContext` to switch to another thread for long running
        // operations.

        provideContent {
            // create your AppWidget here
            GlanceTheme {
                MyContent()
            }
        }
    }

    @Composable
    private fun MyContent() {
        Column(
            modifier = GlanceModifier.fillMaxSize()
                .background(GlanceTheme.colors.background),
            verticalAlignment = Alignment.Top,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "Where to?", modifier = GlanceModifier.padding(12.dp))
            Row(horizontalAlignment = Alignment.CenterHorizontally) {
                Button(
                    text = "Home",
                    onClick = actionStartActivity<MyActivity>()
                )
                Button(
                    text = "Work",
                    onClick = actionStartActivity<MyActivity>()
                )
            }
        }
    }
}
GlanceSnippets.kt

ऊपर दिया गया कोड सैंपल ये काम करता है:

• टॉप लेवल Column में, आइटम को हर एक के बाद वर्टिकल तौर पर रखा जाता है अन्य.
• Column, उपलब्ध जगह के हिसाब से अपना साइज़ बड़ा कर लेता है. इसके लिए, GlanceModifier और इसके कॉन्टेंट को सबसे ऊपर अलाइन करता है (verticalAlignment) और इसे हॉरिज़ॉन्टल तौर पर सेंटर में लाता है (horizontalAlignment).
• Column का कॉन्टेंट, Lambda फ़ंक्शन का इस्तेमाल करके तय किया जाता है. क्रम महत्वपूर्ण होता है.
  • Column में पहला आइटम एक Text कॉम्पोनेंट है, जिसमें 12.dp हैं पैडिंग.
  • दूसरा आइटम Row है, जिसमें आइटम को हॉरिज़ॉन्टल तौर पर रखा जाता है एक-दूसरे के बाद, दो Buttons हॉरिज़ॉन्टल तौर पर बीच में (horizontalAlignment). फ़ाइनल डिसप्ले, खाली जगह के हिसाब से दिखता है. नीचे दी गई इमेज में बताया गया है कि यह कैसी दिख सकती है:

पहली इमेज. यूज़र इंटरफ़ेस (यूआई) का उदाहरण.

आप अलाइनमेंट वैल्यू को बदल सकते हैं या कार्रवाई बदलने वाली अलग-अलग वैल्यू लागू कर सकते हैं (जैसे पैडिंग (जगह). इससे कॉम्पोनेंट के प्लेसमेंट और साइज़ में बदलाव किया जा सकता है. संदर्भ देखें दस्तावेज़ में कॉम्पोनेंट, पैरामीटर, और उपलब्ध हर क्लास के लिए, कार्रवाई बदलने वाली कुंजी.