Google产品总监:Jetpack Compose Alpha 版现已发布!

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 中 导入和浏览 最新的示例。

[图片上传失败...(image-51f448-1599485615694)]

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:www.bilibili.com/video/BV1Vv…

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。

与现有 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 或查看以下两个示例:

强大的工具

Android Studio 中包含了辅助您使用 Jetpack Compose 的强大工具,可以帮助您快速迭代 UI 元素。

借助 Compose 布局预览,您可以预览 Compose 组件,而无需将应用部署到设备或模拟器。在开发应用时,您的预览会更新,以帮助您更快地检查变更。要创建布局预览,请编写一个不使用任何参数的 Composable 函数,并添加:

@Preview annotation
复制代码

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

image

Android Studio 提供了 交互式预览模式 。在交互式预览模式下,您可以在 UI 元素中点击或输入,UI 将会响应,就像是在已安装的应用中一样。

image

交互式预览工具

您也可以将单个可组合功能部署到物理设备或 Android Emulator。Android Studio 会创建一个新的 Activity,其中包含由将该功能所生成的 UI,并将其部署到您在设备上的应用。这样您就可以实际体验测试 UI,而无需重新安装整个应用或导航到当前页面。

可组合元素预览

开始使用 Jetpack Compose

要开始使用 Jetpack Compose,请参阅 Compose 教程进行设置。或者直接进入 示例应用 并在 "Compose by Example" 中浏览这些应用:

欢迎访问 Compose 学习计划,了解包括 新增的 Codelab 和扩展文档的更多 Compose 资源。

自我们 去年 开源 Jetpack Compose 以来,众多开发者为我们提供了宝贵反馈,使我们有了今天的成就,感谢大家!

我们还在提升 API 的稳定性和优化性能,因此目前还不建议您将 Compose 完全投入到生产环境中。但我们希望大家可以试用并向我们 分享反馈。您也可以加入 Kotlin Slack 的 #compose 频道或在微信留言区与我们讨论。Compose 1.0 预期将在 2021 年发布。

作者:Google产品总监 Karen Ng

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350