首页天道酬勤material girl吧(material girl贵吗)

material girl吧(material girl贵吗)

admin 12-21 11:51 273次浏览

最新发布的材质动态系统是MDC-Android库(v 1.2.0 )的一部分,将常用的迁移效果总结为简单的模型,提供更流畅、更易懂的用户体验。 材质效果目前包括4个过渡效果:

容器转换(Container transform )共享轴) Shared axis (淡入淡出) Fade )我们已经在Android平台和AndroidX迁移系统上实现了上述迁移效果,从而实现了Activity

本文介绍了上述各种模式,并介绍了如何将这些模式应用于APP。 每个步骤都将通过使用示例APP reply (易于使用的邮件客户端)实现相应的效果来说明。 reply APP的三个操作流程使用这些过渡效果:打开邮件、打开搜索页面和切换邮箱。

如果您不满意精彩的介绍,并且想深入挖掘源代码,请参见materialdynamicCodelab。 请按照步骤很好地实践这项技术。 codelab还提供了有关在安卓上使用这些过渡效果的附加信息。

容器转换: 打开邮件

容器变换是变换的主角,容器变换用于将一个元素变换为另一个元素。 什么意思? 例如,示例列表展开为详细页面,FAB变形为工具栏,chip扩展为浮动卡。 在每个场景中,一个组件转换为另一个组件,并在保持共享的“外部”容器的同时通过动画切换“内部”的内容。 通过使用容器变换实现视图之间的动画切换,可以加强视图之间的联系,并维护用户的导航上下文。

在Reply示例中,我们在表示邮件列表的“主页”(fragment )和邮件详细信息fragment )之间添加了容器转换。 如果您熟悉安卓共享元素的过渡,则与容器的过渡设置非常相似。

首先,确定两个共享元素的视图,并向每个视图添加过渡名称。 第一个是单个邮件列表条目的卡,使用数据绑定来确保每个列表条目具有唯一的过渡名称。

Android :翻译名称=' @ { @ string /电子邮件_卡片翻译名称(电子邮件id ) } '第二个是电子邮件框架内部的全屏

这两个视图被我们的容器转换使用。 工作原理是:它们都放在一个drawable内部,这个drawable的边界被剪切成“容器”,“容器”通过动画将自己的形状从一个列表项目转换成详细的信息页面。 迁移过程中,运入页淡入运出画面,从而更换了集装箱的内容(列表项目和详细页面)。

现在,我们标记了共享元素的视图。 然后,为目标Fragment创建sharedElementEnterTransition,并将其设置为MaterialContainerTransform的实例。 默认情况下,当您返回详细信息页面时,此sharedElementEnterTransition将自动翻转和播放。

sharedelemententertransition=materialcontainertransform ().apply{

//drawingViewId是视图的id,在此基础上容器变换在z轴空间进行

图形查看器=r.id.nav _主机_标志

duration=资源. get integer (r.integer .复制_运动_持续时间_语言).toLong ) )

//我们也想用动画将列表页面转换为视图,所以将scrimColor设定为透明

条纹颜色=颜色.透明

setAllContaine

rColors(requireContext().themeColor(R.attr.colorSurface)) }

有关 MaterialContainerTransform 参数的详细信息,请参阅 动效文档

当一封邮件被点击时,我们所有需要做的就是为 Fragment 事务提供开始视图和结束视图过渡名称之间的映射。有了这些信息,邮箱详情 Fragment 共享元素过渡就可以使用我们提供的 MaterialContinaerTransform 找到并在两个视图之间进行动画切换。

override fun onEmailClicked(cardView: View, email: Email) {      exitTransition = MaterialElevationScale(false).apply {          duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()      }      reenterTransition = MaterialElevationScale(true).apply {            duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()      }      val emailCardDetailTransitionName = getString(R.string.email_card_detail_transition_name)      val extras = FragmentNavigatorExtras(cardView to emailCardDetailTransitionName)      val directions = HomeFragmentDirections.actionHomeFragmentToEmailFragment(email.id)      findNavController().navigate(directions, extras)  }

在上面的代码片段中,我们也为传出页邮件 列表 Fragment 设置了 exit 和 reenter 的过渡效果。Material 组件提供了两个过渡辅助: Hold 和 MaterialElevationScale,以平滑地为将要被替换的 Fragment 设置动画。除了褪色 (Fade),MaterialElevationScale 还会在邮件列表页退出时,对其进行缩放,并在重新进入邮件列表时缩放回来。Hold 仅仅是简单地保留邮件列表。如果没有设置退出时的过渡,我们的邮件列表会被立刻删除并从视图中消失。

如果我们在这个时候运行代码,从详情页导航返回到邮件列表页,则返回过渡不会执行。这是因为当过渡开始时,邮件列表的适配器还未被填充,过渡系统找不到与过渡名称对应的两个视图。幸运的是,有两个简单方法可供我们使用: postponeEnterTransition 和 startPostponedEnterTransition。这两个方法允许我们延迟过渡,直到我们知道我们的共享元素已经被布局,并且可以被过渡系统发现。在 Reply 应用中,我们可以使用以下代码延迟过渡,直到我们确定 RecyclerView 适配器已被填充,列表项已和过渡名称绑定:

postponeEnterTransition() view.doOnPreDraw { startPostponedEnterTransition() }

在您自己的应用中,您可能需要尝试这两种方法,以根据您填充 UI 的方式和时间,来找到合适的时间开始延迟过渡。如果您发现您的返回动画没有执行,可能是在共享元素就绪之前开始了过渡。

接下来进入我们的搜索页面。

共享轴: 打开搜索页面

共享轴模式用于有空间和导航关系的 UI 元素之间的过渡。在 Reply 应用中,打开搜索页面会将用户带到邮件列表顶部的新页面。为了介绍这个三维模型,我们可以在邮件列表 (HomeFragment) 和搜索页面 (SearchFragment) 之间使用共享 z 轴过渡。

共享轴过渡会在操作两个目标的同时创建最终的、编排过的过渡效果。这意味着 "成对" 的过渡会一起运行去创建连续的定向的动画。对 Fragment 来说,这成对的过渡包括:

FragmentA 的 exitTransition 和 FragmentB 的 enterTransitionFragmentA 的 reenterTransition 和 FragmentB 的 returnTransition

MaterialSharedAxis 是实现了共享轴模式的类,它接收 forward 属性来控制方向性的概念。在每一个过渡配对中,forward 必须被设置为相同的值,以便正确地协调这对动画。

如需了解更多关于共享轴方向性的详细信息,请查阅 动效文档。

在 Reply 应用中,这是我们为当前的 Fragment (HomeFragment) 建立退出和重入过渡的方法。

currentNavigationFragment?.apply {    exitTransition = MaterialSharedAxis(       MaterialSharedAxis.Z,        /* forward= */ true    ).apply {       duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()    }    reenterTransition = MaterialSharedAxis(       MaterialSharedAxis.Z,        /* forward= */ false    ).apply {        duration =resources.getInteger(R.integer.reply_motion_duration_large).toLong()    } }

在我们目的 fragment (SearchFragment) 中,我们建立进入和返回的过渡。

enterTransition = MaterialSharedAxis(    MaterialSharedAxis.Z,     /* forward= */ true ).apply {    duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong() } returnTransition = MaterialSharedAxis(    MaterialSharedAxis.Z,     /* forward= */ false ).apply {    duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong() }

注意: 当前 Fragment 的退出过渡和搜索 Fragment 的进入过渡使用相同的 forward 值 - true,当前 Fragment 的重入过渡和搜索 Fragment 的返回过渡也是如此。

接下来,默认情况下,过渡会在场景根层次结构内的所有子视图上运行,这意味着一个共享轴过渡会应用于邮件列表上的每一封邮件以及搜索页面的每一个子视图。如果您想要 "传播" 或者 "错开" 动画,这是一个非常好的功能,但是由于我们需要对每个 Fragment 的根作为整体进行动画处理,我们需要在 邮件列表的 RecyclerView 和我们的 搜索页面的根 view group 设置 android:transitionGroup="true"。

这样,我们就在进出搜索页面时有了一个漂亮的共享 z 轴过渡!共享轴是一个非常灵活的过渡,可以应用于许多不同的场景,从页面过渡到智能回复选择,再到进入或者垂直的步骤流程。您已经配置好了设置,还可以尝试使用 MaterialSharedAxis 的 axis 参数来了解其他轴动画是什么样子。

淡入淡出: 切换邮箱

我们要介绍的最后一个模式是淡入淡出模式。淡入淡出可用于在没有强关系的 UI 元素间过渡。当在两个信箱之间过渡时,我们不希望用户认为他们已经发送的邮件和他们的收件箱在导航上相关。由于每个信箱是一个顶级的目的地,淡入淡出是一个合适的选择。在 Reply 应用中,我们将用不同的电子邮件列表 (带有新参数的 HomeFragment) 替换电子邮件列表 (HomeFragment)。

由于 MaterialFadeThrough 没有方向性,所以设置起来更加简单。我们只需要为传出 Fragment 设置一个退出过渡,为传入 Fragment 设置一个进入过渡。

currentNavigationFragment?.apply {    exitTransition = MaterialFadeThrough().apply {        duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()    } }enterTransition = MaterialFadeThrough().apply {    duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong() }}

在 邮件列表的 RecyclerView 上设置 android:transitionGroup="true" 的需求同样适用于这里,但是我们已经在共享轴配置的步骤中解决了这个问题。

以上就是淡入淡出过渡!您可以在自己项目有趣的地方来使用淡入淡出模式,比如: 底部导航栏的切换、列表项的交换,或替换一个工具栏菜单。

一往无前!

本文简要介绍了 Android 的 Material 动效系统。通过使用该系统所提供的模式,您可以在自定义动效时,做很多事情,使动效成为品牌体验的一部分。本文我们看到了 Fragment 的过渡,但动效系统也可用于 Activity 甚至 View 间的过渡。查看完整的 动效规范 文档,获得更多启发,以便思考哪些地方可提高您应用的核心体验,或在一些小的地方增加额外的乐趣。

继续学习,请查看以下其他资源:

Material 动效开发文档: 您可以在 Material Android 动效文档找到许多关于在 Activity 和 View 之间进行动画的自定义选项和建议。Material 动效 Codelab: 一个完整的分步的开发者教程,内容涉及如何在 Reply 应用中添加 Material 动效。Android Google 云盘: 您可以在 Android Google 云盘应用中看到正在运行的动效系统。点击文件夹、打开搜索、在底部导航间切换,这些都用到了 MDC-Android 的过渡效果。
基于C语言自制华容道游戏怎么实现Java设计模式之原型模式怎么实现Java下载远程服务器文件到本地(基于http协议和ssh2协议)Java算法练习题IDEA取消SVN关联用Python编辑现有PDF页面
磁力传感器滤波(传感器滤波) 不听不听乌龟念经小说百度云(南无香云)
相关内容