Android:约束布局动画选项卡选择

时间:2018-05-25 17:47:11

标签: android android-layout android-animation android-constraintlayout

我使用ConstraintLayout创建了一个自定义Tab,我决定使用ConstraintSet和TransitionManager来设置选项卡的动画。

这是我需要的动画。 enter image description here

但是当我实施动画时,我遇到了问题。

这是我的代码:

Xml布局定义

<android.support.constraint.ConstraintLayout
        android:id="@+id/card_constraint_canvas"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <!-- View on which I want to apply constraint for animation -->

    <View
        android:id="@+id/tab_selection"
        android:layout_width="0dp"
        android:layout_height="4dp"
        android:background="@color/colorSoftBlue"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/divider"
        app:layout_constraintBottom_toBottomOf="parent"/>


    <!-- Centered grey divider bar, view which is my anchor point -->

    <View
        android:id="@+id/divider"
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="@color/colorDividerGrey"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Java代码

@BindView(R.id.tab_selection) View tabSelection;
@BindView(R.id.card_constraint_canvas) ConstraintLayout cardConstraintCanvas;

... 

applyConstraintSet.clone(cardConstraintCanvas); // Working

TransitionManager.beginDelayedTransition(cardConstraintCanvas); // Working
applyConstraintSet.clear(R.id.tab_selection); // Working
applyConstraintSet.connect(R.id.tab_selection, ConstraintSet.LEFT, R.id.divider, ConstraintSet.RIGHT); // Working
applyConstraintSet.connect(R.id.tab_selection, ConstraintSet.RIGHT, R.id.card_constraint_canvas, ConstraintSet.RIGHT); // Working
applyConstraintSet.connect(R.id.tab_selection, ConstraintSet.BOTTOM, R.id.card_constraint_canvas, ConstraintSet.BOTTOM); // Working

// Not working, the animation behaves strange, the tab_selection view disappears, I put 0 as width because I defined in the xml like that (0dp) but not working
// applyConstraintSet.constrainWidth(R.id.tab_selection, 0); 

// Working, but I want my tab_selection view width spread at divider's start edge and parent's end edge after the animation, not a constant dimension
applyConstraintSet.constrainWidth(R.id.tab_selection, 10); 
applyConstraintSet.constrainHeight(R.id.tab_selection, 10); // Working

applyConstraintSet.applyTo(cardConstraintCanvas); // Working

我想问题是在constraintWidth。我也尝试这种方法只去除锚并保持宽度和高度。

void clear (int viewId, int anchor)

但我认为这不符合我的想法。

有什么想法吗?

感谢您的帮助:)

1 个答案:

答案 0 :(得分:1)

如果删除该行

def on_pause(self):
    return True

并分别将applyConstraintSet.clear(R.id.tab_selection); ConstraintSet.LEFT更改为ConstraintSet.RIGHTConstraintSet.START,以便与XML中使用的属性命名一致,然后此动画将按预期工作。< / p>

我不确定为什么ConstraintSet.END方法会导致不受欢迎的行为。