使用FragmentContainerView与导航组件时共享元素过渡失效问题求助

我之前也碰到过一模一样的问题——把<fragment>换成<androidx.fragment.app.FragmentContainerView>作为NavHost容器后，所有共享元素过渡直接失效，折腾了好一阵才找到解决办法，给你梳理下可行的方案：

原因分析 #

FragmentContainerView在Android 5.0（Lollipop）及以上版本默认禁用了容器级的过渡动画，官方文档提到要改用FragmentTransaction.setCustomAnimations()，但导航组件的默认逻辑并没有自动适配这个变化，导致共享元素过渡的上下文传递出现问题。

解决方案 #

1. 升级导航组件依赖 #

首先确保你的导航组件版本在2.4.0或更高，这个版本开始针对FragmentContainerView的共享元素过渡做了专门修复。在你的build.gradle（Module级别）中更新依赖：

dependencies {
    def nav_version = "2.7.6" // 可替换为最新稳定版
    implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
    implementation "androidx.navigation:navigation-ui-ktx:$nav_version"
}

2. 调整目标Fragment的过渡配置 #

在FragmentB.kt中，除了设置共享元素进入过渡，还要禁用普通的进入/退出过渡（避免干扰共享元素动画），同时配置返回过渡保持一致性：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // 禁用普通的进入/退出过渡，防止和共享元素动画冲突
    enterTransition = null
    returnTransition = null
    
    // 设置共享元素进入过渡
    sharedElementEnterTransition = TransitionInflater.from(context)
        .inflateTransition(R.transition.trans_logo_shared_element)
    // 设置共享元素返回过渡（保证返回时动画一致）
    sharedElementReturnTransition = TransitionInflater.from(context)
        .inflateTransition(R.transition.trans_logo_shared_element)
}

3. 确认导航时的Extras传递正确 #

你的FragmentA.kt代码逻辑是对的，但可以再确认logoView的transitionName和布局中定义的完全一致：

val logoView = view.findViewById<ImageView>(R.id.logo)
// 确保logoView的transitionName在布局中是"logo"
navController.navigate(
    FragmentADirections.actionFragmentAToFragmentB(),
    FragmentNavigatorExtras(logoView to "logo")
)

4. 配置FragmentContainerView的过渡属性 #

在承载NavHost的布局文件中，给FragmentContainerView添加两个允许过渡重叠的属性，确保共享元素动画能正常渲染：

<androidx.fragment.app.FragmentContainerView
    android:id="@+id/nav_host_fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="true"
    app:navGraph="@navigation/nav_graph"
    <!-- 添加这两个属性 -->
    android:supportsEnterTransitionOverlap="true"
    android:supportsReturnTransitionOverlap="true" />

额外排查项 #

• 简化过渡测试：先把trans_logo_shared_element.xml改成只保留<changeBounds />，排除复杂动画组合的问题，确认基础过渡生效后再添加其他动画。
• 检查元素可见性：确保两个Fragment中的ImageView在导航前后都是VISIBLE状态，GONE或INVISIBLE会导致共享元素过渡失效。
• 避免延迟加载：如果FragmentB中的ImageView是异步加载图片（比如Glide/Picasso），要在图片加载完成后再触发过渡，否则会因为元素尺寸变化导致动画异常。

按照上面的步骤调整后，我的共享元素过渡就恢复正常了，你可以逐一排查试试。

内容的提问来源于stack exchange，提问作者ubuntudroid