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“, aber durch die Einschränkungen von AppWidgets und RemoteViews eingeschränkt. Daher verwendet Glance verschiedene zusammensetzbare Funktionen aus der Jetpack Compose-Benutzeroberfläche.

AppWidget im Manifest deklarieren

Nachdem Sie die Einrichtungsschritte abgeschlossen haben, deklarieren Sie die AppWidget und die zugehörigen Metadaten in deiner App.

1. Anbieter des App-Widgets in der Datei AndroidManifest.xml registrieren und 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. Verlängere den AppWidget-Empfänger von GlanceAppWidgetReceiver aus:

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

AppWidgetProviderInfo-Metadaten hinzufügen

Führen Sie als Nächstes diesen Schritt aus, um die AppWidgetProviderInfo-Metadaten hinzuzufügen:

1. Folgen Sie der Anleitung unter Einfaches Widget erstellen, um die App zu erstellen und zu definieren. Widget-Informationen in der Datei @xml/my_app_widget_info.

   Der einzige Unterschied für Glance ist, dass es keine initialLayout-XML-Datei gibt, müssen Sie eine definieren. Sie können das vordefinierte Ladelayout verwenden, das in Bibliothek:

<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 aus GlanceAppWidget erweitert wird und die provideGlance-Methode. Mit dieser Methode können Sie Daten laden, die zum Rendern des Widgets erforderlich sind:

   Hinweis :provideGlance wird im Hauptthread ausgeführt. Um lange Laufzeiten Vorgänge in provideGlance, wechseln Sie zu einem anderen Thread mithilfe von withContext. Weitere Informationen finden Sie unter Gemeinsame Routinen für die Hauptsicherheit verwenden. wie außerhalb des Hauptthreads ausgeführt wird.

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 eine AppWidget mit der Funktion „Live-Anzeige“ konfiguriert.

UI erstellen

Das folgende Snippet veranschaulicht, 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>()
                )
            }
        }
    }
}
GlanceSnippets.kt

Im vorherigen Codebeispiel wird Folgendes ausgeführt:

• Auf der obersten Ebene Column werden die Elemente vertikal nach jedem Element platziert Sonstiges.
• Die Größe von Column wird an den verfügbaren Platz angepasst (über die GlanceModifier und richtet den Inhalt oben aus (verticalAlignment) und zentriert sie 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 12.dp von Abstand.
  • Das zweite Element ist ein Row, bei dem Elemente horizontal nebeneinander, wobei zwei Buttons horizontal zentriert sind (horizontalAlignment) Die endgültige Anzeige hängt vom verfügbaren Platz ab. Die folgende Abbildung zeigt ein Beispiel, wie das aussehen könnte:

<ph type="x-smartling-placeholder">

</ph>

Abbildung 1. Eine Beispiel-UI.

Sie können die Ausrichtungswerte ändern oder verschiedene Modifikatorwerte (z. B. Padding), um die Platzierung und Größe der Komponenten zu ändern. Siehe Referenz Dokumentation finden Sie eine vollständige Liste der Komponenten, Parameter und verfügbaren Modifikatoren für jede Klasse.