Android Material Motion 过渡模式使用总结-程序员宅基地

技术标签： container  materialdesign  android  

写在前面

本文是对 Material Motion过渡模式的使用进行总结, 适用于已经明白过渡模式的使用但忘记具体代码实现的开发者. 本文用例基于 androidx 和 kotlin . 详细完整教程请查阅: material-motion-android.

一. 简介

material-motion-android 是MDC-Android库中的一组过渡模式; 其中主要包含四种过渡模式:

  1. Container Transform : 包含 container 的UI元素之间的转换 在两个不同的UI元素之间创建可见连接, 使一个UI元素无缝过渡到另一个UI元素.
  2. Shared Axis : 具有空间或导航关系的UI元素之间的过渡; 在x, y或z轴上使用共享变换来加强元素之间的关系.
  3. Fade Through : 在彼此之间没有密切关系的UI元素之间进行过渡; 使用顺序淡入和淡入, 以及传入元素的比例.
  4. Fade : 用于在屏幕范围内进入或退出的UI元素.

MDC-Android库在AndroidX Transition库（androidx.transition）和 Android Transition Framework（android.transition）的基础上，为这些模式提供了转换类 ：

  • AndroidX (androidx.transition)

    1. 在 com.google.android.material.transition 包下;
    2. 支持API14及以上;
    3. 支持 Fragments 和 Views , 不支持 Activityies 和 Windows ;
    4. 包含反向移植的错误修复程序和跨API级别的一致行为;
    5. 依赖: implementation 'com.google.android.material:material:1.2.1'

  • Framework (android.transition)

    1. 在 com.google.android.material.transition.platform 包下;
    2. 支持API21及以上;
    3. 支持 Fragments | Views | Activityies | Windows ;
    4. 错误修复未向后移植, 并且在各个API级别上可能具有不同的行为;

本文使用 AndroidX Transition 库; Fragments 由 navigation 库导航.

二. Container Transform 过渡模式
  1. 核心类 MaterialContainerTransform ;
  2. 本用例为跳转的目标Fragment中包含 Container
    1. 通过 transitionName 标记, 使过渡系统在不同布局获取两个控件;
      1. 在API 21以上可以直接使用 android:transitionName ;
      2. 如果支持API 21 以下使用 ViewCompat#setTransitionName 方法;
      3. 对于 RecyclerView 中的 item 布局中的控件, transitionName 不能相同;
    2. 点击 RecyclerView item 跳转 Fragment
      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)
    3. 在要跳转的 Fragment 的 onCreate 中添加 sharedElementEnterTransition (Fragmen.setSharedElementEnterTransition()) ,完成这一步便实现了跳转新 Fragment的过渡
      sharedElementEnterTransition = MaterialContainerTransform().apply {
       
           
    drawingViewId = R.id.nav_host_fragment   
    duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()     
    scrimColor = Color.TRANSPARENT      
    setAllContainerColors(requireContext().themeColor
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012868011/article/details/110480733

智能推荐

计算机丢失concrt140,小编教你解决concrt140 dll 【解决教程】 的技巧_-程序员宅基地

文章浏览阅读4.5w次。近日有小伙伴发现电脑出现问题了，在突然遇到concrt140 dll时不知所措了，对于concrt140 dll带来的问题，其实很好解决concrt140 dll带来的问题，下面小编跟大家介绍concrt140 dll解决方法：丢失CONCRT140.dll，怎么办？答：分析及解决：网上下载这个DLL文件，将其放置到system32目录下面。 重启系统，或者在CMD下面运行regsvr32*.dl..._concrt140.dll下载教程

微信小程序源码案例大全_微信小程序switch页面demo-程序员宅基地

文章浏览阅读4.3k次，点赞4次，收藏62次。微信小程序demo：足球，赛事分析 小程序简易导航 小程序demo：办公审批 小程序Demo：电魔方 小程序demo：借阅伴侣 微信小程序demo：投票 微信小程序demo：健康生活 小程序demo：文章列表demo 微商城（含微信小程序）完整源码+配置指南 微信小程序Demo：一个简单的工作系统 微信小程序Demo：用于聚会的小程序 微信小程序Demo：Growth 是一款..._微信小程序switch页面demo

SLAM学习笔记(Code2)----刚体运动、Eigen库_eigen.determinant-程序员宅基地

文章浏览阅读2.2k次。2.1除了#include<iostream>之外的头文件#include <Eigen/Core>//Core:核心#include <Eigen/Dense>//求矩阵的逆、特征值、行列式等#include <Eigen/Geometry>//Eigen的几何模块，可以利用矩阵完成如旋转、平移/***其他***/#include <ctime>//可用于计时，比较哪个程序更快#include <cmath>//包含a_eigen.determinant

图像梯度-sobel算子-程序员宅基地

文章浏览阅读1w次，点赞12次，收藏61次。（1）理论部分x 水平方向的梯度， 其实也就是右边 - 左边，有的权重为1，有的为2 。若是计算出来的值很大 说明是一个边界 。y 竖直方向的梯度，其实也就是下面减上面，权重1，或2 。若是计算出来的值很大 说明是一个边界 。图像的梯度为：有时简化为：即：（2）程序部分函数：Sobelddepth 通常取 -1，但是会导致结果溢出，检测不出边缘，故使..._sobel算子

cuda10.1和cudnn7.6.5百度网盘下载链接（Linux版）_cudnn7.6网盘下载-程序员宅基地

文章浏览阅读3.6k次，点赞17次，收藏8次。cuda10.1和cudnn7.6.5百度网盘下载链接（Linux版）在官网下载不仅慢，，，主要是还总失败。。终于下载成功了，这里给出百度网盘下载链接，希望可以帮到别人百度网盘下载链接提取码: vyg5_cudnn7.6网盘下载

Python正则表达式大全-程序员宅基地

文章浏览阅读9.3w次，点赞69次，收藏427次。定义：正则表达式是对字符串（包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”））操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式是一种文本模式，该模式描述在搜索文本时要匹配的一个或多个字符串。上面都是官方的说明，我自己的理解是（仅供参考）：通过事先规定好一些特殊字符的匹配规则，然后利用这些字符进行组合来匹配各种复杂的字符串场景。比如现在的爬虫和数据分析，字符串校验等等都需要用_python正则表达式

随便推点

NILM（非侵入式电力负荷监测）学习笔记 —— 准备工作（一）配置环境NILMTK Toolkit_nilmtk学习-程序员宅基地

文章浏览阅读1.9w次，点赞27次，收藏122次。安装Anaconda，Python，pycharm我另一篇文章里面有介绍https://blog.csdn.net/wwb1990/article/details/103883775安装NILMTK有了上面的环境，接下来进入正题。NILMTK官网：http://nilmtk.github.io/因为官方安装流程是基于linux的（官方安装流程），我这里提供windows..._nilmtk学习

k8s-pod 控制器-程序员宅基地

文章浏览阅读826次，点赞20次，收藏28次。如果实际 Pod 数量比指定的多那就结束掉多余的，如果实际数量比指定的少就新启动一些Pod，当 Pod 失败、被删除或者挂掉后，RC 都会去自动创建新的 Pod 来保证副本数量，所以即使只有一个 Pod，我们也应该使用 RC 来管理我们的 Pod。label 与 selector 配合，可以实现对象的“关联”，“Pod 控制器” 与 Pod 是相关联的 —— “Pod 控制器”依赖于 Pod，可以给 Pod 设置 label，然后给“控制器”设置对应的 selector，这就实现了对象的关联。

相关工具设置-程序员宅基地

文章浏览阅读57次。1. ultraEdit设置禁止自动更新： 菜单栏：高级->配置->应用程序布局->其他 取消勾选“自动检查更新”2.xshell 传输文件中设置编码，防止乱码： 文件 -- 属性 -- 选项 -- 连接 -- 使用UTF-8编码3.乱码修改：修改tomcat下配置中，修改： <Connector connectionTimeou..._高级-配置-应用程序布局

ico引入方法_arco的ico怎么导入-程序员宅基地

文章浏览阅读1.2k次。打开下面的网站后，挑选要使用的，https://icomoon.io/app/#/select/image下载后 解压 ，先把fonts里面的文件复制到项目fonts文件夹中去，然后打开其中的style.css文件找到类似下面的代码@font-face {font-family: ‘icomoon’;src: url(’…/fonts/icomoon.eot?r069d6’);s..._arco的ico怎么导入

Microsoft Visual Studio 2010（VS2010）正式版 CDKEY_visual_studio_2010_professional key-程序员宅基地

文章浏览阅读1.9k次。Microsoft Visual Studio 2010（VS2010）正式版 CDKEY / SN：YCFHQ-9DWCY-DKV88-T2TMH-G7BHP企业版、旗舰版都适用推荐直接下载电驴资源的vs旗舰版然后安装，好用方便且省时！） MSDN VS2010 Ultimate 简体中文正式旗舰版破解版下载(附序列号) visual studio 2010正_visual_studio_2010_professional key

互联网医疗的定义及架构-程序员宅基地

文章浏览阅读3.2k次，点赞2次，收藏17次。导读：互联网医疗是指综合利用大数据、云计算等信息技术使得传统医疗产业与互联网、物联网、人工智能等技术应用紧密集合，形成诊前咨询、诊中诊疗、诊后康复保健、慢性病管理、健康预防等大健康生态深度..._线上医疗的定义

推荐文章

热门文章

相关标签