Эта страница переведена с помощью Cloud Translation API.

Быстрый старт

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

Получить Android Studio

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

Создайте новое приложение с поддержкой Compose.

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

Если вы находитесь в окне «Добро пожаловать в Android Studio» , нажмите «Начать новый проект Android Studio» . Если у вас уже открыт проект Android Studio, выберите «Файл» > «Создать» > «Новый проект» в строке меню.
В окне «Выбор шаблона проекта» выберите «Пустое действие» и нажмите «Далее» .
В окне «Настроить проект» выполните следующие действия:
1. Задайте Имя, Имя пакета и Место сохранения, как обычно. Обратите внимание, что в раскрывающемся меню «Язык» Kotlin является единственным доступным вариантом, поскольку Jetpack Compose работает только с классами, написанными на Kotlin.
2. В раскрывающемся меню «Минимальный уровень 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.06.00')
    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:material3-window-size-class'

    // Optional - Integration with activities
    implementation 'androidx.activity:activity-compose:1.9.0'
    // Optional - Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1'
    // 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.06.00")
    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:material3-window-size-class")

    // Optional - Integration with activities
    implementation("androidx.activity:activity-compose:1.9.0")
    // Optional - Integration with ViewModels
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1")
    // 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 .

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

Быстрый старт

Создайте новое приложение с поддержкой Compose.

Настройте Compose для существующего приложения

классный

Котлин

классный

Котлин

Попробуйте примеры приложений Jetpack Compose

Рекомендуется для вас