Erste Schritte mit Widgets

Voraussetzungen und Einrichtung

Bevor Sie beginnen, müssen die folgenden Voraussetzungen erfüllt sein.

Laufzeitanforderungen

Für Wear-Widgets ist auf dem Zielgerät die Version 1.6.1 oder höher des APK com.google.android.wearable.protolayout.renderer erforderlich.

So erhalten Sie eine kompatible Version des Renderers:

• Wear OS 7-Emulator: Verwenden Sie das Wear OS 7-Emulator-Image. Versionen unter 7 sind nicht geeignet. Eine Anleitung zum Einrichten finden Sie unter Wear OS 7 Emulator einrichten.
• Physisches Gerät: Verwenden Sie ein physisches Wear OS-Gerät, das automatische Updates aus dem Google Play Store erhält, oder ein Entwicklergerät, auf dem Sie im Google Play Store angemeldet sind.

Mit dem folgenden Befehl können Sie prüfen, welche Version auf Ihrem Gerät installiert ist:

adb shell dumpsys package com.google.android.wearable.protolayout.renderer | \
  grep -m 1 versionName | \
  awk -F= '{print $2}'

Gradle-Konfiguration

Wear-Widget-Bibliotheken sind auf Google Maven verfügbar.

1. SDK-Version konfigurieren

Achten Sie darauf, dass compileSdk und targetSdk auf 37 oder höher festgelegt sind.

android {
    compileSdk = 37
    // ...
    defaultConfig {
        targetSdk = 37
        // ...
    }
}

2. Abhängigkeiten hinzufügen

Fügen Sie der Datei build.gradle.kts Ihrer App die folgenden Abhängigkeiten hinzu:

dependencies {
    // Core Wear Widget and Remote Compose libraries
    implementation "androidx.compose.remote:remote-creation-compose:1.0.0-alpha11"
    implementation "androidx.compose.remote:remote-core:1.0.0-alpha11"
    implementation "androidx.glance.wear:wear:1.0.0-alpha10"
    implementation "androidx.glance.wear:wear-core:1.0.0-alpha10"
    implementation "androidx.wear.compose.remote:remote-material3:1.0.0-alpha04"

    // Tooling for previews (optional, but recommended)
    implementation "androidx.compose.remote:remote-tooling-preview:1.0.0-alpha11"
    implementation "androidx.wear.compose:compose-ui-tooling:1.6.2"
    implementation "androidx.wear.tiles:tiles-tooling-preview:1.6.0"
    debugImplementation "androidx.wear.tiles:tiles-renderer:1.6.0"
}

dependencies {
    // Core Wear Widget and Remote Compose libraries
    implementation("androidx.compose.remote:remote-creation-compose:1.0.0-alpha11")
    implementation("androidx.compose.remote:remote-core:1.0.0-alpha11")
    implementation("androidx.glance.wear:wear:1.0.0-alpha10")
    implementation("androidx.glance.wear:wear-core:1.0.0-alpha10")
    implementation("androidx.wear.compose.remote:remote-material3:1.0.0-alpha04")

    // Tooling for previews (optional, but recommended)
    implementation("androidx.compose.remote:remote-tooling-preview:1.0.0-alpha11")
    implementation("androidx.wear.compose:compose-ui-tooling:1.6.2")
    implementation("androidx.wear.tiles:tiles-tooling-preview:1.6.0")
    debugImplementation("androidx.wear.tiles:tiles-renderer:1.6.0")
}

Hello-World-Widget erstellen

Ein Wear-Widget besteht aus einem Dienst, der GlanceWearWidgetService und einer Widget-Klasse erweitert GlanceWearWidget. Die Benutzeroberfläche wird mit @RemoteComposable-Funktionen definiert. @RemoteComposable-Funktionen.

Dienst definieren

Der Dienst ist der Einstiegspunkt, an den das System gebunden ist.

Erstellen Sie einen Dienst, der GlanceWearWidgetService erweitert, um Ihr Widget zu definieren.

class HelloWidgetService : GlanceWearWidgetService() {
    override val widget: GlanceWearWidget = HelloWidget()
}
GetStarted.kt

Widget definieren

Die Widget-Klasse stellt die Daten und das Layout für das Widget bereit.

class HelloWidget : GlanceWearWidget() {
    override suspend fun provideWidgetData(
        context: Context,
        params: WearWidgetParams,
    ): WearWidgetData {
        return WearWidgetDocument(background = WearWidgetBrush.color(Color.Blue.rc)) {
            HelloWidgetContent()
        }
    }
}
GetStarted.kt

Inhalte definieren

Die Inhalte werden mit Remote Compose-Komponenten erstellt.

@RemoteComposable @Composable
fun HelloWidgetContent() {
    RemoteBox(
        modifier = RemoteModifier.fillMaxSize(),
        contentAlignment = RemoteAlignment.Center,
    ) {
        RemoteText(
            text = "Hello World".rs,
            color = Color.White.rc
        )
    }
}
GetStarted.kt

XML-Datei für die Widget-Konfiguration erstellen

Erstellen Sie eine neue Datei res/xml/hello_widget_info.xml, um die Eigenschaften und unterstützten Größen des Widgets zu definieren. Eine vollständige Referenz der unterstützten XML Attribute im Tag <wearwidget-provider> finden Sie in der WearWidgetProviderInfo Dokumentation.

<wearwidget-provider
    description="@string/hello_widget_description"
    icon="@mipmap/ic_launcher"
    label="@string/hello_widget_label"
    preferredType="SMALL">

    <container
        type="SMALL"
        previewImage="@drawable/widget_preview_small" />
    <container
        type="LARGE"
        previewImage="@drawable/widget_preview_large" />
</wearwidget-provider>
hello_widget_info.xml

In AndroidManifest.xml registrieren

Registrieren Sie den Dienst in Ihrer AndroidManifest.xml-Datei mit den erforderlichen Intent-Filtern und Metadaten.

<service
    android:name=".snippets.widget.HelloWidgetService"
    android:exported="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/hello_widget_label"
    android:permission="com.google.android.wearable.permission.BIND_TILE_PROVIDER">

    <intent-filter>
        <action android:name="androidx.glance.wear.action.BIND_WIDGET_PROVIDER" />
        <!-- If you already have a Tile, omit the following line. -->
        <action android:name="androidx.wear.tiles.action.BIND_TILE_PROVIDER" />
    </intent-filter>

    <meta-data
        android:name="androidx.glance.wear.widget.provider"
        android:resource="@xml/hello_widget_info" />

    <meta-data
        android:name="androidx.wear.tiles.PREVIEW"
        android:resource="@drawable/tile_preview" />
</service>
AndroidManifest.xml

Erstellen und bereitstellen

Nachdem Sie Ihren Dienst und Ihr Widget definiert haben, können Sie Ihr Projekt erstellen und auf einem Gerät oder Emulator bereitstellen.

Erstellen und installieren

Erstellen Sie das Projekt und installieren Sie das Debug-APK auf Ihrem verbundenen Gerät oder Emulator:

./gradlew :app:installDebug

Widget hinzufügen und Vorschau ansehen

Nachdem die App installiert wurde, können Sie mit adb das Widget programmatisch dem Karussell hinzufügen und auf dem Bildschirm anzeigen.

Hinweis:Wear-Widgets verwenden die zugrunde liegende Kachel-Infrastruktur zu Debugging-Zwecken. Daher sind für die adb Befehle die add-tile und show-tile Vorgänge erforderlich.

1. Widget dem Karussell hinzufügen:

adb shell am broadcast \
  -a com.google.android.wearable.app.DEBUG_SURFACE \
  --es operation add-tile \
  --ecn component <your_package_name>/.HelloWidgetService

2. Widget anzeigen:

adb shell am broadcast \
  -a com.google.android.wearable.app.DEBUG_SYSUI \
  --es operation show-tile \
  --ei index 0

Android Studio-Vorschauen sind ebenfalls verfügbar, um Ihre Layouts auf verschiedenen Bildschirmgrößen zu testen.