Le sezioni seguenti descrivono come creare un semplice widget dell'app con Glance.
Dichiara AppWidget
nel manifest
Dopo aver completato i passaggi di configurazione, dichiara AppWidget
e i relativi
nella tua app.
- Registra il provider del widget dell'app nel file
AndroidManifest.xml
e il 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>
- Estendi il ricevitore
AppWidget
daGlanceAppWidgetReceiver
:
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() { override val glanceAppWidget: GlanceAppWidget = TODO("Create GlanceAppWidget") }
Aggiungi i metadati AppWidgetProviderInfo
A questo punto, segui questo passaggio per aggiungere i metadati AppWidgetProviderInfo
:
Segui la guida Creare un widget semplice per creare e definire l'app. le informazioni del widget nel file
@xml/my_app_widget_info
.L'unica differenza con Glance è che non esiste un file XML
initialLayout
, ma devi definirne uno. Puoi utilizzare il layout di caricamento predefinito disponibile in nella libreria:
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
android:initialLayout="@layout/glance_default_loading_layout">
</appwidget-provider>
Definisci GlanceAppWidget
Crea una nuova classe che si estende da
GlanceAppWidget
e sostituisce ilprovideGlance
. Questo è il metodo in cui puoi 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") } } }
- Crea un'istanza in
glanceAppWidget
suGlanceAppWidgetReceiver
:
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() { // Let MyAppWidgetReceiver know which GlanceAppWidget to use override val glanceAppWidget: GlanceAppWidget = MyAppWidget() }
Hai configurato AppWidget
utilizzando la funzionalità Riepilogo.
Crea UI
Il seguente snippet mostra come creare la UI:
/* 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>() ) } } } }
L'esempio di codice precedente esegue queste operazioni:
- Nel livello superiore
Column
, gli elementi vengono posizionati verticalmente uno dopo ogni e l'altro. Column
espande le proprie dimensioni per adattarle allo spazio disponibile (tramite il tagGlanceModifier
e allinea i suoi contenuti in alto (verticalAlignment
) e la centra orizzontalmente (horizontalAlignment
).- I contenuti di
Column
vengono definiti utilizzando la funzione lambda. L'ordine è importante.- Il primo elemento in
Column
è un componenteText
con12.dp
di spaziatura interna. - Il secondo elemento è una
Row
, con gli elementi posizionati in orizzontale uno dopo l'altro, con dueButtons
centrati orizzontalmente (horizontalAlignment
). La visualizzazione finale dipende dallo spazio disponibile. L'immagine seguente è un esempio del possibile aspetto:
- Il primo elemento in
![widget_destinazione](https://developer.android.com/static/develop/ui/compose/images/destination_widget.png?authuser=0000&hl=it)
Puoi cambiare i valori di allineamento o applicare valori di modifica diversi (ad esempio spaziatura interna) per modificare il posizionamento e le dimensioni dei componenti. Consulta il riferimento documentazione per un elenco completo di componenti, parametri e modificatori di ogni classe.