fitSystemWindows 中断 MotionLayout 过渡

Question

我有一个绑定到 ViewPager 的 MotionLayout 过渡。

private val pageChangedListener = object : SimpleOnPageChangeListener() {
    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
        super.onPageScrolled(position, positionOffset, positionOffsetPixels)
        motionLayout.progress = (position + positionOffset) / (pager.adapter!!.count - 1)
    }
}

一切都很好，除了 fitSystemWindows，它在添加到 MotionLayout 时会破坏动画。整个布局在动画开始和结束时跳跃。当 motionLayout 不完全为 0 或 1 时，填充似乎被添加了两次。我准备了两个视频，其中 fitSystemWindows 设置为 true 和 false 以更好地可视化问题。

请注意，视频的布局被简化了，过渡显然要复杂得多，但这足以看出差异。另外，我正在使用constraintlayout:2.0.0-alpha3。

fitsSystemWindows="true" -> https://imgur.com/a/SlHH1NJ - 动画在开始和结束处跳跃。

fitsSystemWindows="false" ->https://imgur.com/a/WwkfyoM - 没有跳跃，但底部按钮明显不适合系统窗口。

对如何解决过渡有任何想法吗？

---

我的布局：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">

...

<androidx.constraintlayout.motion.widget.MotionLayout
    android:id="@+id/motionLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    app:layoutDescription="@xml/motion_scene">

    <TextView
        android:id="@+id/titleTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="sans-serif-thin"
        android:gravity="center"
        android:text="..."
        android:textSize="52sp" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:visibility="gone" />

    <LinearLayout
        android:id="@+id/timerLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        ...

    </LinearLayout>

    <Button
        android:id="@+id/stopBtn"
        style="?attr/borderlessButtonStyle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|bottom"
        android:layout_margin="28dp"
        android:drawableTop="@drawable/ic_close"
        android:drawablePadding="12dp"
        android:letterSpacing=".1"
        android:text="..."
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.motion.widget.MotionLayout>

</FrameLayout>

MotionScene xml：

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">

<Transition
    motion:constraintSetEnd="@+id/end"
    motion:constraintSetStart="@+id/start"
    motion:duration="250"
    motion:interpolator="linear">

    <ConstraintSet android:id="@+id/start">

        <Constraint
            android:id="@+id/titleTv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="0dp"
            android:alpha="1"
            android:scaleX="1"
            android:scaleY="1"
            motion:layout_constraintBottom_toTopOf="@+id/timerLayout"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent" />

        <Constraint
            android:id="@+id/timerLayout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="0dp"
            android:scaleX="1"
            android:scaleY="1"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">

        <Constraint
            android:id="@+id/titleTv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:alpha="0"
            android:scaleX="0.6"
            android:scaleY="0.6"
            motion:layout_constraintBottom_toTopOf="@+id/timerLayout"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            tools:alpha="0.5" />

        <Constraint
            android:id="@+id/timerLayout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="430dp"
            android:scaleX="0.7"
            android:scaleY="0.7"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />

    </ConstraintSet>

</Transition>

</MotionScene>

Answer 1

我遇到了类似的问题，我已经通过将MotionLayout.TransitionListener 添加到运动布局来解决它。您可以根据自己的情况试一试。

motion_layout.setTransitionListener(object : MotionLayout.TransitionListener {

    /** Called when a drawer is about to start a transition*/
    override fun onTransitionStarted(motionLayout: MotionLayout?, startId: Int, endId: Int) { }

    /** Called when a drawer's position changes*/
    override fun onTransitionChange(motionLayout: MotionLayout?, startId: Int, endId: Int, progress: Float) { }

    /** Called when a drawer has settled completely a state*/
    override fun onTransitionCompleted(motionLayout: MotionLayout?, currentId: Int) {
        motionLayout?.let {
            ViewCompat.setOnApplyWindowInsetsListener(it) { _, insets ->
                image.setMarginTop(insets.systemWindowInsetTop)
                insets
            }
        }
    }

    /** Call when a trigger is fired*/
    override fun onTransitionTrigger(motionLayout: MotionLayout?, triggerId: Int, positive: Boolean, progress: Float) { }
})