首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在使用导航组件和safeArgs从回收器视图导航到片段时,如何添加共享元素过渡?

在使用导航组件和safeArgs从回收器视图导航到片段时,可以通过以下步骤添加共享元素过渡:

  1. 首先,在源片段的布局文件中,给需要共享的元素添加一个唯一的transitionName属性。例如,如果要共享一个ImageView,可以给它添加一个transitionName属性,如android:transitionName="shared_image"。
  2. 在源片段中,使用Navigation组件的NavController实例进行导航。可以通过调用NavController的navigate()方法,并传递目标片段的ID来实现导航。例如,使用safeArgs插件生成的代码:SourceFragmentDirections.actionSourceFragmentToDestinationFragment()。
  3. 在目标片段的布局文件中,给需要共享的元素添加相同的transitionName属性。确保transitionName属性的值与源片段中的元素相同。
  4. 在目标片段的代码中,通过调用postponeEnterTransition()方法来暂停目标片段的过渡动画。
  5. 在目标片段的代码中,使用共享元素过渡的TransitionInflater来创建一个共享元素过渡对象。可以通过调用TransitionInflater.from(context).inflateTransition(android.R.transition.move)来创建一个默认的共享元素过渡对象。
  6. 在目标片段的代码中,通过调用setSharedElementEnterTransition()方法将共享元素过渡对象设置为目标片段的进入过渡动画。
  7. 在目标片段的代码中,通过调用startPostponedEnterTransition()方法来开始目标片段的过渡动画。

以下是一个示例代码:

在源片段的布局文件中:

代码语言:txt
复制
<ImageView
    android:id="@+id/shared_image"
    android:transitionName="shared_image"
    ... />

在源片段的代码中:

代码语言:txt
复制
val action = SourceFragmentDirections.actionSourceFragmentToDestinationFragment()
findNavController().navigate(action)

在目标片段的布局文件中:

代码语言:txt
复制
<ImageView
    android:id="@+id/shared_image"
    android:transitionName="shared_image"
    ... />

在目标片段的代码中:

代码语言:txt
复制
postponeEnterTransition()

val transition = TransitionInflater.from(context).inflateTransition(android.R.transition.move)
sharedElementEnterTransition = transition

startPostponedEnterTransition()

这样,当从源片段导航到目标片段时,共享元素将会有一个平滑的过渡效果。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

应用中导航使用 SafeArgs | MAD Skills

今天为大家发布本系列文章中的第三篇: 应用中导航使用 SafeArgs。...如果您想回顾过去发布的内容,请参考下面链接查看: 导航组件概览 导航对话框 这篇文章主要介绍 SafeArgs,它属于导航组件,并且可以应用不同的目的地 (界面) 之间提供更加便捷的数据传递功能。...首先,我需要添加一些依赖库。 SafeArgs 导航组件的其它模块不太一样,它本身并不是一个 API,而是一个可以生成代码的 gradle 插件。...另外需要注意的是,应用现在使用该对话框添加新的元素 (我在上一篇文章 使用导航组件: 对话框目的地 | MAD Skills 中已经介绍),同时也使用该对话框编辑已有元素。...通过这样的方式,您可以更好地利用数据封装,目的地之间仅仅传递所需的数据而无需更大的范围内暴露数据。 请继续关注我们后续的关于导航组件的内容,接下来我们会介绍如何使用 Deep Link。

1.5K20
  • 使用导航组件: 对话框目的地 | MAD Skills

    概览 本系列的 上一篇文章 中,我大致介绍了导航组件以及如何使用导航图。 在这篇文章中,我会介绍如何使用 API 来导航对话框目的地 (dialog destination)。...() 函数 (使用 Directions 对象导航) 的语法之前通过 Basic Activity 模版创建的 (导航一个通过 R.id.action_FirstFragment_to_myDialog...这是因为上述代码片段来自于 DonutTracker 应用的最终版本,该版本中我使用SafeArgs。...其次,我们 FAB 导航 (不需要传递参数给 Directions 对象) 调用 navigate() 方法甜甜圈列表中任一列表项导航 (需要传递 donut.id) 不太一样。...注意: 点击返回按钮,同样会返回甜甜圈列表,因为导航组件已经自动为我们设置好了返回栈。 总结 通过这篇文章我们了解了如何使用内置的导航组件快速地创建一个新应用,并且学习了如何导航对话框目的地。

    1.4K30

    导航组件概览 | MAD Skills

    您可能需要在每一个 UI 元素触发的导航动作代码中添加一个监听,并编写代码使之启动一个 intent 来展示一个新 activity,或者切换到一个 Fragment。...之后,您可以添加相关代码,使用应用的交互对应到合适的导航操作 (action) 上。 让我们来创建一个应用,并通过实际的工具代码来体验一下导航组件。...所以当用户点击某界面元素并需要触发导航的时候,您应该调用导航 API 使用其中一个操作来导航图中的一个目的地。 操作还可以被用来定义传入目的地的参数,以及源目的地目的地进入退出的转场动画。...工具 (Tools) 菜单启动布局检查 (Layout Inspector) 布局检查 (Layout Inspector) 让我们可以以图形化的方式查看整个应用的视图层次结构,同时我们也可以看到每一个容器及视图的属性...未来的文章和视频中,针对如何同特定导航 API 进行交互,我会介绍更多的技术细节,比如导航对话框目的地、使用 SafeArgs 以及处理深层链接。

    1.7K30

    Vue常见面试题

    Vuex状态管理:Vuex是Vue的官方状态管理库,用于多个组件之间共享状态。 $emit$on:使用$emit组件中触发自定义事件,然后使用$on组件中监听这些事件。...如何实现路由导航? 答案:Vue路由是用于构建单页应用的库,允许你通过URL路径来管理不同的视图。...创建路由视图组件中设置标签用于渲染路由组件导航使用标签或router.push()方法进行导航。 5. 什么是Vue的生命周期钩子函数?...答案:指令是带有前缀v-的特殊属性,用于模板中添加特定的行为。常见的指令有: v-bind:绑定一个或多个属性Vue实例的数据。 v-model:表单元素上实现双向数据绑定。...Vue的过渡如何工作的? 答案:Vue的过渡效果通过CSS过渡动画来实现。可以通过组件包裹元素添加过渡效果。

    20820

    一个侧边栏导航组件实现思路

    组件的,这个组件是响应式的,有状态的,支持键盘导航,可以使用使用 Javascript,并且可以跨浏览工作。...构建一个响应式导航系统是很困难的。有些用户使用键盘,有些用户使用强大的台式机,还有一些用户使用小型移动设备访问。每个访问者都应该能够打开关闭菜单。 ?...当 URL 哈希值变化的时候,观察元素 -110vw 的位置滑动到 0 的位置。...我通过: 目标更改时设置可见性转换来实现这一点。 进入时,请勿过渡可见性;立刻可见,因此我可以看到元素滑入并接受焦点。...退出,给他加一个延迟到过渡效果; 可访问性 UX 增强 链接 此解决方案依赖于更改 URL 以便管理状态。当然,这里应该使用 元素,它可以免费获得一些很好的可访问性特性。

    3.6K40

    【详解】Android Jetpack 新组件之Navigation的用法源码结构分析

    再来看看这个nav_graph的源码,创建的时候选择navigation,这就是text编辑,design视图就是个Storyborad,这个可以通过编辑左上角的+号把fragment加入进来,所有的...>>>> Navigation to a destination 要导航目的地,您可以使用下列四种方法之一: Navigation.findNavController(Activity, @IdRes...>>>> 传递数据 您可以通过两种方式目标之间传递数据:使用Bundle对象或使用safeargs Gradle插件以类型安全的方式传递数据。...safeargs的Gradle插件,它生成简单的对象构建类,以便对目标动作指定的参数进行类型安全访问。...要添加此插件,请将'androidx.navigation.safeargs'插件添加到您的build.gradle文件中。

    2.2K40

    ApacheCN 安卓译文集 20211225 更新

    十四、安卓对话框窗口 十五、数组、地图随机数 十六、适配器回收 十七、数据持久化共享化 十八、本地化 十九、动画插值 二十、绘制图形 二十一、线程启动实时绘图应用 二十二、粒子系统处理屏幕触摸...十三、让安卓小部件栩栩如生 十四、安卓对话窗口 十五、处理数据生成随机数 十六、适配器回收 十七、数据持久化共享 十八、本地化 十九、动画插值 二十、绘制图形 二十一、线程启动实时绘图应用...、临别赠言 如何使用 Kotlin 构建安卓应用 零、前言 一、创建您的第一个应用 二、构建用户屏幕流 三、用片段开发用户界面 四、构建应用导航 五、基本库:RetroFit 库、Moshi 库 Glide...库 六、回收视图 七、安卓权限谷歌地图 八、服务、工作管理通知 九、JUnit、Mockito Espresso 的单元测试集成测试 十、安卓架构组件 十一、持久化数据 十二、ButterKnife... Koin 的依赖注入 十三、RxJava 和协程 十四、架构模式 十五、使用协调布局运动布局的动画过渡 十六、 Google Play 上启动你的应用 通过构建安卓游戏学习 Java 零

    7.2K20

    Android Jetpack架构组件(五)之Navigation

    并且,纯代码的方式使用起来不是特别友好,并且Appbar管理使用的过程中显得很混乱。...相比之前Fragment的管理需要借助FragmentManagerFragmentTransaction,使用Navigation组件有如下一些优点: 可视化的页面导航图,方便我们理清页面之间的关系...DeepLink 1.2 Navigation元素 正式学习Navigation组件之前,我们需要对Navigation的主要元素有一个简单的了解,Navigation主要由三部分组成。...2.6 添加动画 Fragment之间进行跳转,还可以添加跳转的动画。...[在这里插入图片描述] 4.2 URL 使用URL链接方式,当用户通过手机浏览浏览网站上的某个页面,可以通过网页浏览的方式打开对应的应用页面。

    1.4K00

    干货!iOS 与 Android 的APP 设计差异

    Android应用中被大家熟知的导航模式是抽屉标签形式的组合。 抽屉导航其实是一个菜单,通过点击汉堡图标,然后左侧或右侧滑出。...但是安卓规范其实不建议同时使用底部导航标签,因为它可能会在导航引起混乱。 底部导航(Material Design) Apple的人机交互规范中,没有类似抽屉菜单的标准导航控件。...模态视图又有两种不同类型:具有不同操作内容的模态列表用户点击“共享”图标后显示的应用列表。iOS上也能找到类似的组件,但是设计风格布局上差异比较大。...子父级切换的例子 (Android设计规范) 父级界面上,嵌入的子元素会在点击抬起并在适当的位置展开。将过渡的重点放在子界面上,明确子父级之间的关系。...共享相同的父级界面(例如标签切换的内容)一致性的移动能够强化他们的关系。

    3.4K10

    AngularDart4.0 英雄之旅-教程-07路由 顶

    component(组件):此路由导航(HeroesComponent)将被激活的组件路由导航页面阅读更多关于定义路由的信息。...额外的元素将有助于以后的格式化样式。 共享HeroService 要填充组件的英雄列表,您可以重新使用HeroService。...刷新浏览并开始点击。 用户可以应用程序周围进行导航仪表板英雄详细信息,然后返回,英雄列表英雄详细信息,再次回到英雄。 你已经达到推动这个页面的所有导航要求。...应用程序全局样式 将样式添加组件,可以将组件需要的所有内容(HTML,CSS代码)一起放在一个方便的位置。 把它打包起来很容易,在其他地方重新使用组件。...你走过的路 以下是您在此页面中所取得的成果: 您添加了Angular路由来浏览不同的组件。 您了解了如何创建路由链接来表示导航菜单项。 您使用路由链接参数导航用户选择的英雄的细节。

    17.6K30

    vue-router 用法详解

    一个『路径参数』使用冒号 : 标记。当匹配到一个路由,参数值会被设置 this.$route.params,可以每个组件使用。...(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar(侧导航 main(主内容) 两个视图,你可以界面中拥有多个单独命名的视图,而不是只有一个单独的出口。...> # 单个路由的过渡可以各路由组件使用 并设置不同的 name。...> // 接着组件内 // watch $route 决定使用哪种过渡 watch: { '$route' (to, from) { const toDepth = to.path.split(...例如,我们 /a 导航一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b <router-link :to="{ path: 'relative/path'}"

    2.5K20

    折叠屏上应用设计规范,了解一下?

    深入理解布局 深入理解布局指南 介绍了布局容器的相关概念,它提供了一个整体框架,可帮助开发者思考如何在屏幕上排列导航栏、工具栏内容等界面元素。...△ 使用栏式网格不同屏幕尺寸中对内容进行重排 记住网格系统有助于您选择组件行为,不同的布局中,以对设备尺寸场景最有意义的方式决定替换还是更改组件。...△ 大屏上使用简单对话框 (右) 代替全屏对话框 (左) 尺寸类别 请记住,替换组件,首先要满足用户的功能性人性化需求。找到调整界面的正确阈值,这是实现响应式界面的重要步骤。...因此,每个页面都应足够灵活,而且应当能够尺寸过渡期间保持状态不变,这个时候规范布局就能发挥重要作用。针对每个页面,您可以思考一下,当屏幕尺寸变大,可以添加什么内容。...这可能意味着您需要重新审视导航图,尤其是当您目前的设计以手机为主更应如此。 如需构建响应式界面,我们应该优先考虑界面中长驻元素的位置,例如导航元素

    4.5K20

    深入浅出 NavigationUI | MAD Skills

    这是第二个关于导航 (Navigation) 的 MAD Skills 系列,如果您想回顾过去发布的内容,请参考下面链接查看: 导航组件概览 导航对话框 应用中导航使用 SafeArgs 使用深层链接导航...本文中,我们将为大家讲解另外一个用例,即类似操作栏 (Action Bar)、底部标签栏或者抽屉型导航栏之类的 UI 组件如何在应用中实现导航功能。...我需要在应用中增加一些页面,所以有必要使用抽屉式导航栏或者底部标签栏来辅助用户导航。但是我们该如何使用这些 UI 组件来集成导航功能呢?通过点击监听手动触发导航动作吗? 不需要!无需任何监听。...添加咖啡追踪 △ 工程结构 首先我将与甜甜圈相关的类文件拷贝了一份新的包下,并且将它们重命名。...基于上面所做的修改,我更新了导航图,新增了 coffeeFragment coffeeDialogFragment 以及 selectionFragment donutFragment 相关的目的页面操作

    3K30

    百亿补贴通用H5导航栏方案

    在这样的背景下,提供一个动态灵活的导航条,为产品赋能,变得尤其重要。 01 使用原生导航栏现状 今年的敏捷团队建设中,我通过Suite执行实现了一键自动化单元测试。...Juint除了Suite执行还有哪些执行呢?由此我的Runner探索之旅开始了! 拿iOS原生导航条为例,导航条作为页面进出栈的根视图连接,以及生命周期的管理。...遗憾的是原生系统导航条不能全部支持,其实无论视图层级上来说,还是导航条职责上来说,apple并不希望过多操作导航栏上的元素。也就造成了高曝光位置的资源浪费。...@pango/navigation-bar组件使用a标签渲染返回按钮,保证js执行异常依然展示该标签,并且能正常相应出栈事件。 业务展示兜底错误页,会使用导航条兜底数据渲染导航条。...H5导航栏,如果你使用过程中发现一些现在没有考虑的异常场景或者设计规范,请与作者联系,欢迎共同完善。

    26340

    谷歌官方组件Navigation你会用了吗?

    ,当我们要在图标当中添加目标视图连接动作的时候,我们可以使用元素作为子元素。...activity当中添加NavHost 一个主导航必须由NavHost派生而来,导航组件默认通过NavHost来实现,NavHostFragment来处理目标fragment直接的切换。...然后我们直接拖NavHostFragment 的视图到我们的activity文件当中 导航视图当中添加目标视图 这里总共有三种不同的方式可以我们的导航视图当中添加目标视图 添加已经存在的目标视图 如果我们想把已经存在的目标视图想要添加导航图当中...两种方法都可以实现跳转,但是我更建议用第一种,因为第一种可以配合着过渡的动画使用。...当我们通过popUpTo A回到A的时候,意味着我们堆栈当中把BC删除了。当我们使用app:popUpToInclusive =“true”的时候,我们还会把A弹出堆栈并有效的清除它。

    1.1K10

    vue-router(路由)详细教程

    由于Vue开发对路由支持的不足,于是官方补充了vue-router插件。vue的单页面应用是基于路由组件的,路由用于设定访问路径,并将路径组件映射起来。...fade-leave-active:离开过渡的结束状态,元素被删除生效,离开过渡完成后被删除。...一个『路径参数』使用冒号 : 标记。当匹配到一个路由,参数值会被设置this.route.params,可以每个组件使用。...router.push方法就是用来动态导航不同的链接的,这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览后退按钮,则回到之前的 URL。...当你使用这种方式,我们会马上导航渲染组件,然后组件的 created 钩子中获取数据。

    3K30
    领券