Стратегия миграции

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

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

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

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

Создавайте новые экраны с помощью Compose.

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

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

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

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 , ознакомьтесь с 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

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

@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

Экраны смешанного просмотра и создания изображений

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

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

Переход на Navigation Compose возможен после того, как вы сможете удалить все свои фрагменты и заменить их соответствующими составными элементами уровня экрана. Составные элементы уровня экрана могут содержать как контент 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 .

Следующие шаги

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