In Compose von Material 2 zu Material 3 migrieren

Material Design 3 ist die nächste Weiterentwicklung des 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:

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:

1. Fügen Sie die M3-Abhängigkeit neben der M2-Abhängigkeit hinzu.
2. Füge neben M2-Versionen deiner App-Designs auch M3-Versionen deiner App-Designs hinzu Designs der App.
3. Migrieren Sie einzelne Module, Bildschirme oder zusammensetzbare Funktionen Größe und Komplexität deiner App (Details siehe unten).
4. Entfernen Sie nach der vollständigen Migration die M2-Version(en) der Designs Ihrer App.
5. M2-Abhängigkeit entfernen.

Abhängigkeiten

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

implementation "androidx.compose.material:material:$m2-version"

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:

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:

import androidx.compose.material.MaterialTheme

MaterialTheme(
    colors = AppColors,
    typography = AppTypography,
    shapes = AppShapes
) {
    // M2 content
}

import androidx.compose.material3.MaterialTheme

MaterialTheme(
    colorScheme = AppColorScheme,
    typography = AppTypography,
    shapes = AppShapes
) {
    // M3 content
}

Farbe

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:

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
}

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:

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:

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
        …
    }
}

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:

• dynamicLightColorScheme
• dynamicDarkColorScheme

Typografie

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:

import androidx.compose.material.Typography

val AppTypography = Typography(
    // M2 TextStyle parameters
)

import androidx.compose.material3.Typography

val AppTypography = Typography(
    // M3 TextStyle parameters
)

Die folgenden TextStyle-Parameterzuordnungen werden als Ausgangspunkt Punkt:

Form

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:

import androidx.compose.material.Shapes

val AppShapes = Shapes(
    // M2 Shape parameters
)

import androidx.compose.material3.Shapes

val AppShapes = Shapes(
    // M3 Shape parameters
)

Die folgenden Shape-Parameterzuordnungen werden als Ausgangspunkt Punkt:

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:

Ersetzte APIs:

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

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:

import androidx.compose.material.Scaffold

Scaffold(
    // M2 scaffold parameters
)

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:

import androidx.compose.material.Scaffold

Scaffold(
    backgroundColor = …,
    content = { … }
)

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:

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(…)
        }
    }
)

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:

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

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

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:

import androidx.compose.material.TopAppBar

TopAppBar(…)

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:

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) { … }
    }
)

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

Die Navigationsleiste unten in M2 wurde in Navigationsleiste in M2 umbenannt. M3. In M2 gibt es BottomNavigation und BottomNavigationItem zusammensetzbare Funktionen, während in M3 die Zusammensetzbare Funktionen für NavigationBar und NavigationBarItem:

import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem

BottomNavigation {
    BottomNavigationItem(…)
    BottomNavigationItem(…)
    BottomNavigationItem(…)
}

import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem

NavigationBar {
    NavigationBarItem(…)
    NavigationBarItem(…)
    NavigationBarItem(…)
}

Schaltflächen, Symbolschaltflächen und UAS

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:

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(…)

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

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:

import androidx.compose.material.Switch

Switch(…)

import androidx.compose.material3.Switch

Switch(…)

Oberflächen und Erhebungen

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:

import androidx.compose.material.Surface

Surface(
    elevation = …
) { … }

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

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:

Hier ein Beispiel für die Betonung von Symbolen in M2 und M3:

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(…)
}

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:

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(…)
}

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:

Badge(
    backgroundColor = MaterialTheme.colors.primary
) { … }

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

• Material Design 3 in Compose

Beispiel-Apps

• Antwort M3 Beispiel-App
• Migration der Jetchat-Beispielanwendung von M2 zu M3
  • Erste Migration zu Alpha01
  • Nachfassen zu Alpha10
• Beispiel-App für Jetnews von M2 zu M3 migrieren
• Jetzt in der Hero-App von Android M3 :core-designsystem-Modul

Videos

• Material You mit Jetpack Compose implementieren

API-Referenz und Quellcode

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