Если у вас есть существующее приложение на основе представления, возможно, вы не захотите переписывать весь его пользовательский интерфейс сразу. Эта страница поможет вам добавить новые компоненты Compose в существующее приложение. Чтобы начать использовать Compose в своем приложении, см. раздел Настройка Compose для существующего приложения .
Jetpack Compose с самого начала был разработан с учетом совместимости с View. Эта функциональность означает, что вы можете перенести существующее приложение на основе View в Compose, сохраняя при этом возможность создавать новые функции. Чтобы перейти на Compose, мы рекомендуем выполнить инкрементную миграцию, при которой Compose и Views сосуществуют в вашей кодовой базе до тех пор, пока ваше приложение не будет полностью переведено в Compose.
![Этапы миграции приложения на основе View в Compose](https://developer.android.com/static/develop/ui/compose/images/interop-stages.png?authuser=9&hl=ru)
Чтобы перенести приложение в Compose, выполните следующие действия:
- Создавайте новые экраны с помощью Compose.
- Создавая функции, определите повторно используемые элементы и начните создавать библиотеку общих компонентов пользовательского интерфейса.
- Заменяйте существующие функции по одному экрану за раз.
Создавайте новые экраны с помощью Compose
Использование Compose для создания новых функций, охватывающих весь экран, — лучший способ стимулировать внедрение Compose. С помощью этой стратегии вы можете добавлять функции и использовать преимущества Compose , сохраняя при этом потребности бизнеса вашей компании.
![Новый экран, написанный на Compose](https://developer.android.com/static/develop/ui/compose/images/interop-newscreen.png?authuser=9&hl=ru)
Когда вы используете 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() } } } }
См. ComposeView во фрагментах , чтобы узнать больше.
Добавьте новые функции в существующие экраны
![Существующий экран со смешанными видами и композицией.](https://developer.android.com/static/develop/ui/compose/images/interop-existingscreen.png?authuser=9&hl=ru)
Вы также можете использовать 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>
После того, как представление будет увеличено, вы можете позже ссылаться на ComposeView
в иерархии и вызывать setContent()
.
Чтобы узнать больше о ComposeView
, ознакомьтесь с API-интерфейсами взаимодействия .
Создайте библиотеку общих компонентов пользовательского интерфейса.
Создавая функции с помощью Compose, вы быстро поймете, что в конечном итоге вы создаете библиотеку компонентов. Создание библиотеки общих компонентов пользовательского интерфейса позволяет вам иметь единый источник достоверной информации об этих компонентах в вашем приложении и способствует возможности повторного использования. Создаваемые вами функции могут зависеть от этой библиотеки. Этот метод особенно полезен, если вы создаете собственную систему дизайна в Compose .
В зависимости от размера вашего приложения эта библиотека может представлять собой отдельный пакет, модуль или библиотечный модуль. Дополнительную информацию об организации модулей в вашем приложении можно найти в Руководстве по модульности приложений Android .
Замените существующие функции на 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>
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)) } } }
Смешанные экраны просмотра и создания сообщений
Экран, который уже содержит немного кода Compose, является еще одним хорошим кандидатом на полный переход на Compose. В зависимости от сложности экрана вы можете либо полностью перенести его в Compose, либо делать это по частям. Если экран начинался с Compose в поддереве иерархии пользовательского интерфейса, вы будете продолжать мигрировать элементы пользовательского интерфейса, пока весь экран не окажется в Compose. Этот подход еще называют подходом «снизу вверх» .
![Подход «снизу вверх» при переносе смешанного пользовательского интерфейса Views и Compose в Compose](https://developer.android.com/static/develop/ui/compose/images/interop-animation.gif?authuser=9&hl=ru)
Удаление фрагментов и компонента навигации
Вы можете перейти на Navigation Compose, как только сможете удалить все свои фрагменты и заменить их соответствующими составными элементами на уровне экрана. Составные элементы на уровне экрана могут содержать смесь содержимого Compose и View , но все пункты назначения навигации должны быть составными, чтобы можно было включить миграцию Navigation Compose. До тех пор вам следует продолжать использовать компонент навигации на основе фрагментов в вашей смешанной базе кода View и Compose. Дополнительную информацию см. в разделе «Миграция навигации Jetpack в Navigation Compose» .
Дополнительные ресурсы
Ознакомьтесь со следующими дополнительными ресурсами, чтобы узнать больше о переносе существующего приложения на основе View в Compose:
- Кодлаб
- Миграция на Jetpack Compose . Узнайте, как перенести части приложения Sunflower в Compose, в этой лаборатории кода.
- Сообщения в блоге
- Миграция Sunflower в Jetpack Compose : узнайте, как Sunflower был перенесен в Compose с использованием стратегии, описанной на этой странице.
- Jetpack Compose Interop: использование Compose в RecyclerView : узнайте, как эффективно использовать Compose в
RecyclerView
.
Следующие шаги
Теперь, когда вы знаете, какую стратегию можно использовать для миграции существующего приложения на основе представлений, изучите API-интерфейсы совместимости, чтобы узнать больше.
{% дословно %}Рекомендуется для вас
- Примечание. Текст ссылки отображается, когда JavaScript отключен.
- Использование Compose в представлениях
- Прокрутка
- Перенос
RecyclerView
в ленивый список