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.

Material Design dans Jetpack Compose sur Wear OS

Jetpack Compose sur Wear OS propose une implémentation de Material 2.5, qui vous aide à concevoir des expériences d'application plus attrayantes. Les composants Material Design sur Wear OS sont basés sur la thématisation Material Wear. Cette thématisation est un moyen systématique de personnaliser Material Design et de mieux refléter la marque de votre produit.

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.4 de Compose pour Wear OS, vous devez utiliser la version 1.7 des bibliothèques androidx.compose et Kotlin 1.9.0. Vous pouvez utiliser le mappage de la nomenclature et la carte de compatibilité entre Compose et Kotlin pour vérifier la compatibilité de Compose.

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. La plupart des modifications de dépendances liées à Wear OS se trouvent dans les couches d'architecture supérieures, entourées d'un cadre rouge dans l'image suivante.

<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="" />

Autrement dit, bon nombre des dépendances que vous utilisez déjà avec Jetpack Compose ne changeront pas pour Wear OS. Par exemple, les dépendances de l'UI, de l'environnement d'exécution, du compilateur et des animations restent les mêmes.

Toutefois, Wear OS possède ses propres versions des bibliothèques material, foundation et navigation. Vérifiez donc que vous utilisez les bibliothèques appropriées.

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

L'extrait suivant montre un exemple de fichier build.gradle qui inclut ces dépendances:

Kotlin

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")
}

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.