Jetpack Compose поддерживает взаимодействие с Views — вы можете использовать Compose в Views, а Views в Compose. Это позволяет интегрировать Compose в существующие приложения на основе Views без необходимости немедленной миграции всех Views.
Этапы миграции
- Составьте план: Разработайте подробный и пошаговый план миграции. Мы рекомендуем составить приоритетный список задач по миграции.
- Определите XML-компоненты, подходящие для миграции: выявите и начните с самых маленьких компонентов, являющихся конечными узлами в иерархии, и расширяйте план миграции снизу вверх до компонентов более высокого уровня в иерархии. Хорошими кандидатами для первоначальной миграции являются небольшие, не имеющие состояния и обладающие меньшим количеством зависимостей компоненты.
- Проанализируйте иерархию: после определения XML-представления, подлежащего миграции, проанализируйте его структуру XML-макета и реализацию.
- Зафиксируйте исходное состояние: выполните тест с созданием скриншота, чтобы зафиксировать исходное состояние выбранного XML-представления.
- Предварительное условие: Настройка зависимостей Compose. Убедитесь, что в проекте настроены зависимости Compose и компилятор. Если нет, выполните действия, описанные в разделе «Настройка зависимостей Compose и компилятора» .
- Предварительное условие: Настройка тем оформления Compose. Определите, настроены ли в проекте темы оформления Compose. Если нет, следуйте инструкциям по настройке тем оформления Compose. Сохраняйте исходные XML-темы оформления, пока приложение взаимодействует с другими приложениями . Перенесите XML-темы в Compose, чтобы понять шаблоны того, как задавать параметры, пока проект не будет полностью перенесен в Compose.
- Перенос XML-представления в Compose: начните преобразование XML-кода в Compose, примените соответствующую тему оформления и добавьте предварительный просмотр Compose для перенесенных элементов. Для получения информации о распространенных сценариях миграции обратитесь к дополнительным ресурсам. Например, для миграции на Lazy API в Compose выполните действия, описанные в разделе «Перенос RecyclerView в Compose» .
- Замена вариантов использования: Замените предыдущие варианты использования XML-представления новым компонентом Compose. Чтобы добавить Compose в представления, выполните действия, описанные в разделе «Compose в представлениях» . Чтобы добавить представления в Compose, выполните действия, описанные в разделе «Представления в Compose» .
- Проверка миграции: Убедитесь, что исходное состояние, зафиксированное в тесте скриншота, совпадает с предварительным просмотром в Compose для мигрированного компонента. Если они не совпадают, внесите изменения в пользовательский интерфейс нового компонента и улучшите его, чтобы привести в соответствие с исходным состоянием. Создайте новые тесты пользовательского интерфейса Compose для нового компонента.
- Удаление XML: После того, как перенесенный компонент будет соответствовать исходному XML-интерфейсу, удалите устаревший код XML-представления и его тесты.
Типичные сценарии миграции
Убедитесь, что в компонуемых объектах используются расширения dp и sp ( 16.dp , 20.sp ). Если в представлении XML присутствует tools:text , используйте его в отдельном компонуемом объекте @Preview .
Преобразование атрибута в модификатор
Большинство XML-атрибутов становятся частью цепочки modifier или параметров составной функции.
| XML-атрибут | Составьте эквивалент |
|---|---|
android:layout_width="match_parent" | Modifier.fillMaxWidth() |
android:layout_height="match_parent" | Modifier.fillMaxHeight() |
android:layout_width="wrap_content" | (Поведение по умолчанию, обычно модификатор не требуется) |
android:padding="Xdp" | Modifier.padding(X.dp) |
android:layout_margin="Xdp" | Modifier.padding(X.dp) (Внешний отступ) |
android:gravity="center" | contentAlignment = Alignment.Center (Box) or horizontalAlignment / verticalArrangement (Column/Row) |
android:background="@color/white" | Modifier.background(colorResource(R.color.white)) |
android:visibility="gone" | Оберните в блок if (visible) { ... } |
Перенос стилей (styles.xml)
Стили XML часто объединяют несколько атрибутов для создания стиля. В Compose это делается путем создания составного варианта с определенным стилем.
Предоставьте отдельные функции `@Composable`, названные в соответствии со стилем и базовым компонентом, чтобы обозначить разницу в стиле и вариантах использования этих компонентов.
- Правило: если XML-элемент использует собственный стиль (например,
style="@style/MyPrimaryButton"), не пытайтесь воспроизвести этот стиль непосредственно в коде. Вместо этого предложите создать отдельный составной элемент. - Пример:
- XML:
<Button style="@style/MyPrimaryButton" ... /> - Compose:
MyPrimaryButton(onClick = { ... })
- XML:
- Общие группы атрибутов: Если стиль задает общие модификаторы (например, отступы + высота), вынесите их в читаемое свойство расширения или в общую переменную Modifier.