查看原文
其他

Jetpack Compose 与 Material You 常见问题解答

Android Android 开发者 2022-08-21

我们近期发布了一些关于 Material You 的文章:


我们在社区中收集到了相关的问题,整理成本篇与 Material You 相关的常见问题和解答分享给大家。


问: 如何为较早 Android 版本上的应用进行设计?


答: 对于这个问题有两种常见的观点: 一个是将 Material You 的设计移植到旧平台,另一个则是让应用继续使用旧版本的 Material 主题。


在您做出选择之前一定要明确,在 Android 12 及以后版本的设备上,您需要迁移到 Material Design 3 主题才能够使用动态颜色。因此我们建议您创建自定义主题,这样一来当动态颜色不可用时,您的应用仍然能够用上理想的色彩搭配,您可以使用我们开发的 Material Theme Builder 工具来辅助主题自定义。


如需了解更多,请参阅:


问: Jetpack Compose 是否兼容使用视图绑定的应用?


答: 我们可以从几个方面来解读这个问题。假如您想在 Jetpack Compose 中使用视图绑定,那么答案是做不到。这是由于我们使用视图绑定就是为了避免调用 findViewById 之类的方法,但 Compose 当中并不存在这种调用,这是在软件架构层面就已经决定的特性。

不过假如您想要在应用的不同组件上分别使用这两种方法,然后在一部分组件使用 XML 布局和视图绑定的既有情况下,逐渐迁移为全面使用 Compose,这样是可行的。可以肯定的是,这种增量迁移的方法对于想要转向 Compose 的开发者来说非常实用。

另外,考虑到大量的开发者仍然在使用数据绑定而非视图绑定,这些开发者还可以考虑 Compose 互操作 (Compose Interop)。Cuvva 团队已经在实际开发中验证过几次,并且之前与 Compose Compiler Plugin 的软件冲突也都已经解决,所以您可以放心使用。如果您在使用中发现问题,请向我们提交错误报告。

如需了解更多,请参阅:


问: Jetpack Compose 中对动画的支持如何?


答: 我们既不想限制设计师的创造力,也不希望给设计师们虚无的期待。我们重新思考和设计了使用 Compose 制作动画的方式,所以 Compose 提供了一组非常强大的完整动画 API。于是此前一些难以实现的设计都可以用 Compose 轻松实现了,只剩下比如元素过渡一类的 API 尚在努力完善中。就目前的进度来看,元素过渡 API 暂时还没有达到生产使用的稳定阶段。

Lottie 团队的工程师们已经实现了对 Compose 的支持,有很多非常实用的新动画 API 即将发布。不过我们了解到共享元素过渡这个功能还在实现中,差不多在下一个版本才能发布。我们需要深刻思考如何在底层正确实现这些功能,同时也促使我们反思运行时的某些运行机制。我们已经在一些底层运行时 API 上进行了一些尝试,全力支持像共享元素过渡这样功能的实现。此外,社区也为集成 Lottie 和 Compose 贡献了很多力量,目前应该已经处于可用状态。我们相信很多此前您认为视图系统中不可能实现的功能,如今都变成了可能,值得您重新考虑。

如果您发现现有的动画 API 和原语集不能实现您的创造性设计,请一定向我们分享您的建议。我们非常想了解设计师和开发者们无穷无尽的好点子,而我们的目标也正是让 API 能够在保持易用的同时,也能灵活实现大家的想法。

如需了解更多,请参阅:


问: 调试重组 (Recomposition) 的最佳实践是什么?


答: 一些开发者关心调试重组的最佳方式是什么,多久重组一次以及导致重组的原因,其实这也是我们一直在思考的问题。毫无疑问这是我们一直尽力去改善和提升的开发者工具中的一环,虽然目前我们取得了一些进展,但暂时还没有准备好向开发者们发布。

开发者们发现,在组合构建期间或在 Compose 的另一个阶段中,被读取的 State 对象上的状态发生突变是引发重组的一个主要因素。有时您甚至都没有意识到这种状态突变已经发生。所以有这样一个工具来调试重组,势必能给开发者们提供巨大便利。当前,我们建议开发者们使用现有的一些工具,比如 Kotlin 调试器,甚至是 printLine 函数或是 Android 的日志记录系统。不过,我们也在努力探索这个方向,希望在不远的将来为开发者带来全新的工具以解决这个问题。

同时也有一些开发者表达了疑虑: 我们是否在重组的问题上考虑太多了?这个问题不能一概而论,比如当您的应用遇到严重的性能问题,如果这与重组有关,那么您就应该仔细研究重组过程是否正确。在设计 Compose 之初,我们希望开发者不要觉得它神奇,而是认为它直观和易用。您可以使用一种简单思维模型,也就是每当发生状态读取时,就沿着代码层次往上看,离得最近的可组合函数就可能发生重组。但实际上不完全是这样,因为编译器可能会进行一些微优化。一般来说,您按照简单思维模型编写的代码就应该会那样工作,执行时会产生相同的效果。对于大部分开发者而言,这种思维模型会成为很好的代码行为分析指南。不过当您对系统的运行原理足够了解时,您编写的代码相对也会有更好的性能表现。不过我们建议您只有在应用对性能敏感时才去关注代码对性能的影响。其实大部分的开发者都不是这方面的专家,所以如果我们能弄清楚如何正确使用组合调试工具,那就能够向我们期望在 Compose 中达成的目标又迈进了一步。

Compose 是一种易于学习和上手的工具,但仍需要您不断地学习和进步,毕竟没有人能从零开始写出完美的代码。我们也意识到,目前缺少的正是一种能真正帮助用户学习的工具。从设计 Compose 之初我们就有一个首要原则,那就是我们希望您顺其自然编写的代码便是最好的代码。显然我们无法一直这样,但我们不希望开发者们绞尽脑汁去编写一些性能稍有提升的代码。因此我们向开发者分享了一些常见的代码模式,架构简洁,同时性能较好。如果您认为某个常见模式的代码编写的很好,但性能偏低,那么其中可能发生了错误,或者您可以将其标记为需要更多考虑或优化的模式。

如需了解更多,请参阅:

  • 测试 Compose 布局

    https://developer.android.google.cn/jetpack/compose/testing


问: Compose 是否提供 MotionLayout 的功能?


答: 我们了解到很多开发者都依赖 MotionLayout,如果您也是其中一分子,相信您也很关心 Jetpack Compose 是否可以提供相似的功能,或者如何从 MotionLayout 迁移到 Compose。事实上我们几乎是同时开发 MotionLayout 和 Compose 的,并且两者仍然在并行发展中。


对比两者,Compose 提供了几乎 "开箱即用" 的动画支持。随着开发者们的呼声越来越大,我们向 Compose 中添加了 ConstraintLayout。再看 MotionLayout,我们没有试图用 Compose 填补什么巨大的功能缺口,因为 MotionLayout 同样提供了强大的动画支持。ConstraintLayout 和 MotionLayout 都弥补了视图系统中的某些限制,但这些限制其实在 Compose 中并不存在。


  • MotionLayout
    https://developer.android.google.cn/training/constraint-layout/motionlayout

  • ConstraintLayout
    https://developer.android.google.cn/reference/androidx/constraintlayout/widget/ConstraintLayout


问: 原有的品牌颜色会被 Material You 覆盖吗?


答: 一些企业开发者会关注自己的品牌颜色是否会被 Material You 的动态颜色特性所覆盖。Material 3 的设计理念是希望根据用户自己的壁纸进行个性化配置,但我们也希望尊重那些具有强烈品牌颜色或是想要保护颜色的开发者。所以您可以放心,您的品牌色不会被 Material You 覆盖,在开发中有这样几种情况: 如果您使用了 Material 3 库中的 Material Theming,您可以主动选择使用动态配色。如果您的用户使用了 Android 12,而我们的配色方案中恰好有可以与您的品牌色映射的色槽,您可以显式声明使用它们,这种显式声明是不会被 Material You 所覆盖的。所以我们鼓励您在 Android 12 中使用动态配色,您对于挑选具体的色彩方案具有绝对的选择权。


正如我们对前面一个问题的解答,在大多数情况下,您需要提供备选配色方案,因为动态颜色只有 Android 12 及以后版本的设备才能使用。或许将您的品牌配色作为备选色是一个不错的方案。这里要再次向您推荐 Material Theme Builder 工具,因为 Material 3 库中的 ColorScheme 类会对 Material 3 的配色方案建模。这个类提供了约 26 个参数来模拟所有的颜色槽,如此可观的数量给了设计很大的灵活性。您可能会觉得一开始要将品牌颜色映射到这些颜色槽里面会令人不知所措,或是被巨大的工作量困扰,那么您可以将主要品牌色输入 Material Theme Builder 工具,由它对色彩进行混合、协调、搭配,这样就得到了看起来很 Material You 却又很符合您的品牌色的色彩组合。您甚至可以找到这个工具的一款 Figma 插件,设计师可以从设计端进行颜色配制,然后给您提供准确的 Compose 和 Android XML 代码,从而减少您的工作量。ColorScheme 类额外的颜色槽还可以支持您配置一个相当复杂、灵活的企业品牌色方案。


如需了解更多,请参阅:


问: Material 3 里面的高度概念是怎样的?


答: 在 Material 3 中,高度 (elevation) 有了全新的含义和实现。我们从一个扩展的角度来解读 Material 3 中的高度,其中既有 Material Design 2 中的阴影高度,也涵盖了一个比 Material 3 之前所有的高度范围稍窄的定义。现在我们更愿意将高度称之为分离应用中不同容器的方法,这是通过色深变化来实现的。基本上,提升容器的高度就意味着增加其色深,从而使其更加突出。您在使用 Android 12 系统时,只要使用了基于 Material You 和 Material 3 的应用,就应该会注意到这一点。

其实 Material 3 中的高度并不是一个突然出现的新概念,我们在上一版本 Material 的基础上进行了扩展。您可能熟悉深色主题背景中的高度叠加,我们采用了这些功能并进行了系统地扩展。因此,这种效果同时应用于深色、浅色主题背景和动态主题背景,它创造了一种有趣的视觉体验并柔化了对应元素的过渡关系。当您提升颜色填充变化时,可以关注顶部应用栏的显著变化。这不仅是通过对比实现无障碍访问,而且对所有人而言都是一种非常舒服的视觉反馈。至于具体的实现方面,您会熟悉它作为 Surface 可组合项的一部分,有两个不同的选项供您配置: 色调高度和阴影高度。

如需了解更多,请参阅:


问: Jetpack Compose 是否有可用的截图测试 API?


答: 实际上在我们内部是有屏幕截图测试的。我们正与 AndroidX Test 团队针对 AndroidX Test 库的更多细节深度合作。屏幕截图测试往往与 CI/CD 的内容密切相关,但目前我们尚未开发完成,因此暂时无法为您提供足够的帮助,我们会在这个库开发完成后发布给广大开发者。

当前也有一些社区产品供您选择。比如一个叫 Snap 的库可以进行 Compose 的快照测试,它内建于 Facebook 库,并且已经发布有一段时间了。另外还有来自 Cash App 团队的 Paparazzi 也支持快照测试,目前暂时还不支持 Compose 但应该已经在规划中了。对于这方面感兴趣的开发者还是有一些选择的,越来越多的开发者也开始关注这方面的进展。

问: Compose 近期会提供布局管理器吗?


答: 如果您关注了最新的 Compose 进展,会发现我们其实正在开发中。我们首先构建了 LazyColumn,并准备将其中的 Lazy 特性推广开来,构建更多复杂布局,从而避免重做我们在开发 LazyColumn 时进行的大量性能优化。希望您持续关注我们的最新进展或 Alpha 版本,相信您很快就能看到它们了。

如需了解更多,请参阅:

  • Jetpack Compose 历史版本
    https://developer.android.google.cn/jetpack/androidx/releases/compose

  • LazyColumn
    https://developer.android.google.cn/jetpack/compose/lists


问: 如何在 Jetpack Compose 中支持键盘以实现焦点和无障碍访问?


答: 我们在这方面做了大量的工作,这是 1.1 Beta 版本中最大的特性之一。我们在键盘、鼠标和焦点方面做了大量工作,您会发现它已经内置到系统中了,并且您还可以找到新的焦点 API 的文档。我们希望您在使用中能将发现的问题都反馈给我们,非常感谢您的帮助!如果您正在使用 1.1 版本,并且发现了某些不适合您用例的问题,也欢迎反馈给我们。


  • 焦点 API 的文档

    https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/focus/package-summary


问: Color.kt 是否可以取代 themes.xml?


答: 我们认为 themes.xml 仍然具有一席之地,您仍然需要定义 Manifest 颜色,以及定义状态栏颜色。Compose 目前并不是一个全能的产品,它在 Activity 中运行,因此您仍然需要保留 themes.xml,至少当您需要配置位于应用之上的遮罩时,您依然需要使用 themes.xml,因为我们还没来得及将其整合进 Compose。

由于现在的大部分应用都在进行互操作,这些应用包含了大量的视图并且逐渐开始使用 Compose。为此我们构建了 Material Theme Adapter 帮助您迁移 XML 中的主题背景,并在运行时导入到 Compose 中使用这些颜色。但这个过程反过来是行不通的,因为 Android 的主题系统是在编译时构建的,我们无法在编译时获得 Compose 在运行时才能生成的颜色并传递到视图系统中。简单说来,只要应用仍然有视图,就必须保留 XML 颜色和 XML 主题背景作为数据源。


  • Material Theme Adapter
    https://material-components.github.io/material-components-android-compose-theme-adapter/


问: 用户直接在 Compose 中引用 XML 颜色定义是否正确?


答: 我们认为,只要在视图系统和 Compose 中都使用了某种颜色,您就有必要在 XML 中保留对应的数据源。直接使用 Compose 的 API 去引用它们就好。还是那个观点,只要您使用了视图系统,就建议您这样做。


如需了解更多,请参阅:
  • 样式和主题背景
    https://developer.android.google.cn/guide/topics/ui/look-and-feel/themes


问: 还有哪些结合 Android 12 和动态颜色的最佳实践?


答: 我们在这里向您推荐 Material Theme Builder 工具。您可以创建自定义配色方案,在工具中查看壁纸的展示样式。我们为开发者和设计师们提供了很多实用资源,包括您何时该使用动态配色方案、何时会出现不兼容、何时您应该使用自己的品牌颜色。特别向您推荐如何将动态配色集成到您的品牌色的文章: 借助 Material You 动态配色丰富您的应用

如需了解更多,请参阅:
  • 实战 | 在应用中使用 Compose Material 3

  • Material Theme Builder 工具
    https://material-foundation.github.io/material-theme-builder/

  • Material Design 3 中的动态颜色
    https://m3.material.io/styles/color/dynamic-color/overview


问: 如今有哪些基于 Material You 的组件?


答: 我们首先引入的就是基础的浅色和深色配色方案以及排版方面的组件。为此我们更新了众多组件,比如前面问题提到的顶部应用栏就是其中之一,它很好地展示了色调表面高度变化的样式。另外,这只是早期版本的 Material You,未来您可以看到更多更丰富的组件,我们也欢迎您提供反馈。

如需了解更多,请参阅:

  • 完整组件列表
    https://m3.material.io


您可以通过下方二维码或在文章底部私信,向我们提交反馈,分享您喜欢的内容、发现的问题。您的反馈对我们非常重要,感谢您的支持!



推荐阅读

如页面未加载,请刷新重试

 点击屏末 | 阅读原文 | 即刻了解 Compose 中的 Material 主题设置




您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存