将 Android Studio 与 Jetpack Compose 配合使用

为了在使用 Jetpack Compose 进行开发时获得最佳体验,您应下载 Android Studio Arctic Fox。这是因为,当您搭配使用 Android Studio 和 Jetpack Compose 开发应用时,可以从智能编辑器功能中受益,这些功能包括“新建项目”模板和即时预览 Compose 界面等。

下载 Android Studio Arctic Fox

安装 Android Studio 后,请按照以下说明尝试 Jetpack Compose 示例应用,创建新的 Jetpack Compose 应用项目,或者向现有应用项目添加对 Jetpack Compose 的支持。

尝试 Jetpack Compose 示例应用

运行最新版本的 Android Studio 后,试用 Jetpack Compose 功能的最快方法是尝试在 GitHub 上托管的 Jetpack Compose 示例应用。如需从 Android Studio 导入示例应用项目,请按以下步骤操作:

  1. 如果您位于 Welcome to Android Studio 窗口中,请选择 Import an Android code sample。如果您已打开 Android Studio 项目,请从菜单栏中依次选择 File > New > Import Sample
  2. Browse Samples 向导顶部附近的搜索栏中,输入“compose”。
  3. 从搜索结果中选择一个 Jetpack Compose 示例应用,然后点击 Next
  4. 您可以更改 Application nameProject location,也可以保留默认值。
  5. 点击 Finish

Android Studio 会将示例应用下载到您指定的路径并打开项目。然后,您可以在 IDE 预览界面中检查每个示例中的 MainActivity.kt,以查看各种 Jetpack Compose API 的效果,例如,交叉淡入淡出动画、自定义组件、使用字体排版以及显示浅色和深色。

创建支持 Jetpack Compose 的新应用

如果您想要创建一个默认支持 Jetpack Compose 的新项目,Android Studio 提供了新项目模板来帮助您入手。如需创建支持 Jetpack Compose 的新项目,请按以下步骤操作:

  1. 如果您位于 Welcome to Android Studio 窗口中,请点击 Start a new Android Studio project。如果您已打开 Android Studio 项目,请从菜单栏中依次选择 File > New > New Project
  2. Select a Project Template 窗口中,选择 Empty Compose Activity,然后点击 Next
  3. Configure your project 窗口中,执行以下操作:
    1. 按照常规方法设置 NamePackage nameSave location
    2. 请注意,在 Language 下拉菜单中,Kotlin 是唯一可用的选项,因为 Jetpack Compose 仅适用于使用 Kotlin 编写的类。
    3. Minimum API level dropdown 菜单中,选择 API 级别 21 或更高级别。
  4. 点击 Finish
  5. 根据配置 Gradle 中所述的方法,验证项目的 build.gradle 文件配置是否正确。

现在,您可以开始使用 Jetpack Compose 开发应用了。为了帮助您入门并了解使用该工具包可以做些什么,请试试 Jetpack Compose 教程

添加 Jetpack Compose 工具包依赖项

在应用的 build.gradle 文件中添加 Jetpack Compose 工具包依赖项,如下所示:

Groovy

dependencies {
    implementation 'androidx.compose.ui:ui:1.0.1'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.0.1'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.0.1'
    // Material Design
    implementation 'androidx.compose.material:material:1.0.1'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.0.1'
    implementation 'androidx.compose.material:material-icons-extended:1.0.1'
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.3.1'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.1'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.1'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.1'
}

Kotlin

dependencies {
    implementation("androidx.compose.ui:ui:1.0.1")
    // Tooling support (Previews, etc.)
    implementation("androidx.compose.ui:ui-tooling:1.0.1")
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation("androidx.compose.foundation:foundation:1.0.1")
    // Material Design
    implementation("androidx.compose.material:material:1.0.1")
    // Material design icons
    implementation("androidx.compose.material:material-icons-core:1.0.1")
    implementation("androidx.compose.material:material-icons-extended:1.0.1")
    // Integration with observables
    implementation("androidx.compose.runtime:runtime-livedata:1.0.1")
    implementation("androidx.compose.runtime:runtime-rxjava2:1.0.1")

    // UI Tests
    androidTestImplementation("androidx.compose.ui:ui-test-junit4:1.0.1")
}

将 Jetpack Compose 添加到现有项目中

如果您想要在现有项目中使用 Jetpack Compose,则需要为项目配置所需的设置和依赖项。如需了解详情,请参阅将 Jetpack Compose 添加到应用