android - Android Transition API 中的场景提升

Question

最近我开始使用 Transition API，有一件事我无法理解。

假设我有两个场景(附截图):

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

但是，当我进行向后过渡时，会发生一些奇怪的事情:在过渡开始时，蓝色方 block 被绘制在下方绿色方 block (根据它们的高度)并且它开始移动到如预期的右上角。而我想要做的是将蓝色方 block 保持在绿色方 block 之上，并将其移动到右上角而不改变其高度。

有什么我想念的吗？

相关部分代码:

转换.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>

主要 Activity :

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

您发布的第二个 scene.xml 中不存在 green_square_view。如果您也将 green_square_view 添加到此场景，绿色方 block 将在两个方向上都位于蓝色方 block 之后。然而在这种情况下，Slide 动画不再播放，因为绿色方 block 并没有消失。对于新添加的 green_square_view，这可以通过 android:visibility="invisible" 轻松解决，因为幻灯片动画对不再可用的 View 以及 View 使用react改变可见性。

我试图调试导致此行为的原因。最后我找到了这个 part in the documentation可能适用:

... For example, if a View was simply removed from its parent, then the View will be added into a ViewGroupOverlay and passed as the view parameter in onDisappear(ViewGroup, View, TransitionValues, TransitionValues). If a visible View is changed to be GONE or INVISIBLE, then it can be used as the view and the visibility will be changed to VISIBLE for the duration of the animation.

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