Material 3 Expressive ist die nächste Weiterentwicklung von Material Design. Dazu gehören aktualisierte Themen, Komponenten und Personalisierungsfunktionen wie dynamische Farben.

In diesem Leitfaden geht es hauptsächlich um die Migration von der Jetpack-Bibliothek Wear Compose Material 2.5 (androidx.wear.compose) zur Jetpack-Bibliothek Wear Compose Material 3 (androidx.wear.compose.material3) für Apps.

Ansätze

Folgen Sie beim Migrieren Ihres App-Codes von M2.5 zu M3 demselben Ansatz, der in der Anleitung zum Migrieren von Material Design auf Smartphones beschrieben wird, insbesondere:

• Sie sollten M2.5 und M3 nicht langfristig in einer einzigen App verwenden
• Schrittweisen Ansatz verfolgen

Abhängigkeiten

M3 hat ein separates Paket und eine separate Version als M2.5:

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

implementation("androidx.wear.compose:compose-material3:1.5.0-beta01")

Die neuesten M3-Versionen finden Sie auf der Seite mit den Wear Compose Material 3-Releases.

Die Wear Compose Foundation-Bibliothek Version 1.5.0-beta01 enthält einige neue Komponenten, die für die Verwendung mit Material 3-Komponenten entwickelt wurden. Ebenso hat SwipeDismissableNavHost aus der Wear Compose Navigation Library eine aktualisierte Animation, wenn sie unter Wear OS 6 (API-Level 36) oder höher ausgeführt wird. Wenn Sie auf die Material 3-Version von Wear Compose aktualisieren, empfehlen wir Ihnen, auch die Wear Compose Foundation- und Navigationsbibliotheken zu aktualisieren:

implementation("androidx.wear.compose:compose-foundation:1.5.0-beta01")
implementation("androidx.wear.compose:compose-navigation:1.5.0-beta01")

Designs

Sowohl in M2.5 als auch in M3 heißt das Theme-Composeable MaterialTheme, aber die Importpakete und ‑parameter unterscheiden sich. In M3 wurde der Parameter Colors in ColorScheme umbenannt und MotionScheme wurde für die Implementierung von Übergängen eingeführt.

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
)

Farbe

Das Farbsystem in M3 unterscheidet sich deutlich von M2.5. Die Anzahl der Farbparameter hat zugenommen, sie haben unterschiedliche Namen und werden unterschiedlich auf M3-Komponenten zugeordnet. In Compose gilt dies für die M2.5-Klasse Colors, die M3-Klasse ColorScheme und zugehörige Funktionen:

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
)

In der folgenden Tabelle werden die wichtigsten Unterschiede zwischen M2.5 und M3 beschrieben:

Dynamisches Farbdesign

Eine neue Funktion in M3 ist die dynamische Farbthemengestaltung. Wenn Nutzer die Farben des Zifferblatts ändern, ändern sich die Farben auf der Benutzeroberfläche entsprechend.

Verwenden Sie die Funktion dynamicColorScheme, um ein dynamisches Farbschema zu implementieren, und geben Sie defaultColorScheme als Fallback an, falls das dynamische Farbschema nicht verfügbar ist.

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

Typografie

Das Typografiesystem in M3 unterscheidet sich von M2 und umfasst die folgenden Funktionen:

• Neun neue Textstile
• Flex-Schriftarten, mit denen sich die Schriftskalierung für unterschiedliche Stärken, Breiten und Rundungen anpassen lässt

• AnimatedText, bei dem Flex-Schriftarten verwendet werden

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
)

Flex-Schriftarten

Mit Flex-Schriftarten können Designer die Schriftbreite und -stärke für bestimmte Größen angeben.

Textstile

In M3 sind die folgenden TextStyles verfügbar. Diese werden standardmäßig von verschiedenen M3-Komponenten verwendet.

Form

Das Formsystem in M3 unterscheidet sich von dem in M2. Die Anzahl der Formparameter hat zugenommen, sie haben unterschiedliche Namen und werden unterschiedlich auf M3-Komponenten zugeordnet. Folgende Formen sind verfügbar:

• Extra klein
• Klein
• Mittel
• Groß
• Extra groß

In Compose gilt dies für die M2-Klasse Shapes und die M3-Klasse Shapes:

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
)

Verwenden Sie die Parameterzuordnung für Formen aus In Compose von Material 2 zu Material 3 migrieren als Ausgangspunkt.

Form-Morphing

In M3 wird Shape Morphing eingeführt: Formen verformen sich jetzt als Reaktion auf Interaktionen.

Das Form-Morphing-Verhalten ist als Variante für eine Reihe von runden Schaltflächen verfügbar (siehe unten):

Komponenten und Layout

Die meisten Komponenten und Layouts aus M2.5 sind in M3 verfügbar. Einige M3-Komponenten und -Layouts gab es jedoch nicht in M2.5. Außerdem gibt es bei einigen M3-Komponenten mehr Varianten als bei den entsprechenden M2.5-Komponenten.

Für einige Komponenten sind spezielle Überlegungen erforderlich. Als Ausgangspunkt empfehlen wir die folgenden Funktionszuordnungen:

Hier finden Sie eine vollständige Liste aller Material 3-Komponenten:

Und hier eine Liste einiger relevanter Komponenten aus der Wear Compose Foundation-Bibliothek Version 1.5.0-beta01:

Tasten

Schaltflächen in M3 unterscheiden sich von denen in M2.5. Der M2.5-Chip wurde durch eine Taste ersetzt. Die Button-Implementierung bietet Standardwerte für Text, maxLines und textAlign. Diese Standardwerte können im Element Text überschrieben werden.

import androidx.wear.compose.material.Chip

//M2.5 Buttons
Chip(...)
CompactChip(...)
Button(...)

import androidx.wear.compose.material3.Button

//M3 Buttons
Button(...)
CompactButton(...)
IconButton(...)
TextButton(...)

M3 enthält auch neue Schaltflächenvarianten. Weitere Informationen finden Sie in der Übersicht über die Compose Material 3 API-Referenz.

Mit M3 wird eine neue Schaltfläche eingeführt: EdgeButton. EdgeButton ist in vier verschiedenen Größen erhältlich: extraklein, klein, mittel und groß. Die EdgeButton-Implementierung bietet einen Standardwert für maxLines, der je nach Größe angepasst werden kann.

Wenn Sie TransformingLazyColumn und ScalingLazyColumn verwenden, übergeben Sie EdgeButton an ScreenScaffold, damit es sich beim Scrollen verändert. Im folgenden Code wird gezeigt, wie EdgeButton mit ScreenScaffold und TransformingLazyColumn verwendet wird.

import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold

ScreenScaffold(
   scrollState = state,
   contentPadding = contentPadding,
   edgeButton = {
      EdgeButton(...)
   }
){ contentPadding ->
   TransformingLazyColumn(state = state, contentPadding = contentPadding,){
   // additional code here
   }
}

Gerüst

Das Gerüst in M3 unterscheidet sich von dem in M2.5. In M3 wurden AppScaffold und das neue ScreenScaffold-Kompositelement als Ersatz für Scaffold eingeführt. Mit AppScaffold und ScreenScaffold legen Sie die Struktur eines Bildschirms fest und koordinieren Übergänge der Komponenten ScrollIndicator und TimeText.

Mit AppScaffold können statische Bildschirmelemente wie TimeText bei In-App-Übergängen wie Wischen zum Schließen sichtbar bleiben. ​​Er bietet einen Bereich für die Hauptinhalte der Anwendung, die in der Regel von einer Navigationskomponente wie SwipeDismissableNavHost bereitgestellt werden.

Sie deklarieren eine AppScaffold für die Aktivität und verwenden eine ScreenScaffold für jeden Bildschirm.

import androidx.wear.compose.material.Scaffold

Scaffold {...}

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.ScreenScaffold

AppScaffold {
   // Define the navigation hierarchy within the AppScaffold,
   // such as using SwipeDismissableNavHost.
   SwipeDismissableNavHost(...) {
      composable("home") {
         HomeScreen()
      }
      //other screens
   }
}
fun HomeScreen() {
    val scrollState = rememberScrollState()
    ScreenScaffold(scrollState = scrollState) {
    //rest of the screen code
    }
}

Wenn Sie HorizontalPager mit HorizontalPagerIndicator verwenden, können Sie zu HorizontalPagerScaffold migrieren. HorizontalPagerScaffold wird in einem AppScaffold platziert. AppScaffold und HorizontalPagerScaffold legen die Struktur eines Pagers fest und koordinieren die Übergänge der Komponenten HorizontalPageIndicator und TimeText.

HorizontalPagerScaffold zeigt die HorizontalPageIndicator standardmäßig in der Mitte des Bildschirms an und koordiniert das Ein-/Ausblenden von TimeText und HorizontalPageIndicator je nachdem, ob die Pager geblättert wird. Dies wird vom PagerState bestimmt.

Außerdem gibt es eine neue AnimatedPage-Komponente, mit der eine Seite in einem Pager mit einem Skalierungs- und Scrim-Effekt basierend auf ihrer Position animiert wird.

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.foundation.pager.HorizontalPager
import androidx.wear.compose.foundation.pager.rememberPagerState

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 10 })

    HorizontalPagerScaffold(pagerState = pagerState) {
       HorizontalPager(
          state = pagerState,
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
…
   }
}

Schließlich wird in M3 ein VerticalPagerScaffold eingeführt, das demselben Muster wie die HorizontalPagerScaffold folgt:

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState

AppScaffold {
   val pagerState = rememberPagerState(pageCount = { 10 })

   VerticalPagerScaffold(pagerState = pagerState) {
      VerticalPager(
         state = pagerState
      ) { page ->
             AnimatedPage(pageIndex = page, pagerState = pagerState){
                ScreenScaffold {
        …
   }
}

Platzhalter

Zwischen M2.5 und M3 gibt es einige API-Änderungen. Placeholder.PlaceholderDefaults bietet jetzt zwei Modifikatoren:

• Modifier.placeholder, das anstelle von Inhalten dargestellt wird, die noch nicht geladen sind
• Ein Platzhalter-Shimmer-Effekt Modifier.placeholderShimmer, der in einer Animationsschleife ausgeführt wird, während auf das Laden der Daten gewartet wird.

Weitere Änderungen an der Placeholder-Komponente finden Sie unten.

SwipeDismissableNavHost

SwipeDismissableNavHost ist Teil von wear.compose.navigation. Wenn diese Komponente mit M3 verwendet wird, aktualisiert das M3 MaterialTheme die LocalSwipeToDismissBackgroundScrimColor und LocalSwipeToDismissContentScrimColor.

TransformingLazyColumn

TransformingLazyColumn ist Teil von wear.compose.lazy.foundation und bietet Unterstützung für Skalierungs- und Morphing-Animationen bei Listenelementen beim Scrollen, um die Nutzerfreundlichkeit zu verbessern.

Ähnlich wie bei ScalingLazyColumn gibt es auch bei rememberTransformingLazyColumnState() die Möglichkeit, eine TransformingLazyColumnState zu erstellen, die in allen Kompositionen gespeichert wird.

Wenn Sie Skalierungs- und Morphing-Animationen hinzufügen möchten, fügen Sie jedem Listenelement Folgendes hinzu:

• Modifier.transformedHeight, mit dem Sie die transformierte Höhe der Elemente mithilfe eines TransformationSpec berechnen können. Sie können rememberTransformationSpec() verwenden, sofern keine weitere Anpassung erforderlich ist.
• Ein SurfaceTransformation

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.SurfaceTransformation
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn

val state = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
AppScaffold {
   ScreenScaffold(state) { contentPadding ->
      TransformingLazyColumn(state = state, contentPadding = contentPadding) {
         items(count = 50) {
            Button(
               onClick = {},
               modifier =
                        Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                        transformation = SurfaceTransformation(transformationSpec),
                    ) {
                        Text("Item $it")
                    }
                }
            }
        }
    }

Nützliche Links

Weitere Informationen zur Migration von M2.5 zu M3 in Compose finden Sie in den folgenden zusätzlichen Ressourcen.

Produktproben

Wear OS-Beispiele im Material3-Zweig auf GitHub

Codelab zum Erstellen von Wear OS-Apps

API-Referenz und Quellcode

• Compose Material 3 API-Referenz
• Material 3-Beispiele im Quellcode erstellen

Design

• Designleitfäden