Utiliser Jetpack Compose sur Wear OS

Compose pour Wear OS est semblable à Compose pour mobile. Il existe toutefois quelques différences importantes. Ce guide décrit les similitudes et les différences.

Compose pour Wear OS fait partie d'Android Jetpack et, comme les autres bibliothèques Wear Jetpack que vous utilisez, elle vous permet d'écrire plus rapidement un meilleur code. Nous vous recommandons d'adopter cette approche pour créer des UI pour les applications Wear OS.

Si vous ne savez pas comment utiliser le kit d'outils Jetpack Compose, consultez le parcours Compose. De nombreux principes de développement concernant Compose pour mobile s'appliquent à Compose pour Wear OS. Pour en savoir plus sur les avantages généraux d'un framework d'interface utilisateur déclaratif, consultez la section Pourquoi adopter Compose. Pour en savoir plus sur Compose pour Wear OS, consultez le parcours Compose pour Wear OS et le dépôt d'exemples Wear OS sur GitHub.

Wear OS.

Compatibilité

Compose pour Wear OS fonctionne sur les montres compatibles avec Wear OS 3.0 (API de niveau 30) et les montres qui utilisent Wear OS 2.0 (API de niveau 25 ou supérieur). Pour utiliser la version 1.0 de Compose pour Wear OS, vous devez utiliser la version 1.2 des bibliothèques androidx.compose et Kotlin 1.7.0.

Surfaces

Compose pour Wear OS facilite la création d'applications sur Wear OS. Pour en savoir plus, consultez la section Applications. Utilisez nos composants intégrés pour créer des expériences utilisateur conformes aux consignes Wear OS. Pour en savoir plus sur ces composants, consultez nos conseils de conception.

Configuration

L'utilisation de Jetpack Compose avec Wear OS est semblable à celle de Jetpack Compose pour tout autre projet Android. La principale différence est que Jetpack Compose pour Wear ajoute des bibliothèques spécifiques à Wear qui facilitent la création d'interfaces utilisateur adaptées aux montres. Dans certains cas, ces composants portent le même nom que leurs homologues non-Wear, tels que androidx.wear.compose.material.Button et androidx.compose.material.Button.

Créer une application dans Android Studio

Pour inclure Jetpack Compose lors de la création de votre projet, procédez comme suit :

  1. Dans la fenêtre Welcome to Android Studio (Bienvenue dans Android Studio), cliquez sur Start a new Android Studio project (Démarrer un nouveau projet Android Studio). Si vous avez déjà ouvert un projet Android Studio, sélectionnez File > New > Import Sample (Fichier > Nouveau > Importer un exemple) dans la barre de menu.
  2. Recherchez Compose for Wear (Compose pour Wear) et sélectionnez Compose for Wear OS Starter (Démarrage avec Compose pour Wear OS).
  3. Dans la fenêtre Configure your project (Configurer votre projet), procédez comme suit :
    1. Définissez l'Application name (Nom de l'application).
    2. Choisissez le Project location (Emplacement du projet) pour votre exemple.
  4. Cliquez sur Finish (Terminer).
  5. Vérifiez que le fichier build.gradle du projet est correctement configuré, comme décrit dans la section Fichiers de propriétés Gradle.

Vous êtes maintenant prêt à développer une application à l'aide de Compose pour Wear OS.

Dépendances du kit d'outils Jetpack Compose

Pour utiliser Jetpack Compose avec Wear OS, vous devez inclure les dépendances du kit d'outils Jetpack Compose dans le fichier build.gradle de votre application, comme illustré dans l'extrait suivant :

Kotlin

dependencies {
    // General compose dependencies
    implementation("androidx.activity:activity-compose:1.8.2")
    implementation("androidx.compose.ui:ui-tooling-preview:1.6.4")
    // Other compose dependencies

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

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

    // Wear OS preview annotations
    implementation("androidx.wear.compose:compose-ui-tooling:1.3.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.3.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")
}

Ce qui change

Utilisez la version d'API WearComposeMaterial lorsque cela est possible. Bien qu'il soit techniquement possible d'utiliser la version mobile de Compose Material, elle n'est pas optimisée pour les exigences spéciales de Wear OS. Par ailleurs, la combinaison de Compose et de Compose pour Wear OS peut entraîner un comportement inattendu. Par exemple, comme chaque bibliothèque possède sa propre classe MaterialTheme, il est possible que les couleurs, la typographie ou les formes soient incohérentes si les deux versions sont utilisées.

Le tableau suivant décrit les différences de dépendance entre Wear OS et Wear pour Mobile :

Dépendance Wear OS

(androidx.wear.*)

Comparatif Dépendance mobile

(androidx.*)

androidx.wear.compose:compose-material au lieu de androidx.compose.material:material
androidx.wear.compose:compose-navigation au lieu de androidx.navigation:navigation-compose
androidx.wear.compose:compose-foundation en plus de androidx.compose.foundation:foundation

Voici un exemple de fichier build.gradle :

// Example project in app/build.gradle file
dependencies {
    // Standard Compose dependencies...

    // Wear specific Compose Dependencies
    implementation "androidx.wear.compose:compose-material:$rootProject.wearVersion"
    implementation "androidx.wear.compose:compose-foundation:$rootProject.wearVersion"

    // For navigation within your app...
    implementation "androidx.wear.compose:compose-navigation:$rootProject.wearVersion"

    // Other dependencies...
}

Commentaires

Essayez Compose pour Wear OS et utilisez l'Issue Tracker pour envoyer des suggestions et des commentaires.

Rejoignez la chaîne #compose-wear sur le Slack de Kotlin pour échanger avec la communauté des développeurs et nous faire part de votre expérience.