Material 3 Expressive è la nuova evoluzione di Material Design. Include temi, componenti e funzionalità di personalizzazione aggiornati, come il colore dinamico.
Questa guida si concentra sulla migrazione dalla libreria Jetpack Wear Compose Material 2.5 (androidx.wear.compose) alla libreria Jetpack Wear Compose Material 3 (androidx.wear.compose.material3) per le app.
Approcci
Per eseguire la migrazione del codice dell'app da M2.5 a M3, segui lo stesso approccio descritto nella guida alla migrazione di Compose Material per smartphone, in particolare:
- Non devi utilizzare sia M2.5 che M3 in una singola app a lungo termine
- Adottare un approccio graduale
Dipendenze
M3 ha un pacchetto e una versione separati da M2.5:
M2.5
implementation("androidx.wear.compose:compose-material:1.4.0")
M3
implementation("androidx.wear.compose:compose-material3:")
Consulta le versioni più recenti di Material 3 nella pagina delle release di Wear Compose Material 3.
La libreria Wear Compose Foundation versione 1.5.0-beta01 introduce
alcuni nuovi componenti progettati per funzionare con i componenti
Material 3. Allo stesso modo, SwipeDismissableNavHost della libreria Wear Compose Navigation
ha un'animazione aggiornata quando viene eseguito su Wear OS 6 (livello API 36) o
versioni successive. Quando esegui l'aggiornamento alla versione 3 di Wear Compose Material, ti
consigliamo di aggiornare anche le librerie Wear Compose Foundation e Navigation:
implementation("androidx.wear.compose:compose-foundation:")
implementation("androidx.wear.compose:compose-navigation:")
Applicazione tema
Sia in M2.5 che in M3, il composable del tema si chiama MaterialTheme, ma i pacchetti di importazione e i parametri sono diversi. In M3, il parametro Colors è stato rinominato in ColorScheme ed è stato introdotto MotionScheme per implementare le transizioni.
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
)
Colore
Il sistema di colori in M3 è notevolmente diverso da M2.5. Il numero di parametri di colore è aumentato, hanno nomi diversi e vengono mappati in modo diverso ai componenti M3. In Compose, questo vale per la classe M2.5 Colors, la classe M3
ColorScheme e le funzioni correlate:
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
)
La seguente tabella descrive le principali differenze tra M2.5 e M3:
M2.5 |
M3 |
|---|---|
|
è stato rinominato in |
13 colori |
28 colori |
N/D |
Nuovi temi a colori dinamici |
N/D |
nuovi colori terziari per una maggiore espressività |
Temi a colori dinamici
Una nuova funzionalità di M3 è la tematizzazione dinamica dei colori. Se gli utenti cambiano i colori del quadrante, i colori della UI cambiano di conseguenza.
Utilizza la funzione dynamicColorScheme per implementare la combinazione di colori dinamica
e fornire un defaultColorScheme come fallback nel caso in cui la combinazione di colori dinamica
non sia disponibile.
@Composable
fun myApp() {
val myColorScheme = myBrandColors()
val dynamicColorScheme = dynamicColorScheme(LocalContext.current)
MaterialTheme(colorScheme = dynamicColorScheme ?: myBrandColors) {...}
}
Tipografia
Il sistema tipografico in M3 è diverso da M2 e include le seguenti funzionalità:
- Nove nuovi stili di testo
- Caratteri flessibili, che consentono di personalizzare le scale dei caratteri per diversi pesi, larghezze e rotondità
AnimatedText, che utilizza caratteri flessibili
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
)
Caratteri flessibili
I caratteri flessibili consentono ai designer di specificare la larghezza e lo spessore del tipo per dimensioni specifiche.
Stili di testo
In M3 sono disponibili i seguenti TextStyles. Questi vengono utilizzati per impostazione predefinita dai vari componenti di M3.
Tipografia |
TextStyle |
|---|---|
Visualizzazione |
displayLarge, displayMedium, displaySmall |
Titolo |
titleLarge, titleMedium, titleSmall |
Etichetta |
labelLarge, labelMedium, labelSmall |
Corpo |
bodyLarge, bodyMedium, bodySmall, bodyExtraSmall |
Numerale |
numeralExtraLarge, numeralLarge, numeralMedium, numeralSmall, numeralExtraSmall |
Arco |
arcLarge, arcMedium, arcSmall |
Forma
Il sistema di forme in M3 è diverso da M2. Il numero di parametri della forma è aumentato, hanno un nome diverso e vengono mappati in modo diverso ai componenti M3. Sono disponibili le seguenti dimensioni delle forme:
- Molto ridotta
- Piccolo
- Media
- Grande
- Molto grande
In Compose, questo vale per la classe Forme di M2 e per la classe Forme di M3:
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
)
Utilizza la mappatura dei parametri di Forme da Migrazione da Material 2 a Material 3 in Compose come punto di partenza.
Trasformazione delle forme
M3 introduce la trasformazione delle forme: ora le forme si trasformano in risposta alle interazioni.
Il comportamento di Morphing forma è disponibile come variante di diversi pulsanti rotondi, vedi di seguito:
Pulsanti |
Funzione di morphing delle forme |
|---|---|
|
IconButtonDefaults.animatedShape() anima il pulsante dell'icona quando viene premuto |
|
IconToggleButtonDefaults.animatedShape() anima il pulsante di attivazione/disattivazione dell'icona alla pressione e IconToggleButtonDefaults.variantAnimatedShapes() anima il pulsante di attivazione/disattivazione dell'icona quando viene premuto e selezionato/deselezionato |
|
TextButtonDefaults.animatedShape() anima il pulsante di testo quando viene premuto |
|
TextToggleButtonDefaults.animatedShapes() anima l'opzione di attivazione/disattivazione del testo alla pressione e TextToggleButtonDefaults.variantAnimatedShapes() anima l'opzione di attivazione/disattivazione del testo alla pressione e alla selezione/deselezione |
Componenti e layout
La maggior parte dei componenti e dei layout di M2.5 è disponibile in M3. Tuttavia, alcuni componenti e layout di M3 non esistevano in M2.5. Inoltre, alcuni componenti M3 hanno più varianti rispetto ai loro equivalenti in M2.5.
Sebbene alcuni componenti richiedano considerazioni speciali, i seguenti mapping delle funzioni sono consigliati come punto di partenza:
Ecco un elenco completo di tutti i componenti di Material 3:
Material 3 |
Componente equivalente di Material 2.5 (se non nuovo in M3) |
|---|---|
Novità |
|
Novità |
|
android.wear.compose.material.Scaffold (con androidx.wear.compose.material3.ScreenScaffold) |
|
Novità |
|
androidx.wear.compose.material.ToggleChip con un controllo di attivazione/disattivazione della casella di controllo |
|
androidx.wear.compose.material.Chip (solo quando non è richiesto uno sfondo) |
|
Novità |
|
Novità |
|
Novità |
|
androidx.wear.compose.material.Chip quando è richiesto uno sfondo del pulsante tonale |
|
Novità |
|
Novità |
|
Novità |
|
Novità |
|
Novità |
|
androidx.wear.compose.material.ToggleChip con un controllo di attivazione/disattivazione del pulsante di opzione |
|
android.wear.compose.material.Scaffold (con androidx.wear.compose material3.AppScaffold) |
|
androidx.wear.compose.material3.SegmentedCircularProgressIndicator |
Novità |
androidx.wear.compose.material.SwipeToRevealCard e androidx.wear.compose.material.SwipeToRevealChip |
|
androidx.wear.compose.material.ToggleChip con un controllo di attivazione/disattivazione |
|
Novità |
Infine, un elenco di alcuni componenti pertinenti della libreria Wear Compose Foundation versione 1.5.0-beta01:
Wear Compose Foundation 1.5.0-beta |
|
|---|---|
Utilizzato per annotare i composable in un'applicazione, per tenere traccia della parte attiva della composizione e coordinare lo stato attivo. |
|
Un pager a scorrimento orizzontale, basato sui componenti di Compose Foundation con miglioramenti specifici per Wear per migliorare le prestazioni e il rispetto delle linee guida di Wear OS. |
|
Un pager a scorrimento verticale, basato sui componenti di Compose Foundation con miglioramenti specifici per Wear per migliorare le prestazioni e il rispetto delle linee guida di Wear OS. |
|
Può essere utilizzato al posto di ScalingLazyColumn per aggiungere effetti di trasformazione dello scorrimento a ogni elemento. |
|
Pulsanti
I pulsanti in M3 sono diversi da quelli di M2.5. Il chip M2.5 è stato sostituito dal
pulsante. L'implementazione di Button fornisce valori predefiniti per Text,
maxLines e textAlign. Questi valori predefiniti possono essere sostituiti nell'elemento Text.
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 include anche nuove varianti di pulsanti. Dai un'occhiata alla panoramica del riferimento API Compose Material 3.
M3 introduce un nuovo pulsante: EdgeButton. EdgeButton è disponibile in 4
taglie diverse: XS, S, M e L. L'implementazione di EdgeButton
fornisce un valore predefinito per maxLines a seconda delle dimensioni, che può essere personalizzato.
Se utilizzi TransformingLazyColumn e ScalingLazyColumn,
trasferisci EdgeButton in ScreenScaffold in modo che si trasformi, cambiando la sua
forma con lo scorrimento. Consulta il codice riportato di seguito per scoprire come utilizzare EdgeButton con
ScreenScaffold e TransformingLazyColumn.
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
}
}
Scaffold
Lo scaffold in M3 è diverso da M2.5. In M3, AppScaffold e il nuovo
ScreenScaffold componibile hanno sostituito Scaffold. AppScaffold e
ScreenScaffold definiscono la struttura di una schermata e coordinano le transizioni dei componenti
ScrollIndicator e TimeText.
AppScaffold consente agli elementi statici dello schermo, come TimeText, di rimanere visibili
durante le transizioni in-app, ad esempio lo scorrimento per chiudere. Fornisce uno spazio per i
contenuti dell'applicazione principale, che di solito vengono forniti da un componente di navigazione
come SwipeDismissableNavHost
Dichiari un AppScaffold per l'attività e utilizzi un ScreenScaffold per ogni
schermata.
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
}
}
Se utilizzi un HorizontalPager con HorizontalPagerIndicator, puoi eseguire la migrazione a HorizontalPagerScaffold. HorizontalPagerScaffold viene inserito
all'interno di un AppScaffold. AppScaffold e HorizontalPagerScaffold definiscono la
struttura di un pager e coordinano le transizioni dei componenti HorizontalPageIndicator
e TimeText.
HorizontalPagerScaffold mostra HorizontalPageIndicator al centro dello schermo per impostazione predefinita e coordina la visualizzazione/l'occultamento di TimeText e HorizontalPageIndicator a seconda che Pager venga paginato, il che è determinato da PagerState.
È disponibile anche un nuovo componente AnimatedPage, che anima una pagina all'interno di un
Pager con un effetto di ridimensionamento e velatura in base alla sua posizione.
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 {
…
}
}
Infine, M3 introduce un VerticalPagerScaffold che segue lo stesso
pattern di HorizontalPagerScaffold:
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 {
…
}
}
Segnaposto
Sono state apportate alcune modifiche all'API tra M2.5 e M3. Placeholder.PlaceholderDefaults
ora fornisce due modificatori:
Modifier.placeholder, che viene disegnato al posto dei contenuti non ancora caricati- Un effetto luccichio segnaposto
Modifier.placeholderShimmerche fornisce un effetto luccichio segnaposto che viene eseguito in un ciclo di animazione durante l'attesa del caricamento dei dati.
Di seguito sono riportate ulteriori modifiche al componente Placeholder.
M2.5 |
M3 |
|---|---|
|
È stato rimosso. |
|
È stato rimosso. |
|
È stato rinominato in |
|
È stato rimosso. |
|
è stato rimosso |
|
È stato rimosso. |
|
È stato rimosso. |
SwipeDismissableNavHost
SwipeDismissableNavHost fa parte di wear.compose.navigation. Quando questo componente viene utilizzato con M3, MaterialTheme M3 aggiorna LocalSwipeToDismissBackgroundScrimColor e LocalSwipeToDismissContentScrimColor.
TransformingLazyColumn
TransformingLazyColumn fa parte di wear.compose.lazy.foundation e aggiunge
il supporto per l'animazione di ridimensionamento e morphing degli elementi di elenco durante lo scorrimento,
migliorando l'esperienza utente.
Analogamente a ScalingLazyColumn, fornisce
rememberTransformingLazyColumnState() per creare un
TransformingLazyColumnState che viene ricordato in tutte le composizioni.
Per aggiungere animazioni di scalabilità e morphing, aggiungi quanto segue a ogni elemento dell'elenco:
Modifier.transformedHeight, che ti consente di calcolare l'altezza trasformata degli elementi utilizzando unTransformationSpec, puoi utilizzarerememberTransformationSpec(), a meno che tu non abbia bisogno di ulteriore personalizzazione.- Un
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")
}
}
}
}
}
Link utili
Per scoprire di più sulla migrazione da M2.5 a M3 in Compose, consulta le seguenti risorse aggiuntive.