Créer un widget d'application avec Glance

Dans les sections suivantes, nous allons voir comment créer un widget d'application simple avec Glance.

Important :Glance offre une approche moderne pour créer des widgets d'application à l'aide de Compose, mais est limitée par les limites de AppWidgets et RemoteViews. Par conséquent, Glance utilise des composables différents de l'UI de Jetpack Compose.

Déclarer AppWidget dans le fichier manifeste

Une fois la procédure de configuration terminée, déclarez AppWidget et ses de métadonnées dans votre application.

1. Enregistrer 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

Ensuite, procédez comme suit pour ajouter la métadonnée AppWidgetProviderInfo:

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

   La seule différence pour Glance est qu'il n'y a pas de code XML initialLayout, mais vous devez en définir un. Vous pouvez utiliser la disposition 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 les provideGlance. C'est la méthode qui vous permet de charger des données qui sont nécessaires pour afficher votre widget:

   Remarque :provideGlance s'exécute sur le thread principal. Pour effectuer des tâches de longue durée opérations dans provideGlance, basculez vers un autre thread en utilisant withContext Consultez Utiliser des coroutines pour la sécurité principale pour en savoir plus sur comment l'exécuter en dehors du thread principal.

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 de votre GlanceAppWidgetReceiver:

class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {

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

Vous venez de configurer une 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<MyActivity>()
                )
                Button(
                    text = "Work",
                    onClick = actionStartActivity<MyActivity>()
                )
            }
        }
    }
}
GlanceSnippets.kt

L'exemple de code précédent effectue les opérations suivantes:

• Au niveau supérieur Column, les éléments sont placés verticalement un après chaque élément autre.
• La Column s'agrandit pour s'adapter à l'espace disponible (via les GlanceModifier et aligne son contenu avec le haut (verticalAlignment) et la centre horizontalement (horizontalAlignment).
• Le contenu de Column est défini à l'aide du lambda. L'ordre est important.
  • Le premier élément de Column est un composant Text avec 12.dp de marge intérieure.
  • Le deuxième élément est une Row, où les éléments sont placés horizontalement un 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 en est un exemple:

Figure 1. Exemple d'interface utilisateur

Vous pouvez modifier les valeurs d'alignement ou appliquer différentes valeurs de modificateur (comme 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 pour chaque classe.