Android：约束布局动画选项卡选择答案

【问题标题】：Android: Constraint Layout Animate Tab SelectionAndroid：约束布局动画选项卡选择
【发布时间】：2018-05-25 17:47:10
【问题描述】：

我使用 ConstraintLayout 创建了一个自定义选项卡，我决定使用 ConstraintSet 和 TransitionManager 为选项卡选择设置动画。

这是我需要的动画。

但是当我实现动画时，我遇到了问题。

这是我的代码：

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

我想问题出在约束宽度上。我也尝试使用这种方法仅移除锚点并保持宽度和高度。

void clear (int viewId, int anchor)

但我认为它并没有像我想的那样工作。

有什么想法吗？

感谢您的帮助:)

【问题讨论】：

标签： android android-layout android-animation android-constraintlayout

【解决方案1】：

如果你删除线

applyConstraintSet.clear(R.id.tab_selection);

并将ConstraintSet.LEFT 和ConstraintSet.RIGHT 分别更改为ConstraintSet.START 和ConstraintSet.END 以与XML 中使用的属性的命名保持一致，然后此动画将按预期工作。

我不确定为什么 clear 方法会导致不需要的行为。

【讨论】：