Material Design - 将卡片扩展（过渡）到全屏

Posted 2023-02-22

【中文标题】Material Design - 将卡片扩展（过渡）到全屏

【英文标题】：Material Design - Expanding (Transition) a Card to full screen

【发布时间】：2019-04-23 23:13:27

【问题描述】：

我正在努力实现 Material Design for android 描述的卡片视图的展开功能。

在他们的设计指南中，他们展示了 Card 组件的不同布局，但有一个示例显示了 card 转换为全屏 onClick。

这是他们网站上显示的过渡： 我已经尝试过实现这样的功能，但它需要的工作比他们的指南示例所建议的要多得多……Material Design 如何实现这一点？是否有一个内置功能，我应该手动翻译并调整卡片以适应屏幕，还是应该使用全新的片段或活动来获得完整的卡片视图？

这里是 Design 指南，其中包含该示例，但没有提及过渡，在记录的 Develop 页面上也没有，这确实是最小的。

【问题讨论】：

查找共享元素过渡

嘿 Nikhil，感谢您的评论，似乎共享过渡可以完成这项工作，但仍然感觉很糟糕 Material Design 没有提及任何关于此的内容。我不是 Material/Android 的老手，所以我错误地认为 Material Design 应该描述如何实现这一点，或者至少在他们的指南中提到它？

我认为他们没有提供实现细节。人们如何实施它不是他们关心的问题，因为这些准则可以在任何地方使用。

【参考方案1】：

TL;DR

对于您上面附加的 gif 图像，RecyclerView 和详细的CardView 应该有自己独立的Fragments，它们在一个Activity 中操作。

跳转到动画部分末尾的链接。

详情

为什么会这样？好吧，我们有三个选择：

将两个视图保留在一个 Activity 中，并在点击事件时将详细的 CardView 重叠在 RecyclerView 之上。 （这很愚蠢，不是一个好习惯）

为两个视图创建单独的活动（回收器和全屏卡）

我上面提到的那个。

RecyclerView and Detailed View shown as two separate Fragments

现在不选择第 2 个选项的原因是因为与第 3 个选项相比，它对性能的要求更高。我们可能不会在小规模的应用程序中注意到这一点，但它肯定会在应用程序扩展时产生影响。另外，创建片段更有效，因为我们在视图之间共享公共视图和变量。所以最好的选择是三号。 请注意，这不是通用情况，用法会根据您的要求而有所不同。

---

起初使用 Fragments 可能会让人不知所措，但当您掌握它时，它会使代码更有条理。您应该尽量将您的应用分成几个广泛划分的活动，并且在这些活动中应该有尽可能多的片段。

这里有一些链接帮助我实现了您正在寻找的完全相同的东西。

MDC: Material Motion Implementing Motion with MM Building Transitions with MM Hands-on experience in Codelab

他们三个都帮助我更好地了解了整个 Material Motion 框架的工作原理以及如何在我的程序中实现它。