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

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

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

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

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

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

Using Compose to build new features that encompass an entire screen is the best way to drive your adoption of Compose. With this strategy, you can add features and take advantage of the benefits of Compose while still catering to your company's business needs.

При использовании 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 взаимодействия, чтобы узнать больше.