Перенесите XML-темы в Material 3 в Compose.

При внедрении Compose в существующее приложение необходимо перевести XML-темы Material на использование MaterialTheme для компонентов Compose. Это означает, что у оформления вашего приложения будет два источника достоверной информации: тема на основе представления и тема Compose. Любые изменения в стилях необходимо вносить в нескольких местах. После полной миграции приложения на Compose удалите XML-тему.

Для переноса цветов можно использовать инструмент Material Theme Builder .

При начале миграции с XML на Compose, перенесите темы оформления на Material 3 Compose.

Глоссарий

Срок Определение
MaterialTheme Компонуемая функция, которая обеспечивает оформление (цвета, типографику, формы) компонентов Compose UI.
Shape Объект Compose, используемый для определения пользовательских форм компонентов для MaterialTheme .
Typography Объект Compose, используемый для определения пользовательских стилей текста (семейства шрифтов, размеры, толщина) для темы MaterialTheme .
Color Объект Compose, используемый для определения пользовательских цветовых схем для MaterialTheme .
XML-тема Система оформления тем Android, определенная в XML-файлах и используемая системой View.

Ограничения

Перед миграцией учитывайте следующие ограничения:

  • Данное руководство посвящено только миграции на Material 3. Для миграции с других дизайн-систем см. Material 2 или пользовательские дизайн-системы в Compose .
  • Конечная цель — полная миграция на Compose, что позволит отказаться от XML-тематики. В этом руководстве объясняется, как осуществить миграцию, но не объясняется, как окончательно удалить XML-тематику.

Шаг 1: Оцените систему проектирования.

Определите, какая система проектирования используется в проекте XML View. Проанализируйте путь миграции и необходимые шаги для переноса существующей системы проектирования в Material 3 в Compose.

Шаг 2: Определите исходные файлы темы.

Найдите и определите все XML-ресурсы и файлы, необходимые для оформления: светлые и темные цветовые схемы, темы, формы, размеры, типографику, стили и другие соответствующие файлы.

Такие ресурсы, как строки, можно использовать повторно в неизмененном виде, и их не нужно переносить.

Шаг 3: Перенос цветов

Перенесите темную и светлую цветовые схемы из XML в их эквиваленты в Material 3 Compose.

Шаг 4: Перенос пользовательских фигур и типографики.

  • Если ваше приложение использует пользовательские фигуры:

    1. В коде Compose определите объект Shape , чтобы воспроизвести ваши XML-определения фигур.
    2. Передайте этот объект Shape в вашу MaterialTheme .

      Для получения более подробной информации см. раздел «Формы» .

  • Если ваше приложение использует собственную типографику:

    1. В коде Compose определите объект Typography , чтобы воспроизвести стили текста и определения шрифтов из XML-файла.
    2. Передайте этот объект Typography в вашу MaterialTheme .

      Более подробную информацию см. в разделе «Типографика» .

Шаг 5: Проверка миграции темы

В Compose всегда используйте существующие значения темы из исходного XML-файла темы в качестве источника достоверной информации для новой темы Material. Никогда не придумывайте новые значения темы во время миграции, чтобы сохранить единообразие бренда и избежать визуальных регрессий.

Убедитесь, что все новые значения темы Compose соответствуют существующим значениям XML. Не задавайте жестко заданные значения, полученные в результате миграции.