Material 3 Expressive — это следующая эволюция Material Design. Он включает обновленные темы, компоненты и функции персонализации, такие как динамический цвет.

В этом руководстве основное внимание уделяется переходу с библиотеки Wear Compose Material 2.5 (androidx.wear.compose) Jetpack на библиотеку Wear Compose Material 3 (androidx.wear.compose.material3) Jetpack для приложений.

Подходы

Для переноса кода приложения с M2.5 на M3 следуйте тому же подходу, который описан в руководстве по переносу Compose Material на телефон , в частности:

• Не следует использовать M2.5 и M3 в одном приложении в течение длительного времени.
• Принять поэтапный подход

Зависимости

M3 имеет отдельный пакет и версию для M2.5:

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

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

Последние версии M3 смотрите на странице релизов Wear Compose Material 3 .

Версия библиотеки Wear Compose Foundation 1.5.0-beta01 представляет несколько новых компонентов, которые предназначены для работы с компонентами Material 3. Аналогично, SwipeDismissableNavHost из библиотеки Wear Compose Navigation имеет обновленную анимацию при работе на Wear OS 6 (уровень API 36) или выше. При обновлении до версии Wear Compose Material 3 мы также рекомендуем обновить библиотеки Wear Compose Foundation и Navigation:

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

Тематика

В M2.5 и M3 тема компонуется под названием MaterialTheme , но пакеты импорта и параметры различаются. В M3 параметр Colors был переименован в ColorScheme , а 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
)

Цвет

Цветовая система в M3 существенно отличается от M2.5. Количество цветовых параметров увеличилось, они имеют другие названия и по-разному сопоставляются с компонентами M3. В Compose это относится к классу M2.5 Colors , классу M3 ColorScheme и связанным функциям:

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
)

В следующей таблице описаны основные различия между M2.5 и M3:

Динамическая цветовая тематика

Новая функция в M3 — динамическая цветовая тема . Если пользователи меняют цвета циферблата, цвета в пользовательском интерфейсе меняются в соответствии с ними.

Используйте функцию dynamicColorScheme для реализации динамической цветовой схемы и предоставления defaultColorScheme в качестве запасного варианта на случай, если динамическая цветовая схема недоступна.

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

Типографика

Система типографики в M3 отличается от M2 и включает в себя следующие особенности:

• Девять новых стилей текста
• Flex-шрифты, позволяющие настраивать масштаб шрифта для различной толщины, ширины и округлости.

• AnimatedText , который использует гибкие шрифты

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-шрифты

Flex Fonts позволяют дизайнерам указывать ширину и насыщенность шрифта для определенных размеров.

Текстовые стили

В M3 доступны следующие стили текста . Они используются по умолчанию различными компонентами M3.

Форма

Система форм в M3 отличается от M2. Количество параметров форм увеличилось, они называются по-другому и по-другому отображаются в компонентах M3. Доступны следующие размеры форм:

• Очень маленький
• Маленький
• Середина
• Большой
• Очень большой

В Compose это применяется к классу M2 Shapes и классу M3 Shapes :

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
)

В качестве отправной точки используйте сопоставление параметров Shapes из Migrate from Material 2 to Material 3 в Compose .

Изменение формы

M3 представляет функцию изменения формы: формы теперь меняются в ответ на взаимодействия.

Поведение Shape Morphing доступно в виде вариации для ряда круглых кнопок, см. ниже:

Компоненты и компоновка

Большинство компонентов и макетов из M2.5 доступны в M3. Однако некоторые компоненты и макеты M3 не существовали в M2.5. Более того, некоторые компоненты M3 имеют больше вариаций, чем их эквиваленты в M2.5.

Хотя некоторые компоненты требуют особого внимания, в качестве отправной точки рекомендуются следующие сопоставления функций:

Вот полный список всех компонентов Material 3:

И, наконец, список некоторых важных компонентов из библиотеки Wear Compose Foundation версии 1.5.0-beta01:

Кнопки

Кнопки в M3 отличаются от M2.5. Чип M2.5 был заменен на Button. Реализация Button предоставляет значения по умолчанию для Text maxLines и textAlign . Эти значения по умолчанию можно переопределить в элементе 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 также включает новые варианты кнопок. Ознакомьтесь с ними в обзоре справки API Compose Material 3 .

M3 представляет новую кнопку: EdgeButton . EdgeButton доступен в 4 различных размерах: очень маленький, маленький, средний и большой. Реализация EdgeButton предоставляет значение по умолчанию для maxLines в зависимости от размера, который можно настроить.

Если вы используете TransformingLazyColumn и ScalingLazyColumn , передайте EdgeButton в ScreenScaffold , чтобы он трансформировался, изменяя свою форму при прокрутке. Посмотрите код ниже, чтобы проверить, как использовать EdgeButton с ScreenScaffold и 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 в M3 отличается от M2.5. В M3 AppScaffold и новый компонуемый ScreenScaffold заменили Scaffold. AppScaffold и ScreenScaffold выкладывают структуру экрана и координируют переходы компонентов ScrollIndicator и TimeText .

AppScaffold позволяет статическим элементам экрана, таким как TimeText , оставаться видимыми во время переходов внутри приложения, таких как смахивание для закрытия. Он предоставляет слот для основного содержимого приложения, которое обычно предоставляется компонентом навигации, таким как SwipeDismissableNavHost

Вы объявляете один AppScaffold для Activity и используете ScreenScaffold для каждого экрана.

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

Если вы используете HorizontalPager с HorizontalPagerIndicator , вы можете перейти на HorizontalPagerScaffold . HorizontalPagerScaffold размещается внутри AppScaffold . AppScaffold и HorizontalPagerScaffold размещают структуру Pager и координируют переходы компонентов HorizontalPageIndicator и TimeText .

HorizontalPagerScaffold отображает HorizontalPageIndicator в центре экрана по умолчанию и координирует отображение/скрытие TimeText и HorizontalPageIndicator в зависимости от того, просматривается ли Pager , это определяется PagerState .

Также появился новый компонент AnimatedPage , который анимирует страницу в Pager с эффектом масштабирования и сетки в зависимости от ее положения.

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

Наконец, M3 представляет VerticalPagerScaffold , который следует тому же шаблону, что и 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 {
        …
   }
}

Заполнитель

Есть некоторые изменения API между M2.5 и M3. Placeholder.PlaceholderDefaults теперь предоставляет два модификатора:

• Modifier.placeholder , который рисуется вместо содержимого, которое еще не загружено
• Эффект мерцания заполнителя Modifier.placeholderShimmer , который обеспечивает эффект мерцания заполнителя, который выполняется в цикле анимации во время ожидания загрузки данных.

Дополнительные изменения в компоненте Placeholder см. ниже.

SwipeDismissableNavHost

SwipeDismissableNavHost является частью wear.compose.navigation . Когда этот компонент используется с M3, M3 MaterialTheme обновляет LocalSwipeToDismissBackgroundScrimColor и LocalSwipeToDismissContentScrimColor .

TransformingLazyColumn

TransformingLazyColumn является частью wear.compose.lazy.foundation и добавляет поддержку масштабирования и анимации морфинга элементов списка во время прокрутки, улучшая пользовательский опыт.

Подобно ScalingLazyColumn , он предоставляет rememberTransformingLazyColumnState() для создания TransformingLazyColumnState , который запоминается между композициями.

Для добавления анимаций масштабирования и морфинга добавьте следующее к каждому элементу списка:

• Modifier.transformedHeight , который позволяет вычислять преобразованную высоту элементов с помощью TransformationSpec , вы можете использовать rememberTransformationSpec() если вам не требуется дополнительная настройка.
• 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")
                    }
                }
            }
        }
    }

Полезные ссылки

Чтобы узнать больше о переходе с M2.5 на M3 в Compose, ознакомьтесь со следующими дополнительными ресурсами.

Образцы

Образцы Wear OS в ветке Material3 на GitHub

Лабораторная работа по созданию кода Compose для Wear OS

Справочник API и исходный код

• Ссылка на API Compose Material 3
• Образцы Compose Material 3 в исходном коде

Дизайн

• Руководство по проектированию