Creare un widget dell'app con Riepilogo

Le seguenti sezioni descrivono come creare un widget dell'app semplice con Glance.

Dichiara AppWidget nel manifest

Dopo aver completato la procedura di configurazione, dichiara AppWidget e i relativi metadati nell'app.

1. Registra il provider del widget dell'app nel file AndroidManifest.xml e nel file di metadati associato:

<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. Estendi il destinatario AppWidget da GlanceAppWidgetReceiver:

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

Aggiungi i metadati AppWidgetProviderInfo

A questo punto, segui questo passaggio per aggiungere i metadati AppWidgetProviderInfo:

1. Segui la guida Crea un semplice widget per creare e definire le informazioni del widget dell'app nel file @xml/my_app_widget_info.

   L'unica differenza per la funzionalità Riepilogo è che non esiste un XML initialLayout, ma devi definirne uno. Puoi utilizzare il layout di caricamento predefinito fornito nella libreria:

<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

Definisci GlanceAppWidget

1. Crea una nuova classe che si estende da GlanceAppWidget e sostituisca il metodo provideGlance. Questo è il metodo per caricare i dati necessari per il rendering del widget:

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. Crea un'istanza in glanceAppWidget sul tuo GlanceAppWidgetReceiver:

class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {

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

Hai configurato un'AppWidget utilizzando Glance.

Crea UI

Lo snippet seguente mostra come creare l'interfaccia utente:

/* 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<MainActivity>()
                )
                Button(
                    text = "Work",
                    onClick = actionStartActivity<MainActivity>()
                )
            }
        }
    }
}
GlanceSnippets.kt

L'esempio di codice precedente esegue quanto segue:

• Nel livello superiore Column, gli elementi vengono posizionati verticalmente uno dopo l'altro.
• L'elemento Column espande le proprie dimensioni in base allo spazio disponibile (tramite GlanceModifier, allinea i contenuti in alto (verticalAlignment) e lo centra orizzontalmente (horizontalAlignment).
• I contenuti di Column vengono definiti utilizzando la funzione lambda. L'ordine è importante.
  • Il primo elemento in Column è un componente Text con 12.dp di spaziatura interna.
  • Il secondo elemento è una Row, in cui gli elementi vengono posizionati orizzontalmente uno dopo l'altro, con due Buttons centrate orizzontalmente (horizontalAlignment). La visualizzazione finale dipende dallo spazio disponibile. La seguente immagine è un esempio di come potrebbe presentarsi:

Puoi modificare i valori di allineamento o applicare valori di modifica diversi (ad esempio la spaziatura interna) per cambiare il posizionamento e le dimensioni dei componenti. Consulta la documentazione di riferimento per un elenco completo dei componenti, dei parametri e dei modificatori disponibili per ogni classe.