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:1.5.0-beta05")
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 eseguita 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:1.5.0-beta05")
implementation("androidx.wear.compose:compose-navigation:1.5.0-beta05")
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 M2 Forme e la classe M3 Forme:
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.
Morphing delle forme
M3 introduce la deformazione delle forme: ora le forme si deformano in risposta alle interazioni.
Il comportamento di Morphing delle forme è 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 quando viene premuto 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 è necessario 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 componenti combinabili 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 in 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 dei riferimenti dell'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
L'impalcatura in M3 è diversa da quella in 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
Dichiara un AppScaffold per l'attività e utilizza 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, ciò è 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.
Continua a leggere per 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, M3 MaterialTheme 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 ridimensionamento 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.