Material 3 Expressive ist die nächste Generation von Material Design. Es enthält aktualisierte Funktionen für Themen, Komponenten und Personalisierung, z. B. dynamische Farben.
In diesem Leitfaden geht es 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
Wenn Sie Ihren App-Code von M2.5 zu M3 migrieren möchten, folgen Sie dem gleichen Ansatz, der im Leitfaden zur Migration von Compose Material für Smartphones beschrieben wird, insbesondere:
Abhängigkeiten
M3 hat ein separates Paket und eine separate Version im Vergleich zu M2.5:
M2.5
implementation("androidx.wear.compose:compose-material:1.4.0")
M3
implementation("androidx.wear.compose:compose-material3:1.5.0-beta05")
Die neuesten M3-Versionen finden Sie auf der Seite mit den Wear Compose Material 3-Releases.
Mit der Wear Compose Foundation-Bibliothek Version 1.5.0-beta01 werden einige neue Komponenten eingeführt, die für die Verwendung mit Material 3-Komponenten entwickelt wurden. Ebenso hat SwipeDismissableNavHost aus der Wear Compose Navigation-Bibliothek eine aktualisierte Animation, wenn sie unter Wear OS 6 (API-Level 36) oder höher ausgeführt wird. Wenn Sie auf die Wear Compose Material 3-Version aktualisieren, empfehlen wir, auch die Wear Compose Foundation- und Navigation-Bibliotheken zu aktualisieren:
implementation("androidx.wear.compose:compose-foundation:1.5.0-beta05")
implementation("androidx.wear.compose:compose-navigation:1.5.0-beta05")
Designs
Sowohl in M2.5 als auch in M3 heißt die Theme-Composable-Funktion MaterialTheme, aber die Importpakete und Parameter sind unterschiedlich. In M3 wurde der Parameter Colors in ColorScheme umbenannt und MotionScheme wurde für die Implementierung von Übergängen eingeführt.
M2.5
import androidx.wear.compose.material.MaterialTheme
MaterialTheme(
colors = AppColors,
typography = AppTypography,
shapes = AppShapes,
content = content
)
M3
import androidx.wear.compose.material3.MaterialTheme
MaterialTheme(
colorScheme = AppColorScheme,
typography = AppTypography,
shapes = AppShapes,
motionScheme = AppMotionScheme,
content = content
)
Farbe
Das Farbsystem in M3 unterscheidet sich erheblich von M2.5. Die Anzahl der Farbparameter hat zugenommen, sie haben andere Namen und werden anders auf M3-Komponenten abgebildet. In Compose gilt dies für die M2.5-Klasse Colors, die M3-Klasse ColorScheme und die zugehörigen Funktionen:
M2.5
import androidx.wear.compose.material.Colors
val appColorScheme: Colors = Colors(
// M2.5 Color parameters
)
M3
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:
M2.5 |
M3 |
|---|---|
|
wurde in |
13 Farben |
28 Farben |
– |
Neues dynamisches Farbdesign |
– |
Neue tertiäre Farben für mehr Ausdruck |
Dynamisches Farbdesign
Eine neue Funktion in M3 ist das dynamische Farbdesign. Wenn Nutzer die Farben des Zifferblatts ändern, werden die Farben auf der Benutzeroberfläche entsprechend angepasst.
Verwenden Sie die Funktion dynamicColorScheme, um ein dynamisches Farbschema zu implementieren und ein defaultColorScheme als Fallback bereitzustellen, 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
- Flexible Schriftarten, mit denen sich die Typografie für verschiedene Strichstärken, Breiten und Rundungen anpassen lässt
AnimatedText, die flexible Schriftarten verwendet
M2.5
import androidx.wear.compose.material.Typography
val Typography = Typography(
// M2.5 TextStyle parameters
)
M3
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 festlegen.
Textstile
Die folgenden TextStyles sind in M3 verfügbar. Sie werden standardmäßig von verschiedenen M3-Komponenten verwendet.
Typografie |
TextStyle |
|---|---|
Anzeige |
displayLarge, displayMedium, displaySmall |
Überschrift |
titleLarge, titleMedium, titleSmall |
Label |
labelLarge, labelMedium, labelSmall |
Text |
bodyLarge, bodyMedium, bodySmall, bodyExtraSmall |
Ziffern |
numeralExtraLarge, numeralLarge, numeralMedium, numeralSmall, numeralExtraSmall |
Bogen |
arcLarge, arcMedium, arcSmall |
Form
Das Formsystem in M3 unterscheidet sich von dem in M2. Die Anzahl der Formparameter hat zugenommen, sie haben andere Namen und werden anders auf M3-Komponenten abgebildet. Die folgenden Formgrößen sind verfügbar:
- Sehr klein
- Klein
- Mittel
- Groß
- Extragroß
In Compose gilt dies für die M2-Klasse Shapes und die M3-Klasse Shapes:
M2.5
import androidx.wear.compose.material.Shapes
val Shapes = Shapes(
// M2.5 Shapes parameters
)
M3
import androidx.wear.compose.material3.Shapes
val Shapes = Shapes(
// M3 Shapes parameters
)
Verwenden Sie die Parameterzuordnung für Formen aus Von Material 2 zu Material 3 in Compose migrieren als Ausgangspunkt.
Form-Morphing
Mit M3 wird das Shape Morphing eingeführt: Formen verändern sich jetzt als Reaktion auf Interaktionen.
Das Verhalten „Form-Morphing“ ist als Variante für eine Reihe von runden Schaltflächen verfügbar (siehe unten):
Schaltflächen |
Funktion zum Morphen von Formen |
|---|---|
|
Mit IconButtonDefaults.animatedShape() wird das Symbol der Schaltfläche beim Drücken animiert. |
|
IconToggleButtonDefaults.animatedShape() animiert die Schaltfläche zum Ein-/Ausschalten des Symbols beim Drücken und Mit IconToggleButtonDefaults.variantAnimatedShapes() wird die Ein/Aus-Schaltfläche mit Symbol beim Drücken und Aktivieren/Deaktivieren animiert. |
|
TextButtonDefaults.animatedShape() animiert die Textschaltfläche beim Drücken. |
|
TextToggleButtonDefaults.animatedShapes() animiert die Text-Umschaltfläche beim Drücken und TextToggleButtonDefaults.variantAnimatedShapes() animiert die Text-Umschaltfläche beim Drücken und Aktivieren/Deaktivieren. |
Komponenten und Layout
Die meisten Komponenten und Layouts aus M2.5 sind in M3 verfügbar. Einige M3-Komponenten und ‑Layouts gab es in M2.5 jedoch nicht. Außerdem haben einige M3-Komponenten mehr Varianten als ihre Entsprechungen in M2.5.
Einige Komponenten erfordern besondere Überlegungen. Die folgenden Funktionszuordnungen werden jedoch als Ausgangspunkt empfohlen:
Hier finden Sie eine vollständige Liste aller Material 3-Komponenten:
Material 3 |
Entsprechende Material 2.5-Komponente (falls nicht neu in M3) |
|---|---|
Neu |
|
Neu |
|
android.wear.compose.material.Scaffold (mit androidx.wear.compose.material3.ScreenScaffold ) |
|
Neu |
|
androidx.wear.compose.material.ToggleChip mit einem Kontrollkästchen |
|
androidx.wear.compose.material.Chip (nur wenn kein Hintergrund erforderlich ist) |
|
Neu |
|
Neu |
|
Neu |
|
androidx.wear.compose.material.Chip, wenn ein tonaler Schaltflächenhintergrund erforderlich ist |
|
Neu |
|
Neu |
|
Neu |
|
Neu |
|
Neu |
|
androidx.wear.compose.material.ToggleChip mit einem Optionsfeld als Ein/Aus-Steuerelement |
|
android.wear.compose.material.Scaffold (mit androidx.wear.compose.material3.AppScaffold) |
|
androidx.wear.compose.material3.SegmentedCircularProgressIndicator |
Neu |
androidx.wear.compose.material.SwipeToRevealCard und androidx.wear.compose.material.SwipeToRevealChip |
|
androidx.wear.compose.material.ToggleChip mit einem Schalter zur Ein/Aus-Steuerung |
|
Neu |
Und schließlich eine Liste einiger relevanter Komponenten aus der Wear Compose Foundation-Bibliothek Version 1.5.0-beta01:
Wear Compose Foundation 1.5.0-beta |
|
|---|---|
Wird verwendet, um Composables in einer Anwendung zu annotieren, um den aktiven Teil der Komposition im Blick zu behalten und den Fokus zu koordinieren. |
|
Ein horizontal scrollender Pager, der auf den Compose Foundation-Komponenten basiert und Wear-spezifische Verbesserungen enthält, um die Leistung zu optimieren und die Wear OS-Richtlinien einzuhalten. |
|
Ein vertikal scrollender Pager, der auf den Compose Foundation-Komponenten basiert und Wear-spezifische Verbesserungen enthält, um die Leistung zu optimieren und die Wear OS-Richtlinien einzuhalten. |
|
Kann anstelle von ScalingLazyColumn verwendet werden, um jedem Element Scroll-Transformationseffekte hinzuzufügen. |
|
Schaltflächen
Die Schaltflächen in M3 unterscheiden sich von denen in M2.5. Der M2.5-Chip wurde durch eine Schaltfläche ersetzt. Die Button-Implementierung bietet Standardwerte für Text, maxLines und textAlign. Diese Standardwerte können im Text-Element überschrieben werden.
M2.5
import androidx.wear.compose.material.Chip
//M2.5 Buttons
Chip(...)
CompactChip(...)
Button(...)
M3
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 API-Referenzübersicht zu Compose Material 3.
Mit M3 wird eine neue Schaltfläche eingeführt: EdgeButton. EdgeButton ist in vier verschiedenen Größen erhältlich: sehr klein, klein, mittelgroß und groß. Bei der EdgeButton-Implementierung wird je nach Größe ein Standardwert für maxLines angegeben, der angepasst werden kann.
Wenn Sie TransformingLazyColumn und ScalingLazyColumn verwenden, übergeben Sie EdgeButton an ScreenScaffold, damit es sich beim Scrollen in seiner Form verändert. Im folgenden Code sehen Sie, wie Sie EdgeButton mit ScreenScaffold und TransformingLazyColumn verwenden.
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 haben AppScaffold und die neue zusammensetzbare Funktion ScreenScaffold Scaffold ersetzt. Mit AppScaffold und ScreenScaffold wird die Struktur eines Bildschirms festgelegt und die Übergänge der Komponenten ScrollIndicator und TimeText koordiniert.
Mit AppScaffold bleiben statische Bildschirmelemente wie TimeText bei Übergängen in der App, z. B. beim Wischen zum Schließen, sichtbar. Sie bietet einen Slot für den Hauptanwendungsinhalt, der in der Regel von einer Navigationskomponente wie SwipeDismissableNavHost bereitgestellt wird.
Sie deklarieren ein AppScaffold für die Aktivität und verwenden ein ScreenScaffold für jeden Bildschirm.
M2.5
import androidx.wear.compose.material.Scaffold
Scaffold {...}
M3
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 ein 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 Ü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 paginiert wird. Dies wird durch die PagerState bestimmt.
Außerdem gibt es eine neue AnimatedPage-Komponente, mit der eine Seite in einem Pager mit einem Skalierungs- und Scrim-Effekt animiert wird, der auf ihrer Position basiert.
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 mit M3 ein VerticalPagerScaffold eingeführt, das dem gleichen Muster wie 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: Wird anstelle von Inhalten gezeichnet, die noch nicht geladen wurden.- Ein Platzhalter-Schimmereffekt
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.
M2.5 |
M3 |
|---|---|
|
Wurde entfernt |
|
Wurde entfernt |
|
Wurde in |
|
Wurde entfernt |
|
wurde entfernt |
|
Wurde entfernt |
|
Wurde entfernt |
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 das Skalieren und Morphen von Animationen für Listenelemente während des Scrollens, was die Nutzerfreundlichkeit verbessert.
Ähnlich wie bei ScalingLazyColumn wird rememberTransformingLazyColumnState() bereitgestellt, um eine TransformingLazyColumnState zu erstellen, die über Kompositionen hinweg gespeichert wird.
Wenn Sie Skalierungs- und Morphing-Animationen hinzufügen möchten, fügen Sie jedem Listenelement Folgendes hinzu:
Modifier.transformedHeight. Damit können Sie die transformierte Höhe der Elemente mit einemTransformationSpecberechnen. Sie könnenrememberTransformationSpec()verwenden, sofern keine weiteren Anpassungen erforderlich sind.- A
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.