Стратегия переноса

Если у вас уже есть приложение на основе View, вы можете не захотеть переписывать весь его пользовательский интерфейс сразу. На этой странице рассказывается, как добавить новые компоненты Compose в существующее приложение. Чтобы начать использовать Compose в приложении, ознакомьтесь со статьей Как настроить Compose для существующего приложения.

Jetpack Compose изначально разрабатывался с учетом совместимости с View. Это означает, что вы можете перенести существующее приложение на основе View в Compose, сохраняя при этом возможность создавать новые функции. Мы рекомендуем постепенный переход на Compose, при котором Compose и View сосуществуют в базе кода, пока приложение не будет полностью переведено на Compose.

Чтобы перенести приложение в Compose, выполните следующие действия:

1. Создавайте новые экраны с помощью Compose.
2. При создании функций определяйте элементы, которые можно использовать повторно, и начните создавать библиотеку общих компонентов пользовательского интерфейса.
3. Заменяйте существующие функции по одному экрану за раз.

Как создавать экраны с помощью Compose

Использование Compose для создания новых функций, охватывающих весь экран, – лучший способ внедрения Compose. При таком подходе вы сможете добавлять функции и пользоваться преимуществами Compose, не забывая о бизнес-потребностях компании.

Когда вы используете Compose для создания новых экранов в существующем приложении, вы по-прежнему работаете в рамках ограничений архитектуры вашего приложения. Если вы используете фрагменты и компонент Navigation, вам нужно будет создать новый фрагмент и поместить его содержимое в Compose.

Чтобы использовать Compose во фрагменте, верните ComposeView в методе жизненного цикла onCreateView() фрагмента. У ComposeView есть метод setContent(), в котором можно указать composable-функцию.

class NewFeatureFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                NewFeatureScreen()
            }
        }
    }
}
MigrationStrategySnippets.kt

Подробнее о ComposeView во фрагментах…

Добавление новых функций на существующие экраны

Вы также можете использовать Compose на существующем экране на основе View, если новая функция, которую вы добавляете, является частью существующего экрана. Для этого добавьте ComposeView в иерархию View, как и любой другой объект View.

Например, вы хотите добавить дочернее представление в LinearLayout. Это можно сделать в XML следующим образом:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <TextView
      android:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

  <androidx.compose.ui.platform.ComposeView
      android:id="@+id/compose_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
</LinearLayout>
migration_strategy_existing_screens.xml

После этого вы можете ссылаться на ComposeView в иерархии и вызывать setContent().

Подробнее ComposeView рассказывается в статье Interoperability APIs.

Создайте библиотеку стандартных компонентов интерфейса

Создавая функции с помощью Compose, вы быстро поймете, что в итоге создаете библиотеку компонентов. Создание библиотеки общих компонентов пользовательского интерфейса позволяет вам иметь единый источник достоверных данных для этих компонентов в вашем приложении и способствует пригодности для повторного использования. Функции, которые вы создаете, могут зависеть от этой библиотеки. Этот метод особенно полезен, если вы создаете собственную систему проектирования в Compose.

В зависимости от размера приложения это может быть отдельный пакет, модуль или модуль библиотеки. Подробнее о том, как организовать модули в приложении для Android…

Замена существующих функций на Compose

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

Если вы будете использовать только Compose, то сможете ускорить разработку, а также уменьшить размер APK-файла и время сборки приложения. Подробнее о сравнении производительности Compose и View…

Простые экраны

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

Рассмотрим следующий XML-файл:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <TextView
      android:id="@+id/title_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/title"
      android:textAppearance="?attr/textAppearanceHeadline2" />

  <TextView
      android:id="@+id/subtitle_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/subtitle"
      android:textAppearance="?attr/textAppearanceHeadline6" />

  <TextView
      android:id="@+id/body_text"
      android:layout_width="wrap_content"
      android:layout_height="0dp"
      android:layout_weight="1"
      android:text="@string/body"
      android:textAppearance="?attr/textAppearanceBody1" />

  <Button
      android:id="@+id/confirm_button"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="@string/confirm"/>
</LinearLayout>
migration_strategy_xml_example.xml

XML-файл можно переписать в Compose в несколько строк:

@Composable
fun SimpleScreen() {
    Column(Modifier.fillMaxSize()) {
        Text(
            text = stringResource(R.string.title),
            style = MaterialTheme.typography.headlineMedium
        )
        Text(
            text = stringResource(R.string.subtitle),
            style = MaterialTheme.typography.headlineSmall
        )
        Text(
            text = stringResource(R.string.body),
            style = MaterialTheme.typography.bodyMedium
        )
        Spacer(modifier = Modifier.weight(1f))
        Button(onClick = { /* Handle click */ }, Modifier.fillMaxWidth()) {
            Text(text = stringResource(R.string.confirm))
        }
    }
}
MigrationStrategySnippets.kt

Смешанные экраны View и Compose

Экран, который уже содержит немного кода Compose, – ещё один хороший кандидат для полного перехода на Compose. В зависимости от сложности экрана вы можете либо полностью перенести его в Compose, либо делать это по частям. Если экран начинался с Compose в поддереве иерархии пользовательского интерфейса, вы продолжите переносить элементы пользовательского интерфейса, пока весь экран не окажется в Compose. Этот подход также называется подходом снизу вверх.

Удаление фрагментов и компонента навигации

Вы можете перейти на Navigation Compose, как только удалите все фрагменты и замените их соответствующими composable-функциями на уровне экрана. Составные элементы на уровне экрана могут содержать смесь контента Compose и View, но все пункты назначения навигации должны быть составными элементами, чтобы обеспечить миграцию Navigation Compose. До тех пор вы должны продолжать использовать компонент навигации на основе фрагментов в своей базе кода, содержащей как компоненты View, так и Compose. Подробнее о том, как перейти с Jetpack Navigation на Navigation Compose…

Дополнительные ресурсы

Ознакомьтесь со следующими дополнительными ресурсами, чтобы узнать больше о переносе существующего приложения на основе View в Compose:

• Основные тесты производительности. Сравнение производительности Compose и Views при запуске и прокрутке.
• Практическая работа
  • Переход на Jetpack Compose. Узнайте, как перенести части приложения Sunflower на Compose в этой практической работе.
• Записи в блоге
  • Переход на Jetpack Compose в приложении Sunflower. Узнайте, как приложение Sunflower было переведено на Compose с помощью стратегии, описанной на этой странице.
  • Совместимость Jetpack Compose: использование Compose в RecyclerView. Узнайте, как эффективно использовать Compose в RecyclerView.

Дальнейшие действия

Теперь, когда вы знаете стратегию, которую можно использовать для переноса существующего приложения на основе View, изучите API взаимодействия, чтобы узнать больше.