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

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

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

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

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

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

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

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

Фигура 2 . Новый экран, написанный на 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 во фрагментах , чтобы узнать больше.

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

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

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

Например, предположим, что вы хотите добавить дочернее представление в 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.

Если ваше приложение будет доступно только для компоновки, это может ускорить вашу разработку, а также сократить размер APK и время сборки вашего приложения. Дополнительные сведения см. в разделе Сравнение производительности Compose и View .

Примечание. Положитесь на тестирование пользовательского интерфейса, чтобы убедиться в отсутствии регрессий во время миграции. См. разделы «Тестирование приложений на Android» и «Тестирование макета Compose» , чтобы узнать больше о тестировании пользовательского интерфейса.

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

Первое, на что следует обратить внимание при переносе существующих функций в 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

Смешанные экраны просмотра и создания сообщений

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

Рисунок 4 . Подход «снизу вверх» при переносе смешанного пользовательского интерфейса Views и Compose в Compose

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

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

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

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

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

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

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

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

{% дословно %} {% дословно %}