Material Design 3 to kolejna ewolucja Material Design. Zawiera zaktualizowane motywy, komponenty i funkcje personalizacji Material You, takie jak dynamiczne kolory. To aktualizacja Material Design 2, która jest spójna z nowym stylem wizualnym i interfejsem systemu na Androidzie 12 i nowszych.
Ten przewodnik dotyczy migracji z biblioteki narzędzia Compose Material (androidx.compose.material) Jetpack do biblioteki Jetpack w systemie tworzenia wiadomości 3 (androidx.compose.material3).
Sposoby
Ogólnie rzecz biorąc, nie należy używać w dłuższej perspektywie zarówno M2, jak i M3 w jednej aplikacji. Wynika to z faktu, że 2 systemy projektowania i odpowiednie biblioteki znacznie się różnią pod względem UX/UI i implementacji tworzenia.
Aplikacja może wykorzystywać system projektowania, na przykład system utworzony przy użyciu aplikacji Figma. W takich przypadkach zdecydowanie zalecamy też, aby zespół projektantów przeprowadził migrację z wersji M2 do M3 przed rozpoczęciem migracji w trybie tworzenia wiadomości. Migracja aplikacji do wersji M3 nie ma sensu, jeśli interfejs i interfejs są oparte na M2.
Dodatkowo Twoje podejście do migracji powinno się różnić w zależności od rozmiaru, złożoności i projektu UX/UI aplikacji. Pomaga to zminimalizować wpływ na bazę kodu. Migracja powinna przebiegać stopniowo.
Kiedy migracja
Zacznij migrację jak najszybciej. Warto jednak zastanowić się, czy aplikacja jest w realistycznej sytuacji, aby całkowicie przejść z wersji M2 na M3. Przed rozpoczęciem warto rozważyć kilka scenariuszy „blokujących”:
| Scenariusz | Zalecane działania |
|---|---|
| Brak „blokerów” | Rozpocznij migrację stopniową |
| Komponent z wersji M2 nie jest jeszcze dostępny w wersji M3. Zobacz sekcję Komponenty i układy poniżej. | Rozpocznij migrację stopniową |
| System projektowania aplikacji nie został przeniesiony z M2 do M3 przez Ciebie ani zespół projektowy. | Przeprowadź migrację systemu projektowania z wersji M2 do M3, a następnie rozpocznij stopniową migrację |
Nawet jeśli opisane wyżej sytuacje mają wpływ na migrację, przed zatwierdzeniem i opublikowaniem aktualizacji należy stopniowo podejść do migracji. W takich przypadkach możesz używać obok siebie wersji M2 i M3 i stopniowo je wycofywać podczas migracji do M3.
Metoda stopniowa
Ogólna procedura stopniowej migracji jest następująca:
- Dodanie zależności M3 i M2.
- Dodaj wersje M3 motywu(y) aplikacji razem z wersjami M2 motywów aplikacji.
- Przenieś poszczególne moduły, ekrany lub elementy kompozycyjne do wersji M3 – w zależności od rozmiaru i złożoności aplikacji (szczegóły znajdziesz w sekcjach poniżej).
- Po zakończeniu migracji usuń wersje M2 motywów aplikacji.
- Usuń zależność M2.
Zależności
M3 ma oddzielny pakiet i wersję M2:
M2
implementation "androidx.compose.material:material:$m2-version"
M3
implementation "androidx.compose.material3:material3:$m3-version"
Najnowsze wersje M3 znajdziesz na stronie wydań Compose Material 3.
Inne zależności materialne poza głównymi bibliotekami M2 i M3 nie uległy zmianie. Wykorzystują kombinację pakietów i wersji M2 i M3, ale nie ma to wpływu na migrację. W wersji M3 można ich używać w takiej postaci:
| Biblioteka | Pakiet i wersja |
|---|---|
| Ikony materiałów w tworzeniu wiadomości | androidx.compose.material:material-icons-*:$m2-version |
| Echo Materiału w tworzeniu wiadomości | androidx.compose.material:material-ripple:$m2-version |
| Utwórz Material 3 klasa rozmiaru okna | androidx.compose.material3:material3-window-size-class:$m3-version |
Eksperymentalne interfejsy API
Niektóre interfejsy API M3 są uznawane za eksperymentalne. W takich przypadkach musisz wyrazić zgodę na poziomie funkcji lub pliku za pomocą adnotacji ExperimentalMaterial3Api:
import androidx.compose.material3.ExperimentalMaterial3Api
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
// M3 composables
}
Motywy
Zarówno w wersji M2, jak i M3 funkcja kompozycyjna nosi nazwę MaterialTheme, ale pakiety i parametry importu różnią się:
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
}
Kolor
System kolorów w wersji M3 znacznie różni się od systemu M2. Liczba parametrów kolorów się zwiększyła, mają inne nazwy i są inaczej mapowane na komponenty M3. W interfejsie Compose dotyczy to klasy M2 Colors, klasy ColorScheme M3 i powiązanych funkcji:
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
}
Ze względu na istotne różnice między systemami kolorów M2 i M3 nie ma racjonalnego mapowania parametrów Color. Zamiast tego możesz użyć narzędzia do tworzenia motywu Material Design, aby wygenerować schemat kolorów M3. Użyj kolorów M2 jako „podstawowych” kolorów w narzędziu. Narzędzie rozwija się do palet tonalnych używanych w schemacie kolorów M3. Na początek zalecamy takie mapowania:
| M2 | Kreator motywów Material |
|---|---|
primary |
Główny |
primaryVariant |
Secondary |
secondary |
Tertiary |
surface lub background |
Nie mam zdania |
Możesz skopiować z narzędzia wartości szesnastkowe kolorów jasnych i ciemnych motywów i użyć ich do zaimplementowania instancji M3 ColorScheme. Narzędzie Material Theme Builder pozwala też wyeksportować kod narzędzia Compose.
isLight
W przeciwieństwie do klasy M2 Colors klasa ColorScheme M3 nie zawiera parametru isLight. Najlepiej modelować te dane
na poziomie motywu. Na przykład:
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
…
}
}
Więcej informacji znajdziesz w artykule Niestandardowe systemy projektowania w przewodniku tworzenia wiadomości.
Kolory dynamiczne
Nową funkcją w wersji M3 jest dynamiczny kolor. Zamiast korzystać z kolorów niestandardowych, na Androidzie 12 i nowszych urządzeniach ColorScheme M3 można użyć kolorów tapety urządzenia. Służą do tego te funkcje:
Typografia
System typografii w wersji M3 różni się od systemu M2. Liczba parametrów typograficznych jest mniej więcej taka sama, ale mają różne nazwy i inaczej mapują się na komponenty M3. W interfejsie Compose dotyczy to klasy M2 Typography i klasy M3 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
)
Na początek zalecamy takie mapowania parametrów TextStyle:
| M2 | M3 |
|---|---|
h1 |
displayLarge |
h2 |
displayMedium |
h3 |
displaySmall |
| Nie dotyczy | headlineLarge |
h4 |
headlineMedium |
h5 |
headlineSmall |
h6 |
titleLarge |
subtitle1 |
titleMedium |
subtitle2 |
titleSmall |
body1 |
bodyLarge |
body2 |
bodyMedium |
caption |
bodySmall |
button |
labelLarge |
| Nie dotyczy | labelMedium |
overline |
labelSmall |
Kształt
System kształtów w wersji M3 jest inny niż M2. Wzrosła liczba parametrów kształtu, mają inne nazwy i są mapowane inaczej na komponenty M3. W interfejsie Compose dotyczy to klasy M2 Shapes i klasy M3 Shapes:
M2
import androidx.compose.material.Shapes
val AppShapes = Shapes(
// M2 Shape parameters
)
M3
import androidx.compose.material3.Shapes
val AppShapes = Shapes(
// M3 Shape parameters
)
Na początek zalecamy takie mapowania parametrów Shape:
| M2 | M3 |
|---|---|
| Nie dotyczy | extraSmall |
small |
small |
medium |
medium |
large |
large |
| Nie dotyczy | extraLarge |
Komponenty i układy
Większość komponentów i układów z M2 jest dostępna w wersji M3. Niektórych jednak brakuje oraz nowe, których nie było w M2. Co więcej, niektóre komponenty M3 mają więcej odmian niż ich odpowiedniki w M2. Ogólnie rzecz biorąc, platformy interfejsu API M3 starają się być jak najbardziej podobne do ich najbliższych odpowiedników w wersji M2.
Ze względu na zaktualizowany system kolorów, typografii i kształtów komponenty M3 zwykle mapują się inaczej na nowe wartości motywów. Zalecamy sprawdzenie katalogu tokenów w kodzie źródłowym w Material 3 jako źródło informacji o tych mapowaniach.
Chociaż niektóre komponenty wymagają specjalnych uwag, na początek zalecamy wykonanie tych mapowań funkcji:
Brakujące interfejsy API:
| M2 | M3 |
|---|---|
androidx.compose.material.swipeable |
Jeszcze niedostępne |
Zastąpione interfejsy API:
| M2 | M3 |
|---|---|
androidx.compose.material.BackdropScaffold |
Brak odpowiednika M3 – przejdź na Scaffold lub BottomSheetScaffold |
androidx.compose.material.BottomDrawer |
Brak odpowiednika M3; przejdź na wersję ModalBottomSheet |
Zmienione nazwy interfejsów API:
Wszystkie pozostałe interfejsy API:
Zapoznaj się z najnowszymi komponentami i układami M3 w omówieniu dokumentacji interfejsu Compose Material 3 API i śledź stronę wersji nowych i zaktualizowanych interfejsów API.
Scaffold, paski powiadomień i panel nawigacji
Scaffold w wersji M3 różni się od M2. Zarówno w wersji M2, jak i M3 funkcja kompozycyjna głównego układu ma nazwę Scaffold, ale pakiety i parametry importu różnią się:
M2
import androidx.compose.material.Scaffold
Scaffold(
// M2 scaffold parameters
)
M3
import androidx.compose.material3.Scaffold
Scaffold(
// M3 scaffold parameters
)
M2 Scaffold zawiera parametr backgroundColor i w interfejsie M3 Scaffold ma teraz nazwę containerColor:
M2
import androidx.compose.material.Scaffold
Scaffold(
backgroundColor = …,
content = { … }
)
M3
import androidx.compose.material3.Scaffold
Scaffold(
containerColor = …,
content = { … }
)
Klasa M2 ScaffoldState już nie istnieje w wersji M3, ponieważ zawiera parametr drawerState, który nie jest już potrzebny. Aby wyświetlać paski powiadomień z elementem Scaffold M3, użyj parametru 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(…)
}
}
)
Wszystkie parametry drawer* z interfejsu M2 Scaffold zostały usunięte z interfejsu Scaffold M3. Należą do nich parametry takie jak drawerShape i drawerContent. Aby wyświetlić panel z elementem Scaffold M3, użyj zamiast niego panelu nawigacji, takiego jak 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()
}
}
)
}
)
Górny pasek aplikacji
Najlepsze paski aplikacji w wersji M3 różnią się od tych w wersji M2. Zarówno w wersji M2, jak i M3 główny element kompozycyjny najpopularniejszego paska aplikacji nosi nazwę TopAppBar, ale pakiety i parametry importu różnią się:
M2
import androidx.compose.material.TopAppBar
TopAppBar(…)
M3
import androidx.compose.material3.TopAppBar
TopAppBar(…)
Jeśli treść w ramach pakietu TopAppBar M2 była wcześniej wyśrodkowana, rozważ użycie wersji CenterAlignedTopAppBar M3. Warto znać też MediumTopAppBar i LargeTopAppBar.
Górne paski aplikacji M3 zawierają nowy parametr scrollBehavior zapewniający różne funkcje podczas przewijania klasy TopAppBarScrollBehavior, takie jak zmienianie wysokości. Działa to w połączeniu z przewijaniem treści w Modifer.nestedScroll. W TopAppBar M2 było to możliwe po ręcznej zmianie parametru elevation:
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 { … }
}
)
Dolna nawigacja / pasek nawigacyjny
Dolna nawigacja w wersji M2 to teraz pasek nawigacyjny w wersji M3. W wersji M2 są dostępne kompozycje BottomNavigation i BottomNavigationItem, a w M3 – kompozycje NavigationBar i 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(…)
}
Przyciski, ikony i przyciski PPP
Przyciski, ikony i pływające przyciski poleceń w wersji M3 różnią się od tych w M2. M3 zawiera wszystkie funkcje kompozycyjne przycisku M2:
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 zawiera też nowe wersje przycisków. Znajdziesz je w omówieniu interfejsu API Compose Material 3.
Przełącz
Przełączenie w wersji M3 różni się od tej w wersji M2. Zarówno w wersji M2, jak i M3 funkcja kompozycyjna przełącznika nosi nazwę Switch, ale pakiety importu różnią się od siebie:
M2
import androidx.compose.material.Switch
Switch(…)
M3
import androidx.compose.material3.Switch
Switch(…)
Powierzchnie i wysokość
Systemy powierzchni i wzniesienia w M3 są inne niż w M2. W M3 dostępne są 2 rodzaje wzniesień:
- wysokość cienia (rzuca cień, tak jak w przypadku M2)
- Wysokość w tonach (nakłada się na kolor, nowy w M3)
W sekcji Utwórz dotyczy to funkcji M2 Surface i Surface M3:
M2
import androidx.compose.material.Surface
Surface(
elevation = …
) { … }
M3
import androidx.compose.material3.Surface
Surface(
shadowElevation = …,
tonalElevation = …
) { … }
W zależności od preferencji projektu UX/UI można użyć wartości elevation Dp w M2 zarówno w przypadku elementów shadowElevation, jak i tonalElevation w wersji M3.
Surface to funkcja wsteczna, która obsługuje większość komponentów, dlatego komponenty kompozycyjne mogą też ujawniać parametry wysokości, które musisz przenieść w ten sam sposób.
Wysokość tonalna w M3 zastępuje koncepcję nakładek wysokości w ciemnych motywach M2 . Z tego powodu w wersji M3 nie ma ElevationOverlay i LocalElevationOverlay, a wersja LocalAbsoluteElevation w wersji M2 została zmieniona na LocalAbsoluteTonalElevation w wersji M3.
Wyróżnienie i treść alfa
Wyróżnienie w M3 znacznie różni się od tego w M2. W M2 trzeba użyć kolorów „włączonych” z określonymi wartościami alfa w celu rozróżniania treści, takich jak tekst i ikony. W wersji M3 dostępne są teraz 2 różne podejścia:
- Zastosowanie kolorów „włączonych” i „włączonej wersji” z rozszerzonego systemu kolorów M3.
- Używanie różnych grubości czcionek w tekście.
Z tego powodu komponenty ContentAlpha i LocalContentAlpha nie istnieją w wersji M3 i trzeba je zastąpić.
Jako punktu wyjścia zalecane są te mapowania:
| M2 | M3 |
|---|---|
onSurface z ContentAlpha.high |
onSurface ogólnie, FontWeight.Medium – FontWeight.Black (tekst) |
onSurface z ContentAlpha.medium |
onSurfaceVariant ogólnie, FontWeight.Thin – FontWeight.Normal (tekst) |
onSurface z ContentAlpha.disabled |
onSurface.copy(alpha = 0.38f) |
Oto przykład wyróżnienia ikony w wersji M2 i 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(…)
}
Oto przykład wyróżnienia tekstu na kontach M2 i 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
)
}
Tła i kontenery
Tła w wersji M2 są nazywane „kontenerami” w wersji M3. Ogólnie parametry background* w M2 można zastępować w M2 parametrami container*, używając tych samych wartości.
Na przykład:
M2
Badge(
backgroundColor = MaterialTheme.colors.primary
) { … }
M3
Badge(
containerColor = MaterialTheme.colorScheme.primary
) { … }
Współdziałanie widoków
Jeśli Twoja aplikacja obejmuje widoki danych lub interoperacyjność XML i korzysta z biblioteki adaptera motywu MDC-Android Compose, musisz użyć wersji M3:
M2
implementation "com.google.android.material:compose-theme-adapter:$compose-theme-adapter-version"
M3
implementation "com.google.android.material:compose-theme-adapter-3:$compose-theme-adapter-3-version"
Najnowsze wersje znajdziesz na stronie z informacjami o premierach adaptera motywu MDC-Android Compose.
Główna różnica między wersjami M2 i M3 to odpowiednie kompozycje MdcTheme i Mdc3Theme:
M2
import com.google.android.material.composethemeadapter.MdcTheme
MdcTheme {
// M2 content
}
M3
import com.google.android.material.composethemeadapter3.Mdc3Theme
Mdc3Theme {
// M3 content
}
Więcej informacji znajdziesz w artykule README.
Więcej informacji o migracji z materiału Material 2 do Material 3 w widokach danych znajdziesz w przewodniku po przejściu na interfejs Material Design 3.
Przydatne linki
Więcej informacji o przejściu z M2 na M3 w usłudze Compose znajdziesz w tych dodatkowych materiałach.
Dokumenty
Przykładowe aplikacje
- Przykładowa aplikacja Odpowiedz M3
- Przykładowa aplikacja Jetchat z wersji M2 do M3
- Migracja przykładowej aplikacji Jetnews z M2 do M3
- Migracja przykładowej aplikacji JetSurvey z M2 do M3
- Już w module :core-designsystem na Androidzie M3
Filmy
Dokumentacja API i kod źródłowy
- Dokumentacja interfejsu API Compose Material 3
- Tworzenie przykładowego materiału Material 3 w kodzie źródłowym
Polecane dla Ciebie
- Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony
- Material Design 2 w obszarze Utwórz
- Material Design 3 w obszarze Utwórz
- Niestandardowe systemy projektowania w usłudze Compose