In den folgenden Abschnitten wird beschrieben, wie Sie mit Glance ein einfaches App-Widget erstellen.
AppWidget
im Manifest deklarieren
Nach Abschluss der Einrichtungsschritte deklarieren Sie AppWidget
und die zugehörigen Metadaten in Ihrer Anwendung.
- Registrieren Sie den Anbieter des App-Widgets in der Datei
AndroidManifest.xml
und in der zugehörigen Metadatendatei:
<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>
AppWidget
-Empfänger vonGlanceAppWidgetReceiver
erweitern:
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() { override val glanceAppWidget: GlanceAppWidget = TODO("Create GlanceAppWidget") }
AppWidgetProviderInfo
-Metadaten hinzufügen
So fügen Sie die AppWidgetProviderInfo
-Metadaten hinzu:
Folgen Sie der Anleitung unter Einfaches Widget erstellen, um die Informationen zum App-Widget in der Datei
@xml/my_app_widget_info
zu erstellen und zu definieren.Der einzige Unterschied zu Glance besteht darin, dass es keinen
initialLayout
-XML-Code gibt, aber Sie müssen eine definieren. Sie können das vordefinierte Ladelayout aus der Bibliothek verwenden:
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
android:initialLayout="@layout/glance_default_loading_layout">
</appwidget-provider>
GlanceAppWidget
definieren
Erstellen Sie eine neue Klasse, die von
GlanceAppWidget
erweitert wird und die MethodeprovideGlance
überschreibt. Dies ist die Methode, mit der Sie Daten laden können, die zum Rendern des Widgets erforderlich sind:
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") } } }
- Instanziieren Sie sie im
glanceAppWidget
auf IhremGlanceAppWidgetReceiver
:
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() { // Let MyAppWidgetReceiver know which GlanceAppWidget to use override val glanceAppWidget: GlanceAppWidget = MyAppWidget() }
Sie haben jetzt ein Gerät (AppWidget
) mit Glance konfiguriert.
UI erstellen
Das folgende Snippet zeigt, wie die UI erstellt wird:
/* 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>() ) } } } }
Im vorherigen Codebeispiel wird Folgendes ausgeführt:
- Auf der obersten Ebene
Column
werden Elemente vertikal nacheinander platziert. - Die Größe von
Column
wird an den verfügbaren Platz angepasst (überGlanceModifier
), richtet den Inhalt oben aus (verticalAlignment
) und zentriert ihn horizontal (horizontalAlignment
). - Der Inhalt von
Column
wird mithilfe der Lambda-Funktion definiert. Die Reihenfolge ist entscheidend.- Das erste Element im
Column
ist eineText
-Komponente mit einem Abstand von12.dp
. - Das zweite Element ist ein
Row
, bei dem Elemente horizontal nacheinander platziert werden, wobei zweiButtons
horizontal zentriert sind (horizontalAlignment
). Die endgültige Anzeige hängt vom verfügbaren Platz ab. Die folgende Abbildung zeigt ein Beispiel:
- Das erste Element im
Sie können die Ausrichtungswerte oder verschiedene Modifikatorwerte (z. B. den Abstand) anwenden, um die Position und Größe der Komponenten zu ändern. Eine vollständige Liste der Komponenten, Parameter und verfügbaren Modifikatoren für jede Klasse finden Sie in der Referenzdokumentation.