Material 3 Expressive to kolejna wersja Material Design. Obejmuje ona zaktualizowane motywy, komponenty i funkcje personalizacji, takie jak dynamiczny kolor.

Ten przewodnik dotyczy migracji z biblioteki Jetpack Wear Compose Material 2.5 (androidx.wear.compose) na Wear Compose Material 3 (androidx.wear.compose.material3) na potrzeby aplikacji.

Podejścia

Aby przenieść kod aplikacji z poziomu M2.5 na M3, postępuj zgodnie z instrukcjami opisanymi w artykule Compose Material – wskazówki dotyczące migracji na telefony, w szczególności:

• Nie należy długotrwale używać w tej samej aplikacji zarówno wersji M2.5, jak i M3.
• Stosuj podejście etapowe.

Zależności

M3 ma oddzielny pakiet i wersję w porównaniu z M2.5:

implementation("androidx.wear.compose:compose-material:1.4.0")

implementation("androidx.wear.compose:compose-material3:1.5.0-beta01")

Najnowsze wersje M3 znajdziesz na stronie z wersjami Wear Compose Material 3.

Wersja 1.5.0-beta01 biblioteki Compose Foundation na Wear OS wprowadza kilka nowych komponentów zaprojektowanych do współpracy z komponentami Material 3. Podobnie element SwipeDismissableNavHost z biblioteki Wear Compose Navigation ma zaktualizowaną animację, gdy jest uruchamiany na Wear OS 6 (poziom interfejsu API 36) lub nowszym. Podczas aktualizacji do wersji Material 3 na Wear Compose zalecamy też zaktualizowanie bibliotek Wear Compose Foundation i Navigation:

implementation("androidx.wear.compose:compose-foundation:1.5.0-beta01")
implementation("androidx.wear.compose:compose-navigation:1.5.0-beta01")

Motywy

Zarówno w wersji M2.5, jak i M3 kompozyt tematyczny ma nazwę MaterialTheme, ale pakiety importowania i parametry różnią się. W M3 parametr Colors został przemianowany na ColorScheme, a do implementacji przejść został wprowadzony parametr MotionScheme.

import androidx.wear.compose.material.MaterialTheme

MaterialTheme(
        colors = AppColors,
        typography = AppTypography,
        shapes = AppShapes,
        content = content
)

import androidx.wear.compose.material3.MaterialTheme

MaterialTheme(
        colorScheme = AppColorScheme,
        typography = AppTypography,
        shapes = AppShapes,
        motionScheme = AppMotionScheme,
        content = content
)

Kolor

System kolorów w M3 różni się znacznie od M2.5. Liczba parametrów kolorów wzrosła, mają one różne nazwy i różnie mapowania do komponentów M3. W edytorze dotyczy to klasy M2.5 Colors, klasy M3 ColorScheme i powiązanych funkcji:

import androidx.wear.compose.material.Colors

val appColorScheme: Colors = Colors(
   // M2.5 Color parameters
)

import androidx.wear.compose.material3.ColorScheme

val appColorScheme: ColorScheme = ColorScheme(
   // M3 ColorScheme parameters
)

W tej tabeli opisano główne różnice między wersjami M2.5 i M3:

Dynamiczne motywy kolorystyczne

Nowością w M3 jest dynamiczne motywy kolorystyczne. Jeśli użytkownicy zmienią kolory tarczy zegarka, kolory w interfejsie zostaną dopasowane.

Aby zaimplementować dynamiczny schemat kolorów, użyj funkcji dynamicColorScheme i podaj wartość defaultColorScheme jako wartość zastępczą na wypadek, gdyby dynamiczny schemat kolorów był niedostępny.

@Composable
fun myApp() {
  val myColorScheme = myBrandColors()
  val dynamicColorScheme = dynamicColorScheme(LocalContext.current)
  MaterialTheme(colorScheme = dynamicColorScheme ?: myBrandColors) {...}
}

Typografia

System typograficzny w M3 różni się od tego w M2 i obsługuje te funkcje:

• 9 nowych stylów tekstu
• czcionki elastyczne, które umożliwiają dostosowywanie skali czcionki do różnych grubości, szerokości i kształtów zaokrągleń;

• AnimatedText, który używa czcionek elastycznych

import androidx.wear.compose.material.Typography

val Typography = Typography(
   // M2.5 TextStyle parameters
)

import androidx.wear.compose.material3.Typography

val Typography = Typography(
   // M3 TextStyle parameters
)

Flex Fonts

Czcionki elastyczne umożliwiają projektantom określanie szerokości i grubości czcionki w przypadku konkretnych rozmiarów.

Style tekstu

W M3 dostępne są te style tekstu: Są one domyślnie używane przez różne komponenty M3.

Kształt

System kształtów w M3 różni się od tego w M2. Zwiększono liczbę parametrów kształtu, zmieniono ich nazwy i sposób mapowania na komponenty M3. Dostępne są te rozmiary kształtów:

• Bardzo mały
• Mały
• średni,
• Duży
• Bardzo duży

W Compose dotyczy to klasy Shapes (M2) i klasy Shapes (M3):

import androidx.wear.compose.material.Shapes

val Shapes = Shapes(
   // M2.5 Shapes parameters
)

import androidx.wear.compose.material3.Shapes

val Shapes = Shapes(
   // M3 Shapes parameters
)

Jako punkt wyjścia użyj mapowania parametrów kształtów z artykułu Przejście z Material 2 na Material 3 w Compose.

Przekształcanie kształtu

M3 wprowadza przekształcanie kształtów: kształty zmieniają się w reakcji na interakcje.

Funkcja przekształcania kształtu jest dostępna jako wariant dla wielu okrągłych przycisków. Poniżej znajdziesz przykłady:

Komponenty i układ

Większość komponentów i schematów z wersji M2.5 jest dostępna w wersji M3. Niektóre komponenty i układy M3 nie były jednak dostępne w wersji M2.5. Co więcej, niektóre komponenty M3 mają więcej odmian niż ich odpowiedniki w M2.5.

Chociaż niektóre komponenty wymagają szczególnej uwagi, jako punkt wyjścia zalecamy użycie tych map funkcji:

Oto pełna lista wszystkich komponentów Material 3:

Na koniec lista niektórych odpowiednich komponentów z biblioteki Compose Foundation dla Wear w wersji 1.5.0-beta01:

Przyciski

Przyciski w M3 różnią się od tych w M2.5. Element M2.5 Chip został zastąpiony przez przycisk. Implementacja Button udostępnia wartości domyślne dla Text, maxLines i textAlign. Te wartości domyślne można zastąpić w elemencie Text.

import androidx.wear.compose.material.Chip

//M2.5 Buttons
Chip(...)
CompactChip(...)
Button(...)

import androidx.wear.compose.material3.Button

//M3 Buttons
Button(...)
CompactButton(...)
IconButton(...)
TextButton(...)

M3 zawiera też nowe warianty przycisków. Znajdziesz je w omówieniu interfejsu API Compose Material 3.

W M3 wprowadzono nowy przycisk: EdgeButton. EdgeButton jest dostępny w 4 różnych rozmiarach: bardzo mały, mały, średni i duży. Implementacja EdgeButton udostępnia domyślną wartość dla maxLines w zależności od rozmiaru, który można dostosować.

Jeśli używasz elementów TransformingLazyColumn i ScalingLazyColumn, prześlij element EdgeButton do elementu ScreenScaffold, aby mógł się przekształcać i zmieniać kształt podczas przewijania. W poniższym kodzie możesz sprawdzić, jak używać funkcji EdgeButton w połączeniu z funkcjami ScreenScaffold i 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
   }
}

Rusztowanie

Szkielet w M3 różni się od tego w M2.5. W M3 moduł AppScaffold i nowy moduł ScreenScaffold zastąpiły moduł Scaffold. AppScaffold i ScreenScaffold określają strukturę ekranu oraz koordynują przejścia między komponentami ScrollIndicator i TimeText.

AppScaffold pozwala zachować widoczność statycznych elementów ekranu, takich jak TimeText, podczas przejść w aplikacji, np. podczas przesuwania w bok, aby zamknąć. ​​Oferuje on slot na główną treść aplikacji, która jest zwykle dostarczana przez element nawigacji, taki jak SwipeDismissableNavHost

Deklarujesz 1 element AppScaffold dla aktywności i używasz ScreenScaffold dla każdego ekranu.

import androidx.wear.compose.material.Scaffold

Scaffold {...}

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

Jeśli używasz HorizontalPager z HorizontalPagerIndicator, możesz przejść na HorizontalPagerScaffold. HorizontalPagerScaffold jest umieszczony w AppScaffold. AppScaffold i HorizontalPagerScaffold określają strukturę strony Pager, a także koordynują przejścia między komponentami HorizontalPageIndicator i TimeText.

HorizontalPagerScaffold domyślnie wyświetla HorizontalPageIndicator na środku ekranu oraz koordynuje wyświetlanie/ukrywanie TimeText i HorizontalPageIndicator w zależności od tego, czy Pager jest przewijany. Jest to określane przez PagerState.

Dostępny jest też nowy komponent AnimatedPage, który animuje stronę w przeglądarce z efektem skalowania i zaciemnienia zależnego od jej położenia.

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

W M3 wprowadzamy też VerticalPagerScaffold, który działa według tego samego wzorca co 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 {
        …
   }
}

Obiekt zastępczy

Między wersjami M2.5 a M3 wprowadzono pewne zmiany w interfejsie API. Placeholder.PlaceholderDefaults obsługuje teraz 2 modyfikatory:

• Modifier.placeholder, który jest wyświetlany zamiast treści, które nie zostały jeszcze załadowane.
• Efekt migotania zastępczego Modifier.placeholderShimmer, który zapewnia efekt migotania zastępczego, który działa w pętli animacji podczas oczekiwania na załadowanie danych.

Poniżej znajdziesz dodatkowe informacje o komponencie Placeholder.

SwipeDismissableNavHost

SwipeDismissableNavHost należy do wear.compose.navigation. Gdy ten komponent jest używany z M3, motyw MaterialTheme M3 aktualizuje elementy LocalSwipeToDismissBackgroundScrimColor i LocalSwipeToDismissContentScrimColor.

TransformingLazyColumn

TransformingLazyColumn jest częścią wear.compose.lazy.foundation i dodaje obsługę animacji skalowania i przekształcania elementów listy podczas przewijania, co zwiększa wygodę użytkowników.

Podobnie jak w przypadku ScalingLazyColumn, umożliwia ona rememberTransformingLazyColumnState() tworzenie TransformingLazyColumnState, które jest zapamiętywane w różnych kompozycjach.

Aby dodać animacje skalowania i przekształcania, dodaj do każdego elementu listy te elementy:

• Modifier.transformedHeight, która umożliwia obliczenie przekształconej wysokości elementów za pomocą funkcji TransformationSpec. Możesz użyć funkcji rememberTransformationSpec(), chyba że potrzebujesz dalszej personalizacji.
• 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")
                    }
                }
            }
        }
    }

Przydatne linki

Więcej informacji o przechodzeniu z wersji M2.5 na M3 w Compose znajdziesz w tych dodatkowych materiałach.

Próbki

Przykłady kodu Wear OS w gałęzi Material3 na GitHubie

Tworzenie aplikacji na Wear OS – ćwiczenie z Codelab

Dokumentacja i kod źródłowy interfejsu API

• Dokumentacja API Compose Material 3
• Tworzenie przykładów Material 3 w kodzie źródłowym

Projektowanie

• Wskazówki dotyczące projektowania