Android Transition API 中的场景提升

Question

最近我开始使用 Transition API，但有一点我无法掌握。

假设我有两个场景（附上截图）：

现在，当我点击 TRANSIT 按钮时，我会从第 1 个场景转移到第 2 个，或者从第 2 个转移到第 1 个，具体取决于最后显示的场景。当我从第一个场景转移到第二个场景时，一切都按预期进行：蓝色大方块移动到屏幕中心（通过changeBounds 过渡），绿色方块从屏幕顶部边缘滑入屏幕（通过slide) 过渡。

但是，当我进行向后过渡时，发生了一些奇怪的事情：在过渡开始时，蓝色方块被绘制在绿色方块下方（就它们的高度而言）并且它开始移动到如预期的那样右上角。而我想要做的是将蓝色方块保持在绿色方块的顶部并将其移动到右上角而不改变其高度。

有什么我想念的吗？

相关代码部分：

transition.xml

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:transitionOrdering="together">

        <changeBounds>
            <targets>
                <target android:targetId="@id/square_view"/>
            </targets>
        </changeBounds>

        <slide android:slideEdge="top">
            <targets>
                <target android:targetId="@+id/green_square_view"/>
            </targets>
        </slide>

</transitionSet>

场景：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/green_square_view"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_marginStart="72dp"
        android:layout_marginTop="216dp"
        android:background="#0cfc28"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@id/square_view"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginBottom="180dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</android.support.constraint.ConstraintLayout>

和

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@id/square_view"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.931"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.044" />

</android.support.constraint.ConstraintLayout>

主活动：

package aga.android.sample.transitionssample

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.transition.*
import android.util.Log
import android.view.ViewGroup
import android.widget.Button

class MainActivity : AppCompatActivity() {

    private lateinit var sceneRoot: ViewGroup

    private var currentSceneIndex = 0
    private var scenes: Array<Scene> = emptyArray()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        sceneRoot = findViewById(R.id.scene_root_view)

        scenes = arrayOf(
            Scene.getSceneForLayout(sceneRoot, R.layout.scene1, this),
            Scene.getSceneForLayout(sceneRoot, R.layout.scene2, this)
        )

        val transition = TransitionInflater.from(this).inflateTransition(R.transition.move_animation)

        findViewById<Button>(R.id.button).setOnClickListener {
            currentSceneIndex = (currentSceneIndex + 1) % 2
            TransitionManager.go(scenes[currentSceneIndex], transition)
        }
    }
}

Answer 1

green_square_view 不在您发布的第二个 scene.xml 中。如果您也将green_square_view 添加到此场景中，则绿色方块将在两个方向的蓝色方块后面。但是在这种情况下，Slide 动画不再播放，因为绿色方块并没有消失。对于新添加的green_square_view，可以使用android:visibility="invisible" 轻松解决此问题，因为幻灯片动画会对不再可用的视图以及更改可见性的视图做出反应。

我尝试调试导致此行为的原因。最后我发现这个part in the documentation 可能适用：

... 例如，如果一个 View 只是简单地从其父级中移除，则该 View 将被添加到 ViewGroupOverlay 中并作为 onDisappear(ViewGroup, View, TransitionValues, TransitionValues) 中的视图参数传递。如果可见 View 更改为 GONE 或 INVISIBLE，则可以将其用作视图，并且在动画期间可见性将更改为 VISIBLE。

提到的ViewGroupOverlay 绘制在此视图组中的内容之上。所以这可以解释这种行为。但是，我不是 100% 确定这是导致问题的原因。尽管如此，在两个场景中都有视图可以解决问题行为。