Créer un widget d'application avec Glance

Les sections suivantes décrivent comment créer un widget d'application simple avec Glance.

Déclarer AppWidget dans le fichier manifeste

Une fois les étapes de configuration terminées, déclarez l'élément AppWidget et ses métadonnées dans votre application.

1. Enregistrez le fournisseur du widget d'application dans votre fichier AndroidManifest.xml et le fichier de métadonnées associé:

<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. Étendez le récepteur AppWidget à partir de GlanceAppWidgetReceiver:

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

Ajouter les métadonnées AppWidgetProviderInfo

Procédez ensuite comme suit pour ajouter les métadonnées AppWidgetProviderInfo:

1. Suivez le guide Créer un widget simple pour créer et définir les informations du widget d'application dans le fichier @xml/my_app_widget_info.

   La seule différence avec Glance est qu'il n'existe pas de fichier XML initialLayout, mais vous devez en définir un. Vous pouvez utiliser la mise en page de chargement prédéfinie fournie dans la bibliothèque:

<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

Définir GlanceAppWidget

1. Créez une classe qui s'étend à partir de GlanceAppWidget et remplace la méthode provideGlance. Cette méthode vous permet de charger les données nécessaires à l'affichage de votre 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. Instanciez-le dans le glanceAppWidget sur votre GlanceAppWidgetReceiver:

class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {

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

Vous avez maintenant configuré un AppWidget à l'aide de Glance.

Créer une UI

L'extrait de code suivant montre comment créer l'interface utilisateur:

/* 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'exemple de code précédent effectue les opérations suivantes:

• Dans le niveau Column supérieur, les éléments sont placés verticalement les uns après les autres.
• Column étend sa taille pour correspondre à l'espace disponible (via l'GlanceModifier), aligne son contenu avec la partie supérieure (verticalAlignment) et le centre horizontalement (horizontalAlignment).
• Le contenu de Column est défini à l'aide du lambda. L'ordre a son importance.
  • Le premier élément de Column est un composant Text avec une marge intérieure de 12.dp.
  • Le deuxième élément est un Row, où les éléments sont placés horizontalement, l'un après l'autre, avec deux Buttons centrées horizontalement (horizontalAlignment). L'affichage final dépend de l'espace disponible. L'image suivante est un exemple de ce à quoi cela peut ressembler:

Vous pouvez modifier les valeurs d'alignement ou appliquer différentes valeurs de modificateur (telles que la marge intérieure) pour modifier l'emplacement et la taille des composants. Consultez la documentation de référence pour obtenir la liste complète des composants, des paramètres et des modificateurs disponibles pour chaque classe.