Material Design 3 ist die nächste Stufe im Material Design. Es enthält aktualisierte Designs, Komponenten und Material You-Personalisierungsfunktionen. wie dynamische Farben. Es handelt sich um ein Update von Material Design 2. kohärent mit dem neuen visuellen Stil und der System-UI von Android 12 und höher.
In diesem Leitfaden geht es um die Migration von Content (androidx.compose.material) Jetpack-Bibliothek zu Compose Material 3 (androidx.compose.material3) Jetpack-Bibliothek.
Ansätze
Generell sollten Sie M2 und M3 langfristig nicht zusammen in einer einzelnen App verwenden. Dieses liegt daran, dass sich die beiden Designsysteme und die jeweiligen Bibliotheken unterscheiden. ihre UX/UI-Designs und die Compose-Implementierung wesentlich verbessern.
Ihre App verwendet möglicherweise ein Designsystem, z. B. eines, das mit Figma erstellt wurde. In solchen Fällen empfehlen wir Ihnen oder Ihrem Designteam, die Migration von M2 auf M3, bevor Sie die Migration vom Typ „Compose“ starten. Eine Migration ist nicht sinnvoll wenn das UX-/UI-Design auf M2 basiert.
Außerdem sollte Ihr Migrationsansatz je nach Anwendungsfall Größe, Komplexität und UX/UI-Design. So können Sie die Auswirkungen auf Ihre Codebasis zu verbessern. Die Migration sollte phasenweise erfolgen.
Zeitpunkt der Migration
Sie sollten die Migration so schnell wie möglich starten. Es ist jedoch wichtig, Überlegen Sie, ob sich Ihre App in einer realistischen Position für eine vollständige Migration befindet. von M2 auf M3 um. Es gibt einige „Blockierszenarien“, die Sie untersuchen sollten. bevor Sie beginnen:
Szenario | Empfohlene Vorgehensweise |
---|---|
Keine „Blocker“ | Phasenweise Migration starten |
Eine Komponente aus M2 ist in M3 noch nicht verfügbar. Weitere Informationen finden Sie unten im Abschnitt Komponenten und Layouts. | Phasenweise Migration starten |
Sie oder Ihr Designteam haben das Designsystem der App nicht von M2 zu M3 migriert. | Migrieren Sie das Designsystem von M2 zu M3 und beginnen Sie dann mit der schrittweisen Migration. |
Auch wenn Sie von den oben genannten Szenarien betroffen sind, sollten Sie einen schrittweisen Ansatz verfolgen. bevor ein App-Update festgeschrieben und veröffentlicht wird. In diesen Fällen würden M2 und M3 parallel verwenden und M2 während der Migration M3.
Gestaffelter Ansatz
Die allgemeinen Schritte für eine stufenweise Migration sind folgende:
- Fügen Sie die M3-Abhängigkeit neben der M2-Abhängigkeit hinzu.
- Füge neben M2-Versionen deiner App-Designs auch M3-Versionen deiner App-Designs hinzu Designs der App.
- Migrieren Sie einzelne Module, Bildschirme oder zusammensetzbare Funktionen Größe und Komplexität deiner App (Details siehe unten).
- Entfernen Sie nach der vollständigen Migration die M2-Version(en) der Designs Ihrer App.
- M2-Abhängigkeit entfernen.
Abhängigkeiten
M3 hat ein separates Paket und eine separate Version als M2:
M2
implementation "androidx.compose.material:material:$m2-version"
M3
implementation "androidx.compose.material3:material3:$m3-version"
Die aktuellen M3-Versionen finden Sie auf der Seite Compose Material 3-Releases.
Andere Materialabhängigkeiten außerhalb der M2- und M3-Hauptbibliotheken wurden geändert. Es wird eine Mischung aus den Paketen und Versionen M2 und M3 verwendet, Auswirkungen auf die Migration. Sie können in der vorliegenden Form mit M3 verwendet werden:
Mediathek | Paket und Version |
---|---|
Symbole aus Material Design erstellen | androidx.compose.material:material-icons-*:$m2-version |
Verbreitung von Material komponieren | androidx.compose.material:material-ripple:$m2-version |
Fenstergrößenklasse aus Material 3 erstellen | androidx.compose.material3:material3-window-size-class:$m3-version |
Experimentelle APIs
Einige M3 APIs gelten als experimentell. In solchen Fällen müssen Sie
die Funktion oder Dateiebene mithilfe der Annotation ExperimentalMaterial3Api
:
import androidx.compose.material3.ExperimentalMaterial3Api
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
// M3 composables
}
Designs
Sowohl in M2 als auch in M3 heißt das zusammensetzbare Design MaterialTheme
, aber der Importmodus
Pakete und Parameter unterscheiden sich:
M2
import androidx.compose.material.MaterialTheme
MaterialTheme(
colors = AppColors,
typography = AppTypography,
shapes = AppShapes
) {
// M2 content
}
M3
import androidx.compose.material3.MaterialTheme
MaterialTheme(
colorScheme = AppColorScheme,
typography = AppTypography,
shapes = AppShapes
) {
// M3 content
}
Farbe
<ph type="x-smartling-placeholder">![Vergleich der Farbsysteme M2 und M3](https://developer.android.google.cn/static/develop/ui/compose/images/migration-color-update.png?authuser=8&hl=de)
Das Farbsystem in M3 unterscheidet sich deutlich von M2. Die
erhöht sich die Anzahl der Farbparameter, sie haben unterschiedliche Namen und
anders als M3-Komponenten ab. In „Compose“ gilt dies für die M2-
Colors
-Klasse, die M3-Klasse ColorScheme
und verwandte Funktionen:
M2
import androidx.compose.material.lightColors
import androidx.compose.material.darkColors
val AppLightColors = lightColors(
// M2 light Color parameters
)
val AppDarkColors = darkColors(
// M2 dark Color parameters
)
val AppColors = if (darkTheme) {
AppDarkColors
} else {
AppLightColors
}
M3
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
val AppLightColorScheme = lightColorScheme(
// M3 light Color parameters
)
val AppDarkColorScheme = darkColorScheme(
// M3 dark Color parameters
)
val AppColorScheme = if (darkTheme) {
AppDarkColorScheme
} else {
AppLightColorScheme
}
Angesichts der erheblichen Unterschiede zwischen den Farbsystemen M2 und M3
Keine sinnvolle Zuordnung für Color
-Parameter. Verwenden Sie stattdessen das Material
Theme Builder verwenden, um ein M3-Farbschema zu generieren. M2 verwenden
Farben als Kernfarben im Tool an, die das Tool in Tonwerte erweitert.
Paletten, die vom M3-Farbschema verwendet werden. Die folgenden Zuordnungen werden als
Ausgangspunkt:
M2 | Tool zur Erstellung von Material-Designs |
---|---|
primary |
Primär |
primaryVariant |
Sekundär |
secondary |
Dritter Track |
surface oder background |
Neutral |
![M2-Farben, die in Material Theme Builder zum Generieren eines M3-Farbschemas verwendet werden](https://developer.android.google.cn/static/develop/ui/compose/images/migration-colorscheme-update.png?authuser=8&hl=de)
Sie können die Hexadezimalcodewerte der Farbe für helle und dunkle Designs aus dem Tool kopieren. und implementieren Sie damit eine M3-ColorScheme-Instanz. Alternativ kann Material Mit Theme Builder kann Compose-Code exportiert werden.
isLight
Im Gegensatz zur M2-Klasse Colors
enthält die M3-Klasse ColorScheme
kein
isLight
. Im Allgemeinen sollten Sie versuchen,
diese Informationen auf Themenebene. Beispiel:
M2
import androidx.compose.material.lightColors
import androidx.compose.material.darkColors
import androidx.compose.material.MaterialTheme
@Composable
private fun AppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colors = if (darkTheme) darkColors(…) else lightColors(…)
MaterialTheme(
colors = colors,
content = content
)
}
@Composable
fun AppComposable() {
AppTheme {
val cardElevation = if (MaterialTheme.colors.isLight) 0.dp else 4.dp
…
}
}
M3
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.MaterialTheme
val LocalCardElevation = staticCompositionLocalOf { Dp.Unspecified }
@Composable
private fun AppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val cardElevation = if (darkTheme) 4.dp else 0.dp
CompositionLocalProvider(LocalCardElevation provides cardElevation) {
val colorScheme = if (darkTheme) darkColorScheme(…) else lightColorScheme(…)
MaterialTheme(
colorScheme = colorScheme,
content = content
)
}
}
@Composable
fun AppComposable() {
AppTheme {
val cardElevation = LocalCardElevation.current
…
}
}
Weitere Informationen finden Sie im Erstellungsleitfaden für benutzerdefinierte Designsysteme.
Dynamische Farben
Eine neue Funktion in M3 sind die dynamischen Farben. Anstelle der benutzerdefinierten
kann ein ColorScheme
von M3 unter Android die Farben des Gerätehintergrunds verwenden.
ab Version 12 mit den folgenden Funktionen:
Typografie
<ph type="x-smartling-placeholder">![Vergleich der Typografiesysteme M2 und M3](https://developer.android.google.cn/static/develop/ui/compose/images/migration-typography-update.png?authuser=8&hl=de)
Das Typografiesystem in M3 unterscheidet sich von M2. Die Anzahl der
Typografieparameter sind ungefähr gleich, aber sie haben unterschiedliche Namen und
andere Zuordnung als M3-Komponenten. In „Compose“ gilt dies für die M2-
Typography
-Klasse und die M3-Klasse Typography
:
M2
import androidx.compose.material.Typography
val AppTypography = Typography(
// M2 TextStyle parameters
)
M3
import androidx.compose.material3.Typography
val AppTypography = Typography(
// M3 TextStyle parameters
)
Die folgenden TextStyle
-Parameterzuordnungen werden als Ausgangspunkt
Punkt:
M2 | M3 |
---|---|
h1 |
displayLarge |
h2 |
displayMedium |
h3 |
displaySmall |
– | headlineLarge |
h4 |
headlineMedium |
h5 |
headlineSmall |
h6 |
titleLarge |
subtitle1 |
titleMedium |
subtitle2 |
titleSmall |
body1 |
bodyLarge |
body2 |
bodyMedium |
caption |
bodySmall |
button |
labelLarge |
– | labelMedium |
overline |
labelSmall |
Form
<ph type="x-smartling-placeholder">![Vergleich der M2- und M3-Formsysteme](https://developer.android.google.cn/static/develop/ui/compose/images/migration-shape-update.png?authuser=8&hl=de)
Das Formsystem in M3 unterscheidet sich von M2. Die Anzahl der Formen
haben die Parameter zugenommen, sie haben einen unterschiedlichen Namen und sie weisen unterschiedliche
M3-Komponenten In „Compose“ gilt dies für die M2-Klasse Shapes
und die
M3-Shapes
-Klasse:
M2
import androidx.compose.material.Shapes
val AppShapes = Shapes(
// M2 Shape parameters
)
M3
import androidx.compose.material3.Shapes
val AppShapes = Shapes(
// M3 Shape parameters
)
Die folgenden Shape
-Parameterzuordnungen werden als Ausgangspunkt
Punkt:
M2 | M3 |
---|---|
– | extraSmall |
small |
small |
medium |
medium |
large |
large |
– | extraLarge |
Komponenten und Layouts
Die meisten Komponenten und Layouts aus M2 sind in M3 verfügbar. Es gibt jedoch einige fehlen sowie neue, die es in M2 noch nicht gab. Außerdem werden einige M3- Komponenten haben mehr Variationen als ihre Entsprechungen in M2. Im Allgemeinen ist die M3- API-Oberflächen versuchen, ihren nächstgelegenen Entsprechungen so ähnlich wie möglich zu sein in M2.
Angesichts der aktualisierten Farb-, Typografie- und Formsysteme neigen M3-Komponenten dazu, von den neuen Themenwerten unterscheidet. Schauen Sie sich die Tokens im Quellcode von Compose Material 3 als Quelle für für diese Zuordnungen gilt.
Während einige Komponenten besondere Überlegungen erfordern, ist die folgende Funktion Zuordnungen werden als Ausgangspunkt empfohlen:
Fehlende APIs:
M2 | M3 |
---|---|
androidx.compose.material.swipeable |
Noch nicht verfügbar |
Ersetzte APIs:
M2 | M3 |
---|---|
androidx.compose.material.BackdropScaffold |
Kein M3-Äquivalent, stattdessen zu Scaffold oder BottomSheetScaffold migrieren |
androidx.compose.material.BottomDrawer |
Kein M3-Äquivalent, stattdessen zu ModalBottomSheet migrieren |
Umbenannte APIs:
Alle anderen APIs:
Neueste M3-Komponenten und -Layouts in der Compose Material 3 API ansehen Referenzübersicht und achte auf der Releaseseite auf neue und aktualisierte APIs.
Gerüst, Snackbars und Navigationsleiste
<ph type="x-smartling-placeholder">![Vergleich des M2- und M3-Gerüsts mit Snackbar und Navigationsleiste](https://developer.android.google.cn/static/develop/ui/compose/images/migration-scaffold-update.gif?authuser=8&hl=de)
Das Gerüst in M3 unterscheidet sich von M2. Sowohl in M2 als auch in M3 ist das zusammensetzbare Hauptlayout
heißt Scaffold
, aber die Importpakete und -parameter unterscheiden sich:
M2
import androidx.compose.material.Scaffold
Scaffold(
// M2 scaffold parameters
)
M3
import androidx.compose.material3.Scaffold
Scaffold(
// M3 scaffold parameters
)
Der M2-Parameter Scaffold
enthält einen backgroundColor
-Parameter mit folgendem Namen:
containerColor
in der M3 Scaffold
:
M2
import androidx.compose.material.Scaffold
Scaffold(
backgroundColor = …,
content = { … }
)
M3
import androidx.compose.material3.Scaffold
Scaffold(
containerColor = …,
content = { … }
)
Die M2-Klasse ScaffoldState
ist in M3 nicht mehr vorhanden, da sie eine
drawerState
-Parameter, der nicht mehr benötigt wird. Um Snackbars mit
M3-Scaffold
. Verwenden Sie stattdessen SnackbarHostState
:
M2
import androidx.compose.material.Scaffold
import androidx.compose.material.rememberScaffoldState
val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()
Scaffold(
scaffoldState = scaffoldState,
content = {
…
scope.launch {
scaffoldState.snackbarHostState.showSnackbar(…)
}
}
)
M3
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()
Scaffold(
snackbarHost = { SnackbarHost(snackbarHostState) },
content = {
…
scope.launch {
snackbarHostState.showSnackbar(…)
}
}
)
Alle drawer*
-Parameter aus M2-Scaffold
wurden entfernt aus
M3-Scaffold
. Dazu gehören Parameter wie drawerShape
und
drawerContent
. Wenn du mit dem M3-Scaffold
eine Leiste einblenden möchtest, verwende eine Navigationsleiste
zusammensetzbar, wie z. B. ModalNavigationDrawer
:
M2
import androidx.compose.material.DrawerValue
import
import androidx.compose.material.Scaffold
import androidx.compose.material.rememberDrawerState
import androidx.compose.material.rememberScaffoldState
val scaffoldState = rememberScaffoldState(
drawerState = rememberDrawerState(DrawerValue.Closed)
)
val scope = rememberCoroutineScope()
Scaffold(
scaffoldState = scaffoldState,
drawerContent = { … },
drawerGesturesEnabled = …,
drawerShape = …,
drawerElevation = …,
drawerBackgroundColor = …,
drawerContentColor = …,
drawerScrimColor = …,
content = {
…
scope.launch {
scaffoldState.drawerState.open()
}
}
)
M3
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.Scaffold
import androidx.compose.material3.rememberDrawerState
val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
drawerState = drawerState,
drawerContent = {
ModalDrawerSheet(
drawerShape = …,
drawerTonalElevation = …,
drawerContainerColor = …,
drawerContentColor = …,
content = { … }
)
},
gesturesEnabled = …,
scrimColor = …,
content = {
Scaffold(
content = {
…
scope.launch {
drawerState.open()
}
}
)
}
)
Obere App-Leiste
<ph type="x-smartling-placeholder">![Vergleich des M2- und M3-Gerüsts mit oberer App-Leiste und scrollbarer Liste](https://developer.android.google.cn/static/develop/ui/compose/images/migration-topbar-update.png?authuser=8&hl=de)
Die oberen App-Leisten in M3 unterscheiden sich von denen in M2. In beiden M2-Versionen
und M3 hat die zusammensetzbare Haupt-App-Leiste den Namen TopAppBar
, aber der Importmodus
Pakete und Parameter unterscheiden sich:
M2
import androidx.compose.material.TopAppBar
TopAppBar(…)
M3
import androidx.compose.material3.TopAppBar
TopAppBar(…)
Sie können M3 CenterAlignedTopAppBar
verwenden, wenn Sie
und zentrieren Inhalte innerhalb der M2-TopAppBar
. Es ist gut, sich der
MediumTopAppBar
und LargeTopAppBar
ebenfalls.
Die oberen M3-App-Leisten enthalten einen neuen scrollBehavior
-Parameter, um verschiedene
Funktionen beim Scrollen durch die Klasse TopAppBarScrollBehavior
, wie z. B.
z. B. Höhenunterschiede. Dies funktioniert in Verbindung mit Scrollen von Inhalten über
Modifer.nestedScroll
In der M2-TopAppBar
war dies möglich,
den elevation
-Parameter manuell ändern:
M2
import androidx.compose.material.AppBarDefaults
import androidx.compose.material.Scaffold
import androidx.compose.material.TopAppBar
val state = rememberLazyListState()
val isAtTop by remember {
derivedStateOf {
state.firstVisibleItemIndex == 0 && state.firstVisibleItemScrollOffset == 0
}
}
Scaffold(
topBar = {
TopAppBar(
elevation = if (isAtTop) {
0.dp
} else {
AppBarDefaults.TopAppBarElevation
},
…
)
},
content = {
LazyColumn(state = state) { … }
}
)
M3
import androidx.compose.material3.Scaffold
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
TopAppBar(
scrollBehavior = scrollBehavior,
…
)
},
content = {
LazyColumn { … }
}
)
Navigationsleiste / Navigationsleiste unten
<ph type="x-smartling-placeholder">![Vergleich der unteren Navigationsleiste in M2 und der N3-Navigationsleiste](https://developer.android.google.cn/static/develop/ui/compose/images/migration-bottomnav-update.png?authuser=8&hl=de)
Die Navigationsleiste unten wurde in M2 in Navigationsleiste umbenannt.
M3. In M2 gibt es BottomNavigation
und
BottomNavigationItem
zusammensetzbare Funktionen, während in M3 die
Zusammensetzbare Funktionen für NavigationBar
und NavigationBarItem
:
M2
import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem
BottomNavigation {
BottomNavigationItem(…)
BottomNavigationItem(…)
BottomNavigationItem(…)
}
M3
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
NavigationBar {
NavigationBarItem(…)
NavigationBarItem(…)
NavigationBarItem(…)
}
Schaltflächen, Symbolschaltflächen und UAS
<ph type="x-smartling-placeholder">![M2- und M3-Schaltflächen im Vergleich](https://developer.android.google.cn/static/develop/ui/compose/images/migration-buttons-update.png?authuser=8&hl=de)
Schaltflächen, Symbolschaltflächen und unverankerte Aktionsschaltflächen (UAS) in M3 unterscheiden sich von denen in M2. M3 enthält alle zusammensetzbaren Funktionen der M2-Schaltfläche:
M2
import androidx.compose.material.Button
import androidx.compose.material.ExtendedFloatingActionButton
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.IconButton
import androidx.compose.material.IconToggleButton
import androidx.compose.material.OutlinedButton
import androidx.compose.material.TextButton
// M2 buttons
Button(…)
OutlinedButton(…)
TextButton(…)
// M2 icon buttons
IconButton(…)
IconToggleButton(…)
// M2 FABs
FloatingActionButton(…)
ExtendedFloatingActionButton(…)
M3
import androidx.compose.material3.Button
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.IconButton
import androidx.compose.material3.IconToggleButton
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.TextButton
// M3 buttons
Button(…)
OutlinedButton(…)
TextButton(…)
// M3 icon buttons
IconButton(…)
IconToggleButton(…)
// M3 FABs
FloatingActionButton(…)
ExtendedFloatingActionButton(…)
M3 enthält auch neue Variationen von Schaltflächen. Sie können sie sich in der englischsprachigen PDF-Datei Compose Material 3 API-Referenzübersicht
Wechseln
<ph type="x-smartling-placeholder">![M2- und M3-Switches im Vergleich](https://developer.android.google.cn/static/develop/ui/compose/images/migration-switch-update.png?authuser=8&hl=de)
Der Wechsel in M3 unterscheidet sich von M2. Sowohl bei M2 als auch bei M3
Die zusammensetzbare Funktion heißt Switch
, aber die Importpakete unterscheiden sich:
M2
import androidx.compose.material.Switch
Switch(…)
M3
import androidx.compose.material3.Switch
Switch(…)
Oberflächen und Erhebungen
<ph type="x-smartling-placeholder">![Vergleich zwischen M2-Höhen und M3-Oberflächenhöhen in hellen und dunklen Designs](https://developer.android.google.cn/static/develop/ui/compose/images/migration-elevation-update.png?authuser=8&hl=de)
Die Oberflächen- und Höhensysteme in M3 unterscheiden sich von M2. Es gibt zwei Arten von Höhe in M3:
- Schattenhöhe (wirft einen Schatten, wie bei M2)
- Höhen in Tonhöhe (überlagert eine Farbe, neu auf M3)
In Compose gilt dies für die M2-Funktion Surface
und die M3-Funktion
Surface
-Funktion verwenden:
M2
import androidx.compose.material.Surface
Surface(
elevation = …
) { … }
M3
import androidx.compose.material3.Surface
Surface(
shadowElevation = …,
tonalElevation = …
) { … }
Sie können die Werte von elevation
Dp
in M2 für beide shadowElevation
verwenden
und/oder tonalElevation
in M3, je nach Präferenz für UX/UI-Design.
Surface
ist die zusammensetzbare Sicherung hinter den meisten Komponenten.
zusammensetzbare Funktionen enthalten möglicherweise auch Höhenparameter, die Sie in derselben
Die stufenförmigen Höhen in M3 ersetzen das Konzept der Höhen-Overlays in M2 dunkel.
Themen . Daher werden ElevationOverlay
und LocalElevationOverlay
nicht in M3 vorhanden, und LocalAbsoluteElevation
in M2 wurde zu
LocalAbsoluteTonalElevation
in M3.
Alpha für Betonung und Inhalt
<ph type="x-smartling-placeholder">![Vergleich der Symbol- und Textbetonung von M2 und M3](https://developer.android.google.cn/static/develop/ui/compose/images/migration-emphasis-update.png?authuser=8&hl=de)
Die Betonung in M3 unterscheidet sich deutlich von M2. Bei M2-Betonung besteht die „An“-Farben mit bestimmten Alpha-Werten, um Inhalte wie Text und Symbole. In M3 gibt es jetzt verschiedene Ansätze:
- Verwendung von „on“-Farben neben ihren „Variant on“-Farben aus der erweiterten M3-Version Farbsystem.
- Unterschiedliche Schriftstärken für Text verwenden
Daher sind ContentAlpha
und LocalContentAlpha
in
M3 und muss ersetzt werden.
Die folgenden Zuordnungen werden als Ausgangspunkt empfohlen:
M2 | M3 |
---|---|
onSurface mit ContentAlpha.high |
onSurface allgemein, FontWeight.Medium –FontWeight.Black für Text |
onSurface mit ContentAlpha.medium |
onSurfaceVariant allgemein, FontWeight.Thin –FontWeight.Normal für Text |
onSurface mit ContentAlpha.disabled |
onSurface.copy(alpha = 0.38f) |
Hier ein Beispiel für die Betonung von Symbolen in M2 im Vergleich zu M3:
M2
import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha
// High emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
Icon(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Icon(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
Icon(…)
}
M3
import androidx.compose.material3.LocalContentColor
// High emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface) {
Icon(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
Icon(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)) {
Icon(…)
}
Hier ein Beispiel für die Textbetonung in M2 im Vergleich zu M3:
M2
import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha
// High emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
Text(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Text(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
Text(…)
}
M3
import androidx.compose.material3.LocalContentColor
// High emphasis
Text(
…,
fontWeight = FontWeight.Bold
)
// Medium emphasis
Text(
…,
fontWeight = FontWeight.Normal
)
// Disabled emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)) {
Text(
…,
fontWeight = FontWeight.Normal
)
}
Hintergründe und Container
Hintergründe in M2 werden in M3 als „Container“ bezeichnet. Im Allgemeinen können Sie
background*
-Parameter in M2 mit container*
in M3, wobei dieselben Werte verwendet werden.
Beispiel:
M2
Badge(
backgroundColor = MaterialTheme.colors.primary
) { … }
M3
Badge(
containerColor = MaterialTheme.colorScheme.primary
) { … }
Nützliche Links
Weitere Informationen zur Migration von M2 zu M3 in Compose finden Sie in den folgenden zusätzliche Ressourcen.
Docs
Beispiel-Apps
- Antwort M3 Beispiel-App
- Migration der Jetchat-Beispielanwendung von M2 zu M3 <ph type="x-smartling-placeholder">
- Beispiel-App für Jetnews von M2 zu M3 migrieren
- Jetzt in der Hero-App von Android M3 :core-designsystem-Modul
Videos
API-Referenz und Quellcode
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Material Design 2 in Compose
- Material Design 3 in Compose
- Benutzerdefinierte Designsysteme in Compose