Чтобы переводить контент на ваш предпочитаемый язык, Google использует технологии на основе искусственного интеллекта. Переводы от ИИ могут содержать ошибки.

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

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

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

**Рисунок 1.** Этапы переноса приложения на основе View в Compose

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

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

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

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

**Рисунок 2.** Новый экран, написанный на 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 во фрагментах…

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

**Рисунок 3.** Существующий экран со смешанными представлениями и Compose

Вы также можете использовать 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 API.

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

По мере того как вы будете создавать функции с помощью 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. Этот подход также называется подходом снизу вверх.

Подход "снизу вверх" к переносу смешанного интерфейса Views и Compose в Compose — **Рисунок 4**. Подход "снизу вверх" для переноса смешанного интерфейса Views и Compose в Compose

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

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

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

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

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

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

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