Jetpack Compose unter Wear OS verwenden

Für Wear OS erstellen ähnelt Für Mobilgeräte erstellen. Es gibt jedoch einige wichtige Unterschiede. In diesem Leitfaden werden die Gemeinsamkeiten und Unterschiede erläutert.

Compose for Wear OS ist Teil von Android Jetpack und hilft Ihnen wie die anderen von Ihnen verwendeten Wear Jetpack-Bibliotheken, schneller besseren Code zu schreiben. Dies ist unser empfohlener Ansatz für die Erstellung von Benutzeroberflächen für Wear OS-Apps.

Wenn Sie mit dem Jetpack Compose-Toolkit nicht vertraut sind, sehen Sie sich den Compose-Lernpfad an. Viele der Entwicklungsprinzipien für Compose für Mobilgeräte gelten auch für Compose für Wear OS. Weitere Informationen zu den allgemeinen Vorteilen eines deklarativen UI-Frameworks finden Sie unter Warum Compose?. Weitere Informationen zu Compose für Wear OS finden Sie im Compose for Wear OS Pathway und im Wear OS-Beispiel-Repository auf GitHub.

Material Design in Jetpack Compose unter Wear OS

Jetpack Compose für Wear OS bietet eine Implementierung von Material 2.5, mit der Sie ansprechendere Apps entwickeln können. Die Material Design-Komponenten in Wear OS basieren auf Wear Material Theming. Diese Themen sind eine systematische Möglichkeit, Material Design anzupassen und die Marke Ihres Produkts besser zu repräsentieren.

Kompatibilität

Compose for Wear OS funktioniert auf Smartwatches, die Wear OS 3.0 (API-Ebene 30) und Wear OS 2.0 (API-Ebene 25 und höher) unterstützen. Für die Verwendung von Version 1.4 von Compose für Wear OS ist Version 1.7 der androidx.compose-Bibliotheken und Kotlin 1.9.0 erforderlich. Sie können die BOM-Zuordnung und die Kompatibilitätstabelle für Compose und Kotlin verwenden, um die Compose-Kompatibilität zu prüfen.

Plattformen

Mit Compose for Wear OS können Sie Apps für Wear OS einfacher erstellen. Weitere Informationen finden Sie unter Apps. Mit unseren integrierten Komponenten können Sie eine Nutzererfahrung schaffen, die den Wear OS-Richtlinien entspricht. Weitere Informationen zu Komponenten finden Sie in unseren Designrichtlinien.

Wird eingerichtet

Die Verwendung von Jetpack Compose mit Wear OS ähnelt der Verwendung von Jetpack Compose für jedes andere Android-Projekt. Der Hauptunterschied besteht darin, dass Jetpack Compose for Wear Wear-spezifische Bibliotheken hinzufügt, mit denen sich Benutzeroberflächen für Smartwatches einfacher erstellen lassen. In einigen Fällen haben diese Komponenten denselben Namen wie ihre Nicht-Wear-Entsprechungen, z. B. androidx.wear.compose.material.Button und androidx.compose.material.Button.

Neue App in Android Studio erstellen

So erstellen Sie ein neues Projekt mit Jetpack Compose:

1. Wenn Sie sich im Fenster Willkommen bei Android Studio befinden, klicken Sie auf Start a new Android Studio project (Neues Android Studio-Projekt starten). Wenn Sie bereits ein Android Studio-Projekt geöffnet haben, wählen Sie in der Menüleiste File > New > Import Sample aus.
2. Suchen Sie nach Compose for Wear und wählen Sie Compose for Wear OS Starter aus.
3. Führen Sie im Fenster Projekt konfigurieren die folgenden Schritte aus:
   1. Legen Sie den Namen der Anwendung fest.
   2. Wählen Sie den Speicherort des Projekts für das Beispiel aus.
4. Klicken Sie auf Fertig.
5. Prüfen Sie, ob die build.gradle-Datei des Projekts wie unter Gradle-Properties-Dateien beschrieben konfiguriert ist.

Jetzt können Sie mit der Entwicklung einer App mit Compose für Wear OS beginnen.

Abhängigkeiten des Jetpack Compose-Toolkits

Wenn Sie Jetpack Compose mit Wear OS verwenden möchten, müssen Sie die Abhängigkeiten des Jetpack Compose-Toolkits in die build.gradle-Datei Ihrer App aufnehmen. Die meisten Änderungen an Abhängigkeiten im Zusammenhang mit Wear OS betreffen die oberen Architekturschichten, die im folgenden Bild rot umrahmt sind.

<img 'foundation',="" 'material',="" 'runtime'.="" 'ui',="" 2="" 4="" a="" alt="" and="" are="" bottom,="" box""="" by="" contain="" from="" rectangles="" rectangles.="" red="" src="/static/wear/images/components/ComposeDependencies.png" surrounded="" the="" to="" top="" />

Das bedeutet, dass sich viele der Abhängigkeiten, die Sie bereits mit Jetpack Compose verwenden, nicht ändern, wenn Sie Wear OS als Ziel auswählen. Beispielsweise bleiben die Abhängigkeiten von Benutzeroberfläche, Laufzeit, Compiler und Animation unverändert.

Wear OS hat jedoch eigene Versionen der material-, foundation- und navigation-Bibliotheken. Prüfen Sie daher, ob Sie die richtigen Bibliotheken verwenden.

Verwende nach Möglichkeit die WearComposeMaterial-Version der APIs. Die mobile Version von Compose Material kann zwar technisch verwendet werden, ist aber nicht für die speziellen Anforderungen von Wear OS optimiert. Außerdem kann die Kombination von Compose-Material mit Compose-Material für Wear OS zu unerwartetem Verhalten führen. Da jede Bibliothek eine eigene MaterialTheme-Klasse hat, kann es beispielsweise zu Inkonsistenzen bei Farben, Typografie oder Formen kommen, wenn beide Versionen verwendet werden.

In der folgenden Tabelle werden die Abhängigkeitsunterschiede zwischen Wear OS und Android-Mobilgeräten beschrieben:

Das folgende Snippet zeigt eine Beispiel-build.gradle-Datei mit diesen Abhängigkeiten:

dependencies {

    val composeBom = platform("androidx.compose:compose-bom:2024.10.01")

    // General compose dependencies
    implementation(composeBom)
    implementation("androidx.activity:activity-compose:1.9.3")
    implementation("androidx.compose.ui:ui-tooling-preview:1.7.5")
    // Other compose dependencies

    // Compose for Wear OS Dependencies
    implementation("androidx.wear.compose:compose-material:1.4.0")

    // Foundation is additive, so you can use the mobile version in your Wear OS app.
    implementation("androidx.wear.compose:compose-foundation:1.4.0")

    // Wear OS preview annotations
    implementation("androidx.wear.compose:compose-ui-tooling:1.4.0")

    // If you are using Compose Navigation, use the Wear OS version (NOT THE MOBILE VERSION).
    // Uncomment the line below and update the version number.
    // implementation("androidx.wear.compose:compose-navigation:1.4.0")

    // Testing
    testImplementation("junit:junit:4.13.2")
    androidTestImplementation("androidx.test.ext:junit:1.1.3")
    androidTestImplementation("androidx.test.espresso:espresso-core:3.4.0")
    androidTestImplementation("androidx.compose.ui:ui-test-junit4:1.0.3")
    debugImplementation("androidx.compose.ui:ui-tooling:1.0.3")
}