App-Widget mit Glance erstellen

In den folgenden Abschnitten wird beschrieben, wie Sie mit Glance ein einfaches App-Widget erstellen.

Wichtiger Hinweis :Glance bietet einen modernen Ansatz zum Erstellen von App-Widgets mit Compose, ist jedoch durch die Einschränkungen von AppWidgets und RemoteViews eingeschränkt. Daher verwendet Glance andere zusammensetzbare Funktionen als die Jetpack Compose-Benutzeroberfläche.

AppWidget im Manifest deklarieren

Nach Abschluss der Einrichtungsschritte deklarieren Sie AppWidget und die zugehörigen Metadaten in Ihrer Anwendung.

1. 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>
AndroidManifest.xml

1. AppWidget-Empfänger von GlanceAppWidgetReceiver erweitern:

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

AppWidgetProviderInfo-Metadaten hinzufügen

So fügen Sie die AppWidgetProviderInfo-Metadaten hinzu:

1. 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>
my_app_widget_info.xml

GlanceAppWidget definieren

1. Erstellen Sie eine neue Klasse, die von GlanceAppWidget erweitert wird und die Methode provideGlance überschreibt. Dies ist die Methode, mit der Sie Daten laden können, die zum Rendern des Widgets erforderlich sind:

   Hinweis: provideGlance wird im Hauptthread ausgeführt. Wechseln Sie mit withContext zu einem anderen Thread, um Vorgänge mit langer Ausführungszeit in provideGlance auszuführen. Weitere Informationen zur Ausführung außerhalb des Hauptthreads finden Sie unter Coroutinen für main-safety verwenden.

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. Instanziieren Sie sie im glanceAppWidget auf Ihrem GlanceAppWidgetReceiver:

class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {

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

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<MainActivity>()
                )
                Button(
                    text = "Work",
                    onClick = actionStartActivity<MainActivity>()
                )
            }
        }
    }
}
GlanceSnippets.kt

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 (über GlanceModifier), 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 eine Text-Komponente mit einem Abstand von 12.dp.
  • Das zweite Element ist ein Row, bei dem Elemente horizontal nacheinander platziert werden, wobei zwei Buttons horizontal zentriert sind (horizontalAlignment). Die endgültige Anzeige hängt vom verfügbaren Platz ab. Die folgende Abbildung zeigt ein Beispiel:

Abbildung 1. Eine Beispiel-UI.

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.