Для получения наилучших результатов при разработке с помощью Compose загрузите и установите Android Studio . Он включает в себя множество интеллектуальных функций редактора , таких как новые шаблоны проектов и возможность немедленного предварительного просмотра пользовательского интерфейса и анимации Compose.
Следуйте этим инструкциям, чтобы создать новый проект приложения Compose, настроить Compose для существующего проекта приложения или импортировать пример приложения, написанного в Compose.
Создайте новое приложение с поддержкой Compose.
Если вы хотите начать новый проект, который по умолчанию включает поддержку Compose, Android Studio включает в себя различные шаблоны проектов, которые помогут вам начать работу. Чтобы создать новый проект с правильной настройкой Compose, выполните следующие действия:
- Если вы находитесь в окне «Добро пожаловать в Android Studio» , нажмите « Начать новый проект Android Studio» . Если у вас уже открыт проект Android Studio, выберите «Файл» > «Создать» > «Новый проект» в строке меню.
- В окне «Выбор шаблона проекта» выберите «Пустое действие» и нажмите «Далее» .
- В окне «Настроить проект» выполните следующие действия:
- Задайте Имя, Имя пакета и Место сохранения, как обычно. Обратите внимание, что в раскрывающемся меню «Язык » Kotlin является единственным доступным вариантом, поскольку Jetpack Compose работает только с классами, написанными на Kotlin.
- В раскрывающемся меню «Минимальный уровень API» выберите уровень API 21 или выше.
- Нажмите «Готово» .
Теперь вы готовы приступить к разработке приложения с помощью Jetpack Compose. Чтобы помочь вам начать работу и узнать, что можно делать с помощью набора инструментов, попробуйте руководство по Jetpack Compose .
Настройте Compose для существующего приложения
Сначала настройте компилятор Compose с помощью плагина Gradle Compose Compiler .
Затем добавьте следующее определение в файл build.gradle вашего приложения:
классный
android {
buildFeatures {
compose true
}
}
Котлин
android {
buildFeatures {
compose = true
}
}
Установка для флага compose значения true внутри блока Android BuildFeatures включает функцию Compose в Android Studio.
Наконец, добавьте Compose BOM и подмножество зависимостей библиотеки Compose, которые вам нужны, к вашим зависимостям из следующего блока:
классный
dependencies {
def composeBom = platform('androidx.compose:compose-bom:2024.09.03')
implementation composeBom
androidTestImplementation composeBom
// Choose one of the following:
// Material Design 3
implementation 'androidx.compose.material3:material3'
// or Material Design 2
implementation 'androidx.compose.material:material'
// or skip Material Design and build directly on top of foundational components
implementation 'androidx.compose.foundation:foundation'
// or only import the main APIs for the underlying toolkit systems,
// such as input and measurement/layout
implementation 'androidx.compose.ui:ui'
// Android Studio Preview support
implementation 'androidx.compose.ui:ui-tooling-preview'
debugImplementation 'androidx.compose.ui:ui-tooling'
// UI Tests
androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
debugImplementation 'androidx.compose.ui:ui-test-manifest'
// Optional - Included automatically by material, only add when you need
// the icons but not the material library (e.g. when using Material3 or a
// custom design system based on Foundation)
implementation 'androidx.compose.material:material-icons-core'
// Optional - Add full set of material icons
implementation 'androidx.compose.material:material-icons-extended'
// Optional - Add window size utils
implementation 'androidx.compose.material3.adaptive:adaptive'
// Optional - Integration with activities
implementation 'androidx.activity:activity-compose:1.9.2'
// Optional - Integration with ViewModels
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5'
// Optional - Integration with LiveData
implementation 'androidx.compose.runtime:runtime-livedata'
// Optional - Integration with RxJava
implementation 'androidx.compose.runtime:runtime-rxjava2'
}
Котлин
dependencies {
val composeBom = platform("androidx.compose:compose-bom:2024.09.03")
implementation(composeBom)
androidTestImplementation(composeBom)
// Choose one of the following:
// Material Design 3
implementation("androidx.compose.material3:material3")
// or Material Design 2
implementation("androidx.compose.material:material")
// or skip Material Design and build directly on top of foundational components
implementation("androidx.compose.foundation:foundation")
// or only import the main APIs for the underlying toolkit systems,
// such as input and measurement/layout
implementation("androidx.compose.ui:ui")
// Android Studio Preview support
implementation("androidx.compose.ui:ui-tooling-preview")
debugImplementation("androidx.compose.ui:ui-tooling")
// UI Tests
androidTestImplementation("androidx.compose.ui:ui-test-junit4")
debugImplementation("androidx.compose.ui:ui-test-manifest")
// Optional - Included automatically by material, only add when you need
// the icons but not the material library (e.g. when using Material3 or a
// custom design system based on Foundation)
implementation("androidx.compose.material:material-icons-core")
// Optional - Add full set of material icons
implementation("androidx.compose.material:material-icons-extended")
// Optional - Add window size utils
implementation("androidx.compose.material3.adaptive:adaptive")
// Optional - Integration with activities
implementation("androidx.activity:activity-compose:1.9.2")
// Optional - Integration with ViewModels
implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5")
// Optional - Integration with LiveData
implementation("androidx.compose.runtime:runtime-livedata")
// Optional - Integration with RxJava
implementation("androidx.compose.runtime:runtime-rxjava2")
}
Попробуйте примеры приложений Jetpack Compose
Самый быстрый способ поэкспериментировать с возможностями Jetpack Compose — попробовать примеры приложений Jetpack Compose, размещенные на GitHub. Чтобы импортировать пример проекта приложения из Android Studio, выполните следующие действия:
- Если вы находитесь в окне «Добро пожаловать в Android Studio» , выберите «Импортировать пример кода Android» . Если у вас уже открыт проект Android Studio, выберите «Файл» > «Создать» > «Импортировать образец» в строке меню.
- В строке поиска в верхней части мастера просмотра образцов введите «compose».
- Выберите одно из примеров приложений Jetpack Compose из результатов поиска и нажмите «Далее» .
- Либо измените имя приложения и местоположение проекта , либо сохраните значения по умолчанию.
- Нажмите «Готово» .
Android Studio загружает пример приложения по указанному вами пути и открывает проект. Затем вы можете проверить MainActivity.kt в каждом из примеров, чтобы увидеть API-интерфейсы Jetpack Compose, такие как анимация с плавным затуханием, пользовательские компоненты, использование типографики и отображение светлых и темных цветов в предварительном просмотре в IDE.
Чтобы использовать Jetpack Compose для Wear OS, см. раздел Настройка Jetpack Compose в Wear OS .
{% дословно %}Рекомендуется для вас
- Примечание: текст ссылки отображается, когда JavaScript отключен.
- Навигация с помощью Compose
- Тестирование макета Compose
- Реагировать на фокусировку