Jetpack Compose Alpha 版现已发布!

作者 / Google 产品总监 Karen Ng

image

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 的 Hello World

Jetpack Compose: Alpha 版现已发布

Jetpack Compose Alpha 版本 提供了用于构建成熟 Android 应用所需的功能,不仅有高效的工具,还可以和现有 Android 视图进行互操作,您无需重新编写您的应用。Compose API 是与一组使用 Material Design 规范的示例应用 一起设计和开发的!我们很高兴发布这些应用!您还可以直接在 Android Studio 中 导入和浏览 最新的示例。

[图片上传失败...(image-5adf80-1599312548189)]

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 组件树,并通过调用类似下面的这些方法来改变节点:

button.setText(String)
container.addView(View)
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 函数,并添加:

@Preview annotation

完成应用构建后,预览功能的 UI 会出现在 Android Studio 的 Preview 窗格中。

image

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 年发布。

你可能感兴趣的:(Jetpack Compose Alpha 版现已发布!)