🐗 M3 Expressive

Мой проектик для изучения всего нового переполз на экспрессивный дизайн. Обновил все что можно. Стабилизации версий библиотек ждать не стал. Сейчас экспрессия поддерживается и в мультиплатформе. Пора основательно разобраться, что в гугле понимают под выразительным интерфейсом.

Добавили альтернативный entry-point для управления темой – MaterialExpressiveTheme. А также expressiveLightColorScheme на замену lightColorScheme. Симметричной функции-шортката для темной темы нет – собирай и кастомизируй сам.

Появился новый параметр motionScheme – для анимации компонентов. Устанавливаешь туды MotionScheme.expressive() и получаешь более пружинящие кривые ускорения, более живые и заметные переходы. Меньше надо вручную настраивать tween во всех местах.

Расширили работу с формами. Добавили геометрические фигуры MaterialShapes – набор из 35 предопределенных форм. Каждая описана как полигон и имеет стабильные пропорции: можно масштабировать и вертеть как хочется. В наборе есть как базовая геометрия: овал, треугольник, так и декоративные печеньки и солнышки. Поверх этих фигур появился морфинг: формы можно превращать друг в друга, анимируя сам контур контейнера.

Усилили варианты стандартных текстовых стилей. Называется Emphasized-типографика. К привычным display* и headline* добавились акцентные версии, которые выглядят плотнее за счет увеличенного визуального веса. Такие стили нужны для крупных заголовков, онбордингов, приветственных сообщений и пустых состояний – где важно сразу цеплять взгляд.

Многие компоненты из Material3 получили expressive-версии. Сигнатура существующих методов не меняется, Compose держится за бинарную совместимость. Поэтому рядом добавляется новая перегрузка, использующая expressive-токены. Система токенов описывает цвета, размеры, формы, отступы, типографику и motion-параметры. Компоненты не хардкодят эти значения, поэтому их стиль можно централизованно менять через тему. Большая часть всего expressive API под opt-in аннотацией.

Также в Expressive добавили 30 новых компонентов:

• HorizontalFloatingToolbar – плавающий горизонтальный тулбар с навигацией и ключевыми действиями в Row.
• VerticalFloatingToolbar – плавающий горизонтальный тулбар с навигацией и ключевыми действиями в Column.
• FlexibleBottomAppBar – гибкий нижний бар для малых экранов.
• MediumFlexibleTopAppBar – верхний бар среднего размера. В раскрытом состоянии переносит заголовок и подзаголовок во вторую строку.
• LargeFlexibleTopAppBar – верхний бар большого размера.
• TwoRowsTopAppBar – верхний бар в две строки.
• ExpandedFullScreenContainedSearchBar – строка поиска с полноэкранным режимом.
• ExpandedDockedSearchBarWithGap – закреплённая строка поиска. Результаты показываются во всплывающем окне под строкой поиска, с небольшим зазором.
• LoadingIndicator – индикатор загрузки с морфингом формы.
• ContainedLoadingIndicator – морфинг формы внутри окрашенного контейнера.
• LinearWavyProgressIndicator – линейный индикатор прогресса с волнистой анимацией.
• CircularWavyProgressIndicator – круговой индикатор прогресса с волнистой анимацией.
• FloatingActionButtonMenu – меню для плавающей кнопки действия.
• FloatingActionButtonMenuItem – пункт меню для кнопки выше.
• ToggleFloatingActionButton – плавающая кнопка-переключатель с анимацией размера, скругления и цвета.
• MediumFloatingActionButton – плавающая кнопка действия среднего размера.
• SmallExtendedFloatingActionButton – маленькая расширенная плавающая кнопка с текстовой меткой и увеличенной областью нажатия.
• MediumExtendedFloatingActionButton – средняя расширенная плавающая кнопка с текстовой меткой и увеличенной областью нажатия.
• LargeExtendedFloatingActionButton – большая расширенная плавающая кнопка с текстовой меткой и увеличенной областью нажатия.
• SplitButtonLayout – двойная кнопка с основным и вторичным действием.
• ButtonGroup – горизонтальная группа кнопок.
• ToggleButton – кнопка-переключатель. Меняет состояние и морфит форму в зависимости от значения.
• ElevatedToggleButton – кнопка-переключатель с повышенным акцентом и тенью.