MotionLayout 以编程方式创建过渡

Question

我创建了一个简单的 MotionLayout，看起来像自定义的 BottomNavigationView。

我正在使用 MotionLayout 为 "selector" 设置动画。所以想象一下看起来像底栏的视图，里面有 4 个 "tab views" 和一个选择器。

我想做的是以编程方式创建 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 时，我以编程方式播放运行动画。据我所知，动画有效，但唯一动画的是选择器的 color 。选择器本身应该从它所在的位置 (fromTab) 移动到选定的选项卡。所以看起来 Constraints 没有动画，我不知道为什么。

Answer 1

在创建 ConstriantSets.

之前，确保将动态创建的选项卡添加到布局中并在布局中测量 size/position

MotionLayout 以编程方式创建过渡

MotionLayout create transition programatically

android

android-constraintlayout

android-motionlayout