Passer de Material 2.5 à Material 3 dans Compose pour Wear OS

Material 3 Expressive est la nouvelle évolution de Material Design. Elle inclut des thèmes et des composants mis à jour ainsi que des fonctionnalités de personnalisation telles que les couleurs dynamiques.

Ce guide traite de la migration de la bibliothèque Jetpack Wear Compose Material 2.5 (androidx.wear.compose) vers la bibliothèque Jetpack Wear Compose Material 3 (androidx.wear.compose.material3) pour les applications.

Approches

Pour migrer le code de votre application de M2.5 vers M3, suivez la même approche que celle décrite dans le guide de migration de Compose Material pour téléphone, en particulier :

• Vous ne devez pas utiliser à la fois M2.5 et M3 dans une même application sur une longue période.
• Adopter une approche par étapes

Dépendances

M3 possède un package et une version distincts de M2.5 :

implementation("androidx.wear.compose:compose-material:1.4.0")

implementation("androidx.wear.compose:compose-material3:1.6.0-alpha01")

Consultez les dernières versions de M3 sur la page des versions de Wear Compose Material 3.

La version 1.6.0-alpha01 de la bibliothèque Wear Compose Foundation a introduit de nouveaux composants conçus pour fonctionner avec les composants Material 3. De même, SwipeDismissableNavHost de la bibliothèque Wear Compose Navigation a une animation mise à jour lorsqu'il est exécuté sur Wear OS 6 (niveau d'API 36) ou version ultérieure. Lorsque vous passez à la version Wear Compose Material 3, nous vous suggérons de mettre à jour également les bibliothèques Wear Compose Foundation et Navigation :

implementation("androidx.wear.compose:compose-foundation:1.6.0-alpha01")
implementation("androidx.wear.compose:compose-navigation:1.6.0-alpha01")

Personnalisation des thèmes

Dans M2.5 et M3, le composable Thème est appelé MaterialTheme, mais les packages et paramètres d'importation diffèrent. Dans M3, le paramètre Colors a été renommé ColorScheme et MotionScheme a été introduit pour implémenter les transitions.

import androidx.wear.compose.material.MaterialTheme

MaterialTheme(
        colors = AppColors,
        typography = AppTypography,
        shapes = AppShapes,
        content = content
)

import androidx.wear.compose.material3.MaterialTheme

MaterialTheme(
        colorScheme = AppColorScheme,
        typography = AppTypography,
        shapes = AppShapes,
        motionScheme = AppMotionScheme,
        content = content
)

Couleur

Le système de couleurs de M3 est très différent de celui de M2.5. Le nombre de paramètres de couleur a augmenté, leurs noms sont différents et ils sont mappés différemment aux composants M3. Dans Compose, cela s'applique à la classe M2.5 Colors, à la classe M3 ColorScheme et aux fonctions associées :

import androidx.wear.compose.material.Colors

val appColorScheme: Colors = Colors(
   // M2.5 Color parameters
)

import androidx.wear.compose.material3.ColorScheme

val appColorScheme: ColorScheme = ColorScheme(
   // M3 ColorScheme parameters
)

Le tableau suivant décrit les principales différences entre M2.5 et M3 :

Thèmes de couleurs dynamiques

La thématisation dynamique des couleurs est une nouvelle fonctionnalité de M3. Si les utilisateurs modifient les couleurs du cadran, celles de l'UI changent pour correspondre.

Utilisez la fonction dynamicColorScheme pour implémenter un jeu de couleurs dynamique et fournir un defaultColorScheme comme solution de remplacement si le jeu de couleurs dynamique n'est pas disponible.

@Composable
fun myApp() {
  val myColorScheme = myBrandColors()
  val dynamicColorScheme = dynamicColorScheme(LocalContext.current)
  MaterialTheme(colorScheme = dynamicColorScheme ?: myBrandColors) {...}
}

Typographie

Le système typographique de M3 est différent de celui de M2 et inclut les fonctionnalités suivantes :

• Neuf nouveaux styles de texte
• Les polices flexibles, qui permettent de personnaliser les échelles typographiques pour différentes épaisseurs, largeurs et arrondis

• AnimatedText, qui utilise des polices flexibles

import androidx.wear.compose.material.Typography

val Typography = Typography(
   // M2.5 TextStyle parameters
)

import androidx.wear.compose.material3.Typography

val Typography = Typography(
   // M3 TextStyle parameters
)

Polices Flex

Les polices flexibles permettent aux concepteurs de spécifier la largeur et l'épaisseur de la police pour des tailles spécifiques.

Styles de texte

Les TextStyles suivants sont disponibles dans M3. Ils sont utilisés par défaut par les différents composants de M3.

Forme

Le système de formes de M3 est différent de celui de M2. Le nombre de paramètres de forme a augmenté, leurs noms sont différents et ils sont mappés différemment aux composants M3. Les tailles de formes suivantes sont disponibles :

• Très petite
• Petit
• Moyenne
• Grande
• Très grande

Dans Compose, cela s'applique à la classe Shapes M2 et à la classe Shapes M3 :

import androidx.wear.compose.material.Shapes

val Shapes = Shapes(
   // M2.5 Shapes parameters
)

import androidx.wear.compose.material3.Shapes

val Shapes = Shapes(
   // M3 Shapes parameters
)

Utilisez le mappage des paramètres de formes de Passer de Material 2 à Material 3 dans Compose comme point de départ.

Morphing de forme

M3 introduit le morphing de forme : les formes se transforment désormais en réponse aux interactions.

Le comportement de morphing de forme est disponible en tant que variante sur un certain nombre de boutons ronds, voir ci-dessous :

Composants et mise en page

La plupart des composants et mises en page de M2.5 sont disponibles dans M3. Cependant, certains composants et mises en page M3 n'existaient pas dans M2.5. De plus, certains composants M3 présentent plus de variantes que leurs équivalents dans M2.5.

Bien que certains composants nécessitent une attention particulière, les mappages de fonctions suivants sont recommandés pour commencer :