MotionLayout以程序方式创建过渡

Question

我有一个创建简单的 MotionLayout 这看起来像一个定制的 BottomNavigationView.

我使用MotionLayout来制作 "选择器 "的动画。想象一下，一个看起来像底栏的视图，里面有4个 "标签视图 "和一个选择器。

我想做的是创建一个 "标签视图"。Transition 因为视图是自定义的，你可以设置不同的ID，标签的数量等。

但首先，我做了一个XML版本，看看是否真的能用，这是XML的例子"

<ConstraintSet android:id="@+id/startFromFirstTabToSecondTab">
        <Constraint
            android:id="@+id/selector"
            android:layout_width="48dp"
            android:layout_height="36dp"
            motion:layout_constraintBottom_toBottomOf="@+id/tabFirst"
            motion:layout_constraintEnd_toEndOf="@+id/tabFirst"
            motion:layout_constraintStart_toStartOf="@+id/tabFirst"
            motion:layout_constraintTop_toTopOf="@+id/tabFirst">
            <CustomAttribute
                motion:attributeName="ColorFilter"
                motion:customColorValue="@color/blue" />

           <CustomAttribute
                ...

        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/endFromFirstTabToSecond">
        <Constraint
            android:id="@+id/selector"
            android:layout_width="48dp"
            android:layout_height="36dp"
            motion:layout_constraintBottom_toBottomOf="@+id/tabSecond"
            motion:layout_constraintEnd_toEndOf="@+id/tabSecond"
            motion:layout_constraintStart_toStartOf="@+id/tabSecond"
            motion:layout_constraintTop_toTopOf="@+id/tabSecond">
            <CustomAttribute
                motion:attributeName="ColorFilter"
                motion:customColorValue="@color/purple" />

             <CustomAttribute
                ...
        </Constraint>
    </ConstraintSet>

现在，我正试图将其转换为程序化的方式，但由于没有很多文档，这是我创建的。

private fun createAndSetTransition(fromTab: Tab, toTab: Tab): Int {

        val startSetId = View.generateViewId()
        val startSet = ConstraintSet()
        startSet.clone(this)
        startSet.clear(selectorId)
        startSet.connect(selectorId, ConstraintSet.START, fromTab.id, ConstraintSet.START)
        startSet.connect(selectorId, ConstraintSet.END, fromTab.id, ConstraintSet.END)
        startSet.connect(selectorId, ConstraintSet.TOP, fromTab.id, ConstraintSet.TOP)
        startSet.connect(selectorId, ConstraintSet.BOTTOM, fromTabI.id, ConstraintSet.BOTTOM)
        startSet.setColorValue(selectorId, "ColorFilter", ContextCompat.getColor(context, fromTab.color))
        startSet.apply {
            constrainWidth(selectorId, selectorWidth)
            constrainHeight(selectorId, selectorHeight)
        }

        val endSetId = View.generateViewId()
        val endSet = ConstraintSet()
        endSet.clone(this)
        endSet.clear(selectorId)
        endSet.connect(selectorId, ConstraintSet.START, toTab.id, ConstraintSet.START)
        endSet.connect(selectorId, ConstraintSet.END, toTab.id, ConstraintSet.END)
        endSet.connect(selectorId, ConstraintSet.TOP, toTab.id, ConstraintSet.TOP)
        endSet.connect(selectorId, ConstraintSet.BOTTOM, toTab.id, ConstraintSet.BOTTOM)
        endSet.setColorValue(selectorId, "ColorFilter", ContextCompat.getColor(context, toTab.color))
        endSet.apply {
            constrainWidth(selectorId, selectorWidth)
            constrainHeight(selectorId, selectorHeight)
        }

        val transitionId = View.generateViewId()
        val transition = TransitionBuilder.buildTransition(
                motionScene,
                transitionId,
                startSetId, startSet,
                endSetId, endSet)

        motionScene.addTransition(transition)

        return transitionId
    }

之后，当用户点击一个动画时，我以编程方式运行动画。Tab.据我看，动画是可以用的，但唯独动画的是. 颜色 的选择器。选择器本身应该从原来的位置(fromTab)移动到选定的标签页。Constraints 的动画，但我不明白为什么。

Answer 1

确保你的Tab（动态创建的）被添加到布局中，并且在布局中具有一个测量的尺寸位置，然后再创建 ConstriantSets.