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:
М2.5
implementation("androidx.wear.compose:compose-material:1.4.0")
М3
implementation("androidx.wear.compose:compose-material3:1.5.0-beta05")
Последние версии 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-beta05")
implementation("androidx.wear.compose:compose-navigation:1.5.0-beta05")
Тематика
В M2.5 и M3 компонуемая тема называется MaterialTheme , но пакеты импорта и параметры различаются. В M3 параметр Colors переименован в ColorScheme , а для реализации переходов добавлен MotionScheme .
М2.5
import androidx.wear.compose.material.MaterialTheme
MaterialTheme(
colors = AppColors,
typography = AppTypography,
shapes = AppShapes,
content = content
)
М3
import androidx.wear.compose.material3.MaterialTheme
MaterialTheme(
colorScheme = AppColorScheme,
typography = AppTypography,
shapes = AppShapes,
motionScheme = AppMotionScheme,
content = content
)
Цвет
Цветовая система в M3 существенно отличается от M2.5. Количество цветовых параметров увеличилось, они получили другие названия и по-другому сопоставляются с компонентами M3. В Compose это относится к классу Colors в M2.5, классу ColorScheme в M3 и связанным с ними функциям:
М2.5
import androidx.wear.compose.material.Colors
val appColorScheme: Colors = Colors(
// M2.5 Color parameters
)
М3
import androidx.wear.compose.material3.ColorScheme
val appColorScheme: ColorScheme = ColorScheme(
// M3 ColorScheme parameters
)
В следующей таблице описаны основные различия между M2.5 и M3:
М2.5 | М3 |
|---|---|
| переименован в |
13 цветов | 28 цветов |
Н/Д | новая динамическая цветовая тема |
Н/Д | новые третичные цвета для большей выразительности |
Динамическая цветовая тематика
Новая функция M3 — динамическая цветовая тема . При изменении цвета циферблата цвета пользовательского интерфейса также меняются.
Используйте функцию dynamicColorScheme для реализации динамической цветовой схемы и предоставьте defaultColorScheme в качестве запасного варианта на случай, если динамическая цветовая схема недоступна.
@Composable
fun myApp() {
val myColorScheme = myBrandColors()
val dynamicColorScheme = dynamicColorScheme(LocalContext.current)
MaterialTheme(colorScheme = dynamicColorScheme ?: myBrandColors) {...}
}
Типографика
Система типографики в M3 отличается от M2 и включает в себя следующие особенности:
- Девять новых стилей текста
- Flex-шрифты, позволяющие настраивать масштаб шрифта для разных толщин, ширины и округлости.
AnimatedText, который использует гибкие шрифты
М2.5
import androidx.wear.compose.material.Typography
val Typography = Typography(
// M2.5 TextStyle parameters
)
М3
import androidx.wear.compose.material3.Typography
val Typography = Typography(
// M3 TextStyle parameters
)
Flex-шрифты
Flex Fonts позволяет дизайнерам задавать ширину и насыщенность шрифта для определенных размеров.
Стили текста
В M3 доступны следующие стили текста . Они используются по умолчанию различными компонентами M3.
Типографика | TextStyle |
|---|---|
Отображать | displayLarge, displayMedium, displaySmall |
Заголовок | titleLarge, titleMedium, titleSmall |
Этикетка | labelLarge, labelMedium, labelSmall |
Тело | bodyLarge, bodyMedium, bodySmall, bodyExtraSmall |
Цифра | цифраОчень большая, цифраБольшая, цифраСредняя, цифраМаленькая, цифраОчень маленькая |
Дуга | arcLarge, arcMedium, arcSmall |
Форма
Система фигур в M3 отличается от M2. Количество параметров фигур увеличилось, они получили другие названия и по-другому соотносятся с компонентами M3. Доступны следующие размеры фигур:
- Очень маленький
- Маленький
- Середина
- Большой
- Очень большой
В Compose это применяется к классу M2 Shapes и классу M3 Shapes :
М2.5
import androidx.wear.compose.material.Shapes
val Shapes = Shapes(
// M2.5 Shapes parameters
)
М3
import androidx.wear.compose.material3.Shapes
val Shapes = Shapes(
// M3 Shapes parameters
)
В качестве отправной точки используйте сопоставление параметров «Формы» из раздела «Миграция из материала 2 в материал 3» в Compose .
Изменение формы
M3 представляет функцию Shape Morphing: теперь формы меняются в ответ на взаимодействия.
Поведение Shape Morphing доступно в виде вариации для ряда круглых кнопок, см. ниже:
Кнопки | Функция изменения формы |
|---|---|
| IconButtonDefaults.animatedShape() анимирует кнопку со значком при нажатии |
| IconToggleButtonDefaults.animatedShape() анимирует кнопку переключения значка при нажатии и IconToggleButtonDefaults.variantAnimatedShapes() анимирует кнопку переключения значка при нажатии и установке/снятии отметки. |
| TextButtonDefaults.animatedShape() анимирует текстовую кнопку при нажатии |
| TextToggleButtonDefaults.animatedShapes() анимирует переключение текста при нажатии, а TextToggleButtonDefaults.variantAnimatedShapes() анимирует переключение текста при нажатии и установке/снятии отметки. |
Компоненты и компоновка
Большинство компонентов и макетов из M2.5 доступны в M3. Однако некоторые компоненты и макеты M3 отсутствовали в M2.5. Более того, некоторые компоненты M3 имеют больше вариаций, чем их аналоги в M2.5.
Хотя некоторые компоненты требуют особого внимания, в качестве отправной точки рекомендуется использовать следующие сопоставления функций:
Вот полный список всех компонентов Material 3:
Материал 3 | Материал 2,5 эквивалентный компонент (если не новый в М3) |
|---|---|
Новый | |
Новый | |
android.wear.compose.material.Scaffold (с androidx.wear.compose.material3.ScreenScaffold ) | |
Новый | |
androidx.wear.compose.material.ToggleChip с переключателем-флажком | |
androidx.wear.compose.material.Chip (только когда фон не требуется) | |
Новый | |
Новый | |
Новый | |
androidx.wear.compose.material.Chip , когда требуется тональный фон кнопки | |
Новый | |
Новый | |
Новый | |
Новый | |
Новый | |
androidx.wear.compose.material.ToggleChip с переключателем-переключателем | |
android.wear.compose.material.Scaffold (с androidx.wear.compose material3.AppScaffold ) | |
androidx.wear.compose.material3.SegmentedCircularProgressIndicator | Новый |
androidx.wear.compose.material.SwipeToRevealCard и androidx.wear.compose.material.SwipeToRevealChip | |
androidx.wear.compose.material.ToggleChip с переключателем управления | |
Новый |
И, наконец, список некоторых важных компонентов из библиотеки Wear Compose Foundation версии 1.5.0-beta01:
Wear Compose Foundation 1.5.0-бета | |
|---|---|
Используется для аннотирования компонуемых элементов в приложении, отслеживания активной части композиции и координации фокуса. | |
Горизонтально прокручиваемый пейджер, созданный на основе компонентов Compose Foundation с усовершенствованиями, специфичными для Wear, для повышения производительности и соответствия рекомендациям Wear OS. | |
Вертикально прокручиваемый пейджер, созданный на основе компонентов Compose Foundation с усовершенствованиями, специфичными для Wear, для повышения производительности и соответствия рекомендациям Wear OS. | |
Может использоваться вместо ScalingLazyColumn для добавления эффектов преобразования прокрутки к каждому элементу. | |
Кнопки
Кнопки в M3 отличаются от M2.5. Чип M2.5 был заменён на Button. Реализация Button предоставляет значения по умолчанию для Text maxLines и textAlign . Эти значения по умолчанию можно переопределить в элементе Text .
М2.5
import androidx.wear.compose.material.Chip
//M2.5 Buttons
Chip(...)
CompactChip(...)
Button(...)
М3
import androidx.wear.compose.material3.Button
//M3 Buttons
Button(...)
CompactButton(...)
IconButton(...)
TextButton(...)
M3 также включает новые варианты кнопок. Ознакомьтесь с ними в справочном обзоре API Compose Material 3 .
M3 представляет новую кнопку: EdgeButton . EdgeButton доступен в четырёх размерах: очень маленький, маленький, средний и большой. Реализация 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 вместо Scaffold были использованы AppScaffold и новый компонуемый компонент ScreenScaffold . AppScaffold и ScreenScaffold определяют структуру экрана и координируют переходы компонентов ScrollIndicator и TimeText .
AppScaffold позволяет статическим элементам экрана, таким как TimeText , оставаться видимыми во время переходов внутри приложения, например, при смахивании для закрытия. Он предоставляет слот для основного содержимого приложения, которое обычно предоставляется компонентом навигации, таким как SwipeDismissableNavHost
Вы объявляете один AppScaffold для Activity и используете ScreenScaffold для каждого экрана.
М2.5
import androidx.wear.compose.material.Scaffold
Scaffold {...}
М3
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 см. ниже.
М2.5 | М3 |
|---|---|
| Был удален |
| Был удален |
| Переименован в |
| Был удален |
| был удален |
| Был удален |
| Был удален |
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
- Образец Jetcaster