使用androidx.transition.Slide实现Fragment过渡时视图Z轴顺序异常求助

我之前也碰到过这个坑——当用Slide过渡实现Fragment的进入/退出动画时，退出过程里视图的Z轴顺序被打乱，原本在前面的输入框跑到了图片后面。这本质是Android过渡框架的一个特性：执行退出过渡时，系统会把参与动画的视图临时从原ConstraintLayout中剥离，放到一个过渡专用的容器里，而这个容器里的视图层级默认不是完全继承原布局的，所以会出现随机错乱的情况。

下面是几个亲测有效的解决方案，按推荐程度排序：

1. 给视图设置明确的elevation值 #

最直接的方法是给需要保持在顶层的视图（比如输入框）设置比背景图片更高的elevation值，强制指定层级优先级。因为过渡容器里的视图会优先按照elevation来排序，而不是默认的添加顺序。

实现方式： #

可以在XML布局里直接设置：

<!-- 给输入框设置更高的elevation -->
<EditText
    android:id="@+id/input_edit_text"
    android:elevation="2dp"
    ... />

<!-- 背景图片设置较低的elevation -->
<ImageView
    android:id="@+id/background_image"
    android:elevation="1dp"
    ... />

也可以在代码里动态设置（比如在onViewCreated中）：

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    // 从dimens文件中读取值，适配不同屏幕
    val inputElevation = resources.getDimension(R.dimen.input_elevation)
    val imageElevation = resources.getDimension(R.dimen.image_elevation)
    
    binding.inputEditText.elevation = inputElevation
    binding.backgroundImage.elevation = imageElevation
    
    enterTransition = Slide().setDuration(1000)
    exitTransition = enterTransition // 退出过渡复用同样配置
}

2. 使用TransitionSet并强制视图一起动画 #

单独使用Slide过渡时，系统可能会逐个处理视图的动画，导致视图被分批加入过渡容器，打乱层级。改用TransitionSet并设置ORDERING_TOGETHER，可以让所有视图同时参与动画，保持原有的层级关系。

实现方式： #

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    
    val slideTransition = Slide().setDuration(1000)
    val transitionSet = TransitionSet().apply {
        addTransition(slideTransition)
        // 强制所有视图一起执行动画，避免分批加入过渡容器
        ordering = TransitionSet.ORDERING_TOGETHER
    }
    
    enterTransition = transitionSet
    exitTransition = transitionSet
}

3. 自定义过渡动画，手动维护视图层级 #

如果前两种方法没解决问题，可以自定义Slide过渡，在动画过程中手动把需要前置的视图移到过渡容器的顶层。

实现方式： #

先创建自定义过渡类：

class CustomSlide : Slide() {
    override fun createAnimator(sceneRoot: ViewGroup, startValues: TransitionValues?, endValues: TransitionValues?): Animator? {
        val animator = super.createAnimator(sceneRoot, startValues, endValues)
        
        endValues?.view?.let { targetView ->
            // 判断当前视图是输入框时，将其移到父容器顶层
            if (targetView is EditText) {
                targetView.post {
                    (targetView.parent as? ViewGroup)?.bringChildToFront(targetView)
                }
            }
        }
        
        return animator
    }
}

然后在Fragment中使用这个自定义过渡：

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    enterTransition = CustomSlide().setDuration(1000)
    exitTransition = enterTransition
}

4. 排除不需要过渡的视图 #

如果背景图片不需要参与过渡动画，可以用excludeTarget把它排除在过渡之外，这样它不会被移到过渡容器里，始终保持在原布局的层级中。

实现方式： #

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    
    enterTransition = Slide().setDuration(1000).apply {
        // 排除背景图片，不让它参与过渡
        excludeTarget(R.id.background_image, true)
    }
    exitTransition = enterTransition
}

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