约束布局动画无法正常工作

Question

由于某些原因，我无法让约束集动画产生任何效果。当调用代码时，什么也不会发生。即使我更改tab的id，情况也是如此。

private fun moveNavigationBall(tab: BottombarItemView) {
    val constraintSet = ConstraintSet()

    constraintSet.clone(cl_bottombar_view_main)
    constraintSet.connect(v_bottom_bar_circle_indicator.id, ConstraintSet.TOP, tab.id, ConstraintSet.TOP,0);
    constraintSet.connect(v_bottom_bar_circle_indicator.id, ConstraintSet.BOTTOM, tab.id, ConstraintSet.BOTTOM,0);
    constraintSet.connect(v_bottom_bar_circle_indicator.id, ConstraintSet.LEFT, tab.id, ConstraintSet.LEFT,0);
    constraintSet.connect(v_bottom_bar_circle_indicator.id, ConstraintSet.RIGHT, tab.id, ConstraintSet.RIGHT,0);
    constraintSet.applyTo(cl_bottombar_view_main)

    val transition = ChangeBounds()
    transition.interpolator = OvershootInterpolator()
    TransitionManager.beginDelayedTransition(cl_bottombar_view_main, transition)
}

当按下按钮时，将调用此函数。选项卡取决于按下的哪个按钮而不同。我想要做的是将v_bottom_bar_circle_indicator移动到每个选项卡的中间。

视图

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

    <com.main.toucanmvp.mvp.components.bottombar.bottombaritem.BottombarItemView
        android:id="@+id/biv_home"
        android:layout_width="0dp"
        android:layout_height="56dp"
        app:bivBackground="@drawable/drawable_navigation_background_left"
        app:bivIcon="@drawable/ic_home"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/biv_search"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <com.main.toucanmvp.mvp.components.bottombar.bottombaritem.BottombarItemView
        android:id="@+id/biv_search"
        android:layout_width="0dp"
        android:layout_height="56dp"
        app:bivIcon="@drawable/ic_search"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/biv_clan"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/biv_home"
        app:layout_constraintTop_toTopOf="parent"/>

    <com.main.toucanmvp.mvp.components.bottombar.bottombaritem.BottombarItemView
        android:id="@+id/biv_clan"
        android:layout_width="0dp"
        android:layout_height="56dp"
        app:bivIcon="@drawable/ic_crown"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/biv_news"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/biv_search"
        app:layout_constraintTop_toTopOf="parent"/>

    <com.main.toucanmvp.mvp.components.bottombar.bottombaritem.BottombarItemView
        android:id="@+id/biv_news"
        android:layout_width="0dp"
        android:layout_height="56dp"
        app:bivIcon="@drawable/ic_news"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/biv_profile"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/biv_clan"
        app:layout_constraintTop_toTopOf="parent"/>

    <com.main.toucanmvp.mvp.components.bottombar.bottombaritem.BottombarItemView
        android:id="@+id/biv_profile"
        android:layout_width="0dp"
        android:layout_height="56dp"
        app:bivBackground="@drawable/drawable_navigation_background_right"
        app:bivIcon="@drawable/ic_profile"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/biv_news"
        app:layout_constraintTop_toTopOf="parent"/>

    <FrameLayout
        android:id="@+id/v_bottom_bar_circle_indicator"
        android:layout_width="34dp"
        android:layout_height="34dp"
        android:background="@drawable/drawable_circle_navigation_bar"
        app:layout_constraintBottom_toBottomOf="@+id/biv_home"
        app:layout_constraintEnd_toEndOf="@+id/biv_home"
        app:layout_constraintStart_toStartOf="@+id/biv_home"
        app:layout_constraintTop_toTopOf="@+id/biv_home"/>
</android.support.constraint.ConstraintLayout>

- Jemil Riahi

Answer 1

首先，为了使约束的变化产生动画效果，您需要将其放入动画块中。

constraintSet.applyTo(cl_bottombar_view_main)

之后

TransitionManager.beginDelayedTransition(cl_bottombar_view_main, transition)

其次，在您的XML布局文件中，您正在为要动画化的视图（v_bottom_bar_circle_indicator）使用 start 和 end 约束，但在您的代码中，您正在使用不同的 ConstraintSet.LEFT 和 ConstraintSet.RIGHT。您需要将它们分别更改为 ConstraintSet.START 和 ConstraintSet.END。

第三个问题可能与本例有关，也可能无关紧要。您将每个 connect() 函数的最后一个参数设置为 0 的边距。 ConstraintSet 文档说边距必须是正数，因此当设置为 0 时，可能会产生意料之外的行为。建议在这种情况下使用没有边距参数的签名。

- Pawel Laskowski

---

我最初发现左右似乎有问题。因为我测试了下方和上方，只有进一步测试时才有反应。非常感谢！你今天解决了我最大的头痛。 - Jemil Riahi