Compose 工具

Android Studio 引入了许多专用于 Jetpack Compose 的新功能。它支持使用代码优先方法,同时提高了开发者的工作效率,因为开发者不必在设计界面或代码编辑器之间二选一。

基于 View 的界面与 Jetpack Compose 之间的一个基本区别在于,Compose 不依赖 View 来呈现其可组合项。通过采用这种架构方法,Android Studio 为 Jetpack Compose 提供了扩展功能,让其不必像 Android View 一样打开模拟器或连接到设备,从而加快了开发者实现其界面设计的迭代过程。

如需为 Jetpack Compose 启用 Android Studio 特定功能,您需要在应用 build.gradle 文件中添加以下依赖项:

implementation "androidx.compose.ui:ui-tooling:1.0.5"

可组合项预览

可组合项由函数定义,并使用 @Composable 进行注解:

@Composable
fun SimpleComposable() {
    Text("Hello World")
}

包含“Hello World”字样的简单文本元素

如需实现此可组合项的预览,您需要再创建一个使用 @Composable@Preview 进行注解的可组合项,并发出您最初创建的可组合项:

@Preview
@Composable
fun ComposablePreview() {
    SimpleComposable()
}

最后,点击拆分(设计/代码)视图,打开显示预览的右侧面板:

Android Studio“拆分视图”选择器

预览窗口中显示的简单文本视图

@Preview 接受参数以自定义 Android Studio 呈现它的方式。您可以在代码中手动添加这些参数,也可以点击 @Preview 旁边的边线图标以显示配置选择器,以便选择和更改这些配置参数。

@Preview 功能

Android Studio 提供了一些功能来扩展可组合项预览。您可以更改其容器设计,与之互动,或直接将其部署到模拟器或设备。

互动模式

使用互动模式,您可以采用与在设备上执行操作的类似方式与预览对象互动。互动模式被隔离在沙盒环境中(与其他预览对象隔离),在该模式下,您可以在预览对象中点击元素并输入用户输入;预览对象甚至还可以播放动画。通过使用这种模式,您可以快速测试可组合项的不同状态和手势,例如勾选或清空复选框。

预览互动模式直接在 Android Studio 中运行,并未运行模拟器,因此存在一些限制:

  • 无法访问网络
  • 无法访问文件
  • 有些 Context API 不一定完全可用

用户点击预览对象的“互动”按钮

用户与预览对象互动的视频

部署预览对象

您可以将特定 @Preview 部署到模拟器或实体设备上。预览对象将与新的 activity 部署在同一项目应用中,因此它具有相同的上下文和权限,这意味着您无需编写样板代码,比如在已获得某个权限的情况下请求该权限。

用户点击预览对象的“部署”按钮

用户将预览对象部署到设备的视频

代码导航和可组合项大纲

您可以将鼠标悬停在预览对象上,查看其中包含的可组合项的大纲。点击可组合项大纲会触发您的编辑器视图,从而导航到其定义。

用户将鼠标悬停在预览对象上,使 Studio 显示其可组合项的大纲

复制 @Preview 呈现

通过右键点击呈现的每个预览对象,即可将其作为图像复制。

用户点击预览对象以将其作为图像复制。

设置背景颜色

默认情况下,您的可组合项将以透明背景显示。如需添加背景,请添加 showBackgroundbackgroundColor 参数。请注意,backgroundColor 是 ARGB Long,而不是 Color 值:

@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
    Text("Hello World")
}

包含“Hello World”字样的绿色矩形

尺寸

默认情况下,系统会自动选择 @Preview 尺寸来封装其内容。如需手动设置尺寸,可以添加 heightDpwidthDp 参数。请注意,这些值已解释为 Dp,您无需在值末尾添加 .dp

@Preview(widthDp = 50, heightDp = 50)
@Composable
fun SquareComposablePreview() {
    Box(Modifier.background(Color.Yellow)) {
        Text("Hello World")
    }
}

包含“Hello World”字样的黄色方形

语言区域

如需测试不同的用户语言区域,您需要添加 locale 参数:

@Preview(locale = "fr-rFR")
@Composable
fun DifferentLocaleComposablePreview() {
    Text(text = stringResource(R.string.greetings))
}

一个简单的文本元素,其中包含“Bonjour”一词和一面法国国旗

系统界面

如需在预览对象中显示状态栏和操作栏,请添加 showSystemUi 参数:

@Preview(showSystemUi = true)
@Composable
fun DecoratedComposablePreview() {
    Text("Hello World")
}

显示具有状态栏和操作栏的 activity 的预览窗口

@PreviewParameter

您可以使用 @PreviewParameter 注解添加参数,以将示例数据传递给某个可组合项预览函数。

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class) user: User
) {
    UserProfile(user)
}

如需提供示例数据,请创建一个可实现 PreviewParameterProvider 并以序列形式返回示例数据的类。

class UserPreviewParameterProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(
        User("Elise"),
        User("Frank"),
        User("Julia")
    )
}

序列中的每个数据元素都会呈现一个预览:

您可以为多个预览使用相同的提供程序类。如有必要,可通过设置 limit 参数来限制呈现的预览数量。

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User
) {
    UserProfile(user)
}

编辑器操作

Android Studio 在编辑器区域也提供了一些功能,可提高使用 Jetpack Compose 的工作效率。

实时模板

Android Studio 添加了下面这些与 Compose 相关的实时模板,您可以通过输入相应的模板缩写来输入代码段,以实现快速插入:

  • comp,用于设置 @Composable 函数
  • prev,用于创建 @Preview 可组合函数
  • paddp,用于以 dp 为单位添加 padding 修饰符
  • weight,用于添加 weight 修饰符
  • WWRWC,用于通过 BoxRowColumn 容器设置当前可组合项的呈现效果

边线图标

边线图标是边栏中可见的上下文操作,位于行号旁边。Android Studio 引入了多个 Jetpack Compose 专用边线图标,以便开发者更轻松地使用。

部署预览对象

您可以直接通过边线图标将 @Preview 部署到模拟器或实体设备上:

用户点击预览函数的部署边线图标,并将预览对象部署到设备上

颜色选择器

无论是在可组合项内部还是外部定义颜色,边线上都会显示其预览对象。您可以点击颜色,通过颜色选择器进行更改,如下所示:

用户点击边线中的颜色,弹出一个颜色选择器

图像资源选择器

无论是在可组合项内部还是外部定义可绘制对象、矢量或图像,边线上都会显示其预览对象。您可以点击它,通过图像资源选择器进行更改,如下所示:

用户点击边线中的图标,弹出资源选择器

迭代代码开发

作为移动开发者,您通常需要逐步开发应用界面,而不是一次性开发所有内容。Android Studio 通过提供不需要完整 build 即可检查、修改值以及验证最终结果的工具,支持使用 Jetpack Compose 进行逐步开发。

实时修改字面量

Android Studio 可以实时更新在预览对象、模拟器和实体设备内的可组合项中使用的一些常量字面量。下面是一些受支持的类型:

  • Int
  • String
  • Color
  • Dp
  • Boolean

用户在源代码中更改字面量并且预览对象动态更新的视频

通过启用下面这些突出显示的值,无需进行编译即可查看触发实时更新的常量字面量:

用户启用 Live Literals 突出显示的视频

Apply Changes

Apply Changes 可让您更新代码和资源,而不必将应用重新部署到模拟器或实体设备上,不过,这项功能存在一些限制

每当您添加、修改或删除可组合项时,您只需点击一下此按钮,即可更新应用,而不必重新部署:

用户点击“Apply Changes”按钮

布局检查器

借助布局检查器,您可以在模拟器或实体设备上检查正在运行的应用中的 Compose 布局。

动画

Android Studio 允许您通过互动式预览检查动画效果。如果您在可组合项预览中描述了动画效果,则可以在给定时间检查每个动画值的确切值,可以暂停、循环播放动画、让动画快进或放慢,以便在动画过渡过程中调试动画:

@Preview
@Composable
fun PressedSurface() {
    val (pressed, onPress) = remember { mutableStateOf(false) }
    val transition = updateTransition(
        targetState = if (pressed) SurfaceState.Pressed else SurfaceState.Released
    )

    val width by transition.animateDp { state ->
        when (state) {
            SurfaceState.Released -> 20.dp
            SurfaceState.Pressed -> 50.dp
        }
    }
    val surfaceColor by transition.animateColor { state ->
        when (state) {
            SurfaceState.Released -> Color.Blue
            SurfaceState.Pressed -> Color.Red
        }
    }
    val selectedAlpha by transition.animateFloat { state ->
        when (state) {
            SurfaceState.Released -> 0.5f
            SurfaceState.Pressed -> 1f
        }
    }

    Surface(
        color = surfaceColor.copy(alpha = selectedAlpha),
        modifier = Modifier
            .toggleable(value = pressed, onValueChange = onPress)
            .size(height = 200.dp, width = width)
    ){}
}

如需启用动画检查器,请点击此按钮:

用户打开动画检查器的演示

启用实验性功能

某些功能(例如互动式预览和动画检查器)仅当您在 Android Studio 偏好设置内的“Experimental”部分中手动将其启用后,才可供您使用。

在 Android Studio 的“Experiemental”偏好设置部分内启用了 Compose 工具