Dans les sections suivantes, nous allons voir comment créer un widget d'application simple avec Glance.
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.
- 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>
- Étendez le récepteur
AppWidget
à partir deGlanceAppWidgetReceiver
:
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() { override val glanceAppWidget: GlanceAppWidget = TODO("Create GlanceAppWidget") }
Ajouter les métadonnées AppWidgetProviderInfo
Ensuite, procédez comme suit pour ajouter la métadonnée AppWidgetProviderInfo
:
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>
Définir GlanceAppWidget
Créez une classe qui s'étend à partir de
GlanceAppWidget
et remplace lesprovideGlance
. C'est la méthode qui vous permet de charger des données qui sont nécessaires pour afficher 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") } } }
- Instanciez-le dans le
glanceAppWidget
de votreGlanceAppWidgetReceiver
:
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() { // Let MyAppWidgetReceiver know which GlanceAppWidget to use override val glanceAppWidget: GlanceAppWidget = MyAppWidget() }
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>() ) } } } }
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 lesGlanceModifier
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 composantText
avec12.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 deuxButtons
centrées horizontalement. (horizontalAlignment
). L'affichage final dépend de l'espace disponible. L'image suivante en est un exemple:
- Le premier élément de
![widget_destination](https://developer.android.google.cn/static/develop/ui/compose/images/destination_widget.png?authuser=5&hl=fr)
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.