作者 / Google 产品总监 Karen Ng
Jetpack Compose 是一个现代化的 UI 工具包,旨在帮助开发者通过原生平台 API 简单快捷地在全 Android 平台构建精美应用,它能大幅降低代码量并包含交互式工具,以及使用直观的 Kotlin API,为您的应用增添活力。现在,我们正式发布 Jetpack Compose 的 Alpha 版本,邀请您体验!
开发者们通过构建应用演绎价值和实现理想。开发效率的提升离不开三个重要因素: 编程语言、集成开发环境 (IDE) 以及用户界面 (UI) 框架。我们为大家带来的 Jetpack Compose,目的就是为了让您 (我们也是!) 能在构建 UI 上更加高效!
起初,我们计划通过一系列的 Android Jetpack 开发库解决 Android 开发中最困难、最常见的问题,帮助开发者们在所有的 Android 版本上运行高质量的应用。如今 Google Play 商店排名前一万的应用中,已经有 84% 的应用使用了 Jetpack 库。
进而,我们还了解到 Kotlin 深受开发者的喜爱,如今在排名前一千名的应用中,有超过 70% 的应用使用了 Kotlin,60% 的专业 Android 开发者都在使用 Kotlin。Google Home 应用使用了 Kotlin 之后,在某些情况下减少了 80% 代码行数,NullPointerExceptions 与过去同期相比减少 33%。还有,多邻国 (Duolingo) 应用使用了 Kotlin 之后,肉眼可见的代码行数平均减少了 30%。
最后,我们通过社区收集到了一些强烈的建议,开发者们希望可以使用一些声明式的 API 来降低 UI 构建的难度。Jetpack Compose 结合刚刚提到的三点优势应运而生——可大规模构建高质量应用的 API、直观的编程语言以及响应式的编程模型。
Jetpack 的 Hello World
Jetpack Compose: Alpha 版现已发布
Jetpack Compose Alpha 版本 提供了用于构建成熟 Android 应用所需的功能,不仅有高效的工具,还可以和现有 Android 视图进行互操作,您无需重新编写您的应用。Compose API 是与一组使用 Material Design 规范的示例应用 一起设计和开发的!我们很高兴发布这些应用!您还可以直接在 Android Studio 中 导入和浏览 最新的示例。
Alpha 版本发布内容如下:
- Animations
- Constraint Layout
- 无障碍初步支持
- 输入和手势
- 与视图的互操作性 (可以在您现有的 app 中混合可以组合的功能)
- 懒加载列表
- Material UI 组件
- 性能优化
- 测试
- 文本和可编辑文本
- 主题和图形
- Window 管理
在与 JetBrains Kotlin 团队 的紧密合作下,我们也为 Android Studio 4.2 canary 添加了一系列新功能来帮助您使用 Compose 构建应用:
- Compose 代码自动补全
- Compose 预览注解
- 部署单个可组合的组件到任何设备上
- 交互式 Compose 预览
- 可以生成代码的 Kotlin 编译器插件
- 适用于 Compose 的示例数据 API
- Romain 的视频 - Jetpack Compose:https://www.bilibili.com/video/BV1Vv411q7Hn
Compose 的编程思想
Compose 使用的编程模型与 Android 上现有的构建 UI 的模型完全不同。从历史上看,Android 的视图层次结构一直被描述为 UI 组件树。随着 app 状态的变化,需要更新 UI 层次结构来显示当前的数据。更新 UI 最常见的方法是使用像 findViewById() 这样的方法去遍历 UI 组件树,并通过调用类似下面的这些方法来改变节点:
代码语言:javascript复制button.setText(String)
代码语言:javascript复制container.addView(View)
代码语言:javascript复制img.setImageBitmap(Bitmap)
这些方法会改变组件的内部状态。这不仅乏味繁琐,而且手动更新视图也会增加出错的可能性 (例如忘记更新视图)。Jetpack Compose 是一种完全基于声明式组件的方法,这意味着您需要将 UI 描述为将数据转换为 UI 层级结构的函数。当基础数据发生变化时,Compose 框架会自动为您更新 UI 层次结构,从而使您可以轻松快速的构建 UI。
- 观看视频: 用 Compose 思考:https://youtu.be/SMOhl9RK0BA
与现有 Android 视图完全互操作
对于现有的项目和代码库来说,采用任何新的框架都是一个很大的改变,这就是为什么我们把 Compose 设计得和 Kotlin 一样容易采用——它从一开始就可以与现有的 Android 代码完全互操作。
是否迁移到 Compose 取决于您和您的团队。如果您正在构建一个新的 app,最好的选择可能是使用 Compose 来实现 app 的整个 UI 界面。我们知道大多数人都有大量的现有代码库,可以将 Compose 与现有的 UI 设计结合起来,而无需重写应用。
可以通过以下两种主要的方式将 Compose 与基于视图的 UI 结合起来:
- 您可以添加 Compose 元素到现有的 UI,或者创建一个全新的基于 Compose 的屏幕,或者是向现有的 fragment 或视图布局中添加 Compose 元素。
- 您可以将基于视图的 UI 元素添加到可组合的函数中。这样做可以将不基于 Compose 的组件添加到基于 Compose 的组件中,例如: MapView 或 WebView。
我们也发布了一个新库 MDC Compose 主题适配器,它可以让您在 Compose UI 中复用现有的 Material Components 主题。
要了解更多相关信息,请参阅 Compose for existing apps codelab 或查看以下两个示例:
- Tivi 和 Sunflower 展示了如何在现有项目中集成 Compose
- Crane 示例应用 展示了如何在 Compose 嵌入一个 MapView
- 观看视频: 将 Compose 加入现有的应用:https://youtu.be/PjQdFmiDgwk
强大的工具
Android Studio 中包含了辅助您使用 Jetpack Compose 的强大工具,可以帮助您快速迭代 UI 元素。
借助 Compose 布局预览,您可以预览 Compose 组件,而无需将应用部署到设备或模拟器。在开发应用时,您的预览会更新,以帮助您更快地检查变更。要创建布局预览,请编写一个不使用任何参数的 Composable 函数,并添加:
代码语言:javascript复制@Preview annotation
完成应用构建后,预览功能的 UI 会出现在 Android Studio 的 Preview 窗格中。
Android Studio 提供了 交互式预览模式 。在交互式预览模式下,您可以在 UI 元素中点击或输入,UI 将会响应,就像是在已安装的应用中一样。
交互式预览工具
您也可以将单个可组合功能部署到物理设备或 Android Emulator。Android Studio 会创建一个新的 Activity,其中包含由将该功能所生成的 UI,并将其部署到您在设备上的应用。这样您就可以实际体验测试 UI,而无需重新安装整个应用或导航到当前页面。
可组合元素预览
开始使用 Jetpack Compose
要开始使用 Jetpack Compose,请参阅 Compose 教程 并 进行设置。或者直接进入 示例应用 并在 "Compose by Example" 中浏览这些应用:
- 观看视频: Compose 示例:https://youtu.be/DDd6IOlH3io
欢迎访问 Compose 学习计划,了解包括 新增的 Codelab 和扩展文档的更多 Compose 资源。
自我们 去年 开源 Jetpack Compose 以来,众多开发者为我们提供了宝贵反馈,使我们有了今天的成就,感谢大家!
我们还在提升 API 的稳定性和优化性能,因此目前还不建议您将 Compose 完全投入到生产环境中。但我们希望大家可以试用并向我们 分享反馈。您也可以加入 Kotlin Slack 的 #compose 频道或在微信留言区与我们讨论。Compose 1.0 预期将在 2021 年发布。