Google 致力于为黑人社区推动种族平等。查看具体举措

将 Android Studio 与 Jetpack Compose 配合使用

Jetpack Compose 是用于构建原生 Android 界面的新工具包。它基于声明性编程模型,因此您只需描述界面的外观,Compose 会负责完成其余工作,界面会随着应用状态的变化而自动更新。由于它是基于 Kotlin 而构建的,因而可与 Java 编程语言完全互操作,并且可直接访问所有 Android API 和 Jetpack API。它与现有界面工具包兼容,因此您可以混合搭配使用经典视图和新视图,而且它从一开始便支持 Material 设计和动画。

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

获取 Android Studio Canary 版

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

尝试使用 Jetpack 示例应用

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

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

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

创建支持 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. 点击完成
  5. 根据配置 Gradle 中所述,验证项目的 build.gradle 文件配置是否正确。

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

将 Jetpack Compose 添加到现有项目中

如果您想要在现有项目中使用 Jetpack Compose,则需要为项目配置所需的设置和依赖项。

配置 Gradle

您需要将应用的最低 API 级别设置为 21 或更高级别,并在应用的 build.gradle 文件中启用 Jetpack Compose,如下所示。另外还要设置 Kotlin 编译器插件的版本。

android {
    defaultConfig {
        ...
        minSdkVersion 21
    }

    buildFeatures {
        // Enables Jetpack Compose for this module
        compose true
    }
    ...

    // Set both the Java and Kotlin compilers to target Java 8.

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = "1.8"
    }

    composeOptions {
        kotlinCompilerExtensionVersion "0.1.0-dev13"
    }
}

添加 Jetpack Compose 工具包依赖项

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

dependencies {
    // You also need to include the following Compose toolkit dependencies.
    implementation 'androidx.ui:ui-core:0.1.0-dev13'
    implementation 'androidx.ui:ui-tooling:0.1.0-dev13'
    implementation 'androidx.ui:ui-layout:0.1.0-dev13'
    implementation 'androidx.ui:ui-material:0.1.0-dev13'
    ...
}

使用实时预览

实时预览是一项 Android Studio 功能,您可以用它来在不同的方向、字体大小和主题背景方面测试和比较应用的可组合函数,而无需部署应用。

多次实时预览,每次预览使用不同的宽度、主题背景和字体缩放。

图 1. 使用不同的尺寸、主题背景和字体缩放来预览可组合函数

如图 1 所示,您可以对某个可组合函数进行多次预览,每次预览采用不同的宽度和高度限制、字体缩放或主题背景。当您开发应用,更改资源或颜色时,实时预览会更新,以帮助您查看更改。此外,您还可以点击预览中的元素,在代码编辑器中快速导航到该元素的可组合函数。

创建基本实时预览

下面是一个名为 TutorialPreviewTemplate() 的可组合函数示例。

@Composable
fun TutorialPreviewTemplate(
    colors: MaterialColors = lightThemeColors,
    typography: MaterialTypography = themeTypography
) {
    val context = +ambient(ContextAmbient)
    val previewPosts = getPostsWithImagesLoaded(posts.subList(1, 2), context.resources)
    val post = previewPosts[0]
    MaterialTheme(colors = colors, typography = typography) {
        Surface {
            PostCardTop(post)
        }
    }
}

如需创建实时预览,请创建一个不带参数的新可组合函数,并在 @Composable 之前添加 @Preview 注释,如下所示:

/// This is the original composable function.
@Composable
fun TutorialPreviewTemplate( ... ) { ... }

// A new composable function that applies the @Preview annotation and does not
// take any parameters.
@Preview
@Composable
fun TutorialPreview() {
    // Call the composable function that you would like to
    // create a live preview for.
    TutorialPreviewTemplate()
}

在创建或修改实际预览时,您需要重新构建项目以查看更改。如需重新构建项目,请点击编辑器顶部横幅中的 Build,或从菜单栏中选择 Build > Make Project

可组合函数的基本实时预览。

图 2. Android Studio 中可组合函数的基本实时预览

您可以创建多个实时预览,它们并排显示在 IDE 预览窗口中,如下所示。这对于比较可组合函数的行为方式很有用,例如在给定参数不同的情况下。

/// This is the original composable function.
@Composable
fun TutorialPreviewTemplate( ... ) { ... }

@Preview
@Composable
fun TutorialPreview() { ... }

// This live preview uses the app's dark theme.
@Preview
@Composable
fun TutorialPreviewDark() {
    // Although you can't pass arguments to the live preview function itself,
    // you can pass arguments to the composable function that it calls.
    TutorialPreviewTemplate(colors = darkThemeColors)
}

使用不同的主题背景进行实时预览。

图 3. 可组合函数的两次实时预览,每次预览使用不同的主题背景

将参数传递给 @Preview 注释

@Preview 注释提供了一些参数,您可以使用这些参数来更改 IDE 在 Preview 窗口中呈现可组合函数的方式。例如,如下所示,您可以通过传递字符串来命名实时预览,以便更好地识别实时预览。

// Pass a name for the preview to easily identify it in the Preview window.
@Preview("Default colors")
@Composable
fun TutorialPreview() {
    TutorialPreviewTemplate()
}

@Preview("Dark colors")
@Composable
fun TutorialPreviewDark() {
    TutorialPreviewTemplate(colors = darkThemeColors)
}

您可以传递的其他 @Preview 参数如下所示:

  • widthDp:在呈现实时预览时,IDE 可以使用的最大宽度,以密度无关像素 (dp) 为单位。如果您想要在有限尺寸的屏幕上预览可组合函数,这会非常有用。
  • heightDp:IDE 在呈现实时预览时可以使用的最大高度,以 dp 为单位。如果您想要在有限尺寸的屏幕上预览可组合函数,这会非常有用。
  • fontScale:字体相对于基本密度缩放比例 (1f) 的缩放比例。如果您想要针对不同的用户字体大小偏好设置测试可组合函数,这会非常有用。

以下示例更改了实时预览的默认缩放比例和最大高度。

@Preview("Font scaling 1.5, height 300", fontScale = 1.5f, heightDp = 300)
@Composable
fun TutorialPreviewFontscale() {
    TutorialPreviewTemplate()
}

使用修改后的字体缩放比例和最大高度的实时预览。

图 4. 使用修改后的字体缩放比例和最大高度的实时预览