在 BottomSheetFragment 上重复 ConstraintSet 的过渡动画问题

Question

我想在单击时为 BottomSheetFragment 上的布局更改设置动画。我实现了 ConstraintSet.applyTo 和 TransitionManager.beginDelayedTransition 来将初始场景更改为最终场景。但是当发生过渡时，动画似乎在重复。底部的示例输出。

BottomSheetFragment.java

ConstraintSet constraintSet;
boolean isSelected = false;

@BindView(R.id.container_root) ConstraintLayout layoutRoot;
@BindView(R.id.ic_leave_date)  ImageView ivLeaveDate;
@BindView(R.id.ic_date_filed)  ImageView ivDateFiled;

@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    LayoutTransition transition = new LayoutTransition();
    transition.setAnimateParentHierarchy(false);
    layoutRoot.setLayoutTransition(transition);
}

@OnClick(R.id.layout1)
public void openLeaveDate(){
    TransitionDrawable bgTransition = (TransitionDrawable) layoutLeaveDate.getBackground();
    TransitionDrawable ivTransition = (TransitionDrawable) ivLeaveDate.getBackground();

    if(isSelected){
        isSelected = false;
        bgTransition.reverseTransition(300);
        ivTransition.resetTransition();
        constraintSet = new ConstraintSet();
        constraintSet.clone(getActivity(), R.layout.bottom_sheet_filter_leave);

        TransitionManager.beginDelayedTransition(layoutRoot);
        constraintSet.applyTo(layoutRoot);
    }else{
        isSelected = true;
        bgTransition.startTransition(300);
        ivTransition.startTransition(300);
        constraintSet = new ConstraintSet();

        constraintSet.clone(getActivity(), R.layout.layout_bottom_date_filed);
        TransitionManager.beginDelayedTransition(layoutRoot);
        constraintSet.applyTo(layoutRoot);
    }
}

bottom_sheet_filter_leave.xml

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


    <android.support.constraint.ConstraintLayout
       android:id="@+id/layout_leave_date"
       android:layout_width="match_parent"
       android:layout_height="54dp"
       android:background="@transition/bg_transition"
       android:clickable="true"
       android:focusable="true"
       android:paddingStart="24dp">

       <ImageView
           android:id="@+id/ic_leave_date"
           android:layout_width="24dp"
           android:layout_height="match_parent"
           android:src="@transition/ic_leave_date_transition"/>

       <TextView
           android:id="@+id/label_leave_date"
           style="@style/TextAppearance.Content.Bold.Black"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginStart="24dp"
           android:text="@string/leave_date"
           app:layout_constraintBottom_toTopOf="@+id/guide_leave_date"
           app:layout_constraintStart_toEndOf="@+id/ic_leave_date"/>

       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginStart="24dp"
           android:text="All"
           app:layout_constraintStart_toEndOf="@+id/ic_leave_date"
           app:layout_constraintTop_toBottomOf="@+id/guide_leave_date"/>

       <android.support.constraint.Guideline
           android:id="@+id/guide_leave_date"
           android:layout_width="match_parent"
           android:layout_height="1dp"
           android:orientation="horizontal"
           app:layout_constraintGuide_percent="0.5"/>
    </android.support.constraint.ConstraintLayout>


    <android.support.constraint.ConstraintLayout
       android:id="@+id/layout1"
       android:layout_width="match_parent"
       android:layout_height="54dp"
       android:background="@transition/bg_transition"
       android:paddingEnd="24dp"
       android:paddingStart="24dp"
       android:visibility="visible"
       app:layout_constraintTop_toBottomOf="@+id/layout_leave_date">

       <ImageView
           android:id="@+id/ic_date_filed"
           android:layout_width="24dp"
           android:layout_height="24dp"
           android:background="@transition/ic_date_filed_transition"
           app:layout_constraintTop_toTopOf="parent"
           app:layout_constraintBottom_toBottomOf="parent"/>

       <TextView
           android:id="@+id/label_date_filed"
           style="@style/TextAppearance.Content.Bold.Black"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginStart="24dp"
           android:text="@string/date_filled"
           app:layout_constraintBottom_toTopOf="@+id/guide_date_filed"
           app:layout_constraintStart_toEndOf="@+id/ic_date_filed"/>

       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginStart="24dp"
           android:text="All"
           app:layout_constraintStart_toEndOf="@+id/ic_date_filed"
           app:layout_constraintTop_toBottomOf="@+id/guide_date_filed"/>

       <android.support.constraint.Guideline
           android:id="@+id/guide_date_filed"
           android:layout_width="match_parent"
           android:layout_height="1dp"
           android:orientation="horizontal"
           app:layout_constraintGuide_percent="0.5"/>
    </android.support.constraint.ConstraintLayout>



    <android.support.constraint.ConstraintLayout
       android:id="@+id/layout_all_date_filed"
       android:layout_width="match_parent"
       android:layout_height="54dp"
       android:clickable="true"
       android:focusable="true"
       android:paddingEnd="0dp"
       android:paddingStart="12dp"
       android:visibility="gone"
       app:layout_constraintTop_toBottomOf="@+id/layout1">

       <RadioButton
           android:id="@+id/rb_all_date_filed"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintTop_toTopOf="parent"/>

       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginStart="12dp"
           android:text="@string/all"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintStart_toEndOf="@id/rb_all_date_filed"
           app:layout_constraintTop_toTopOf="parent"/>

    </android.support.constraint.ConstraintLayout>

    <android.support.constraint.ConstraintLayout
       android:id="@+id/layout_input_date_filed"
       android:layout_width="match_parent"
       android:layout_height="54dp"
       android:clickable="true"
       android:focusable="true"
       android:paddingEnd="0dp"
       android:paddingStart="12dp"
       android:visibility="gone"
       app:layout_constraintTop_toBottomOf="@+id/layout_all_date_filed">

       <RadioButton
           android:id="@+id/rb_input_date_filed"
           android:layout_width="wrap_content"
           android:layout_height="0dp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintTop_toTopOf="parent"/>

       <EditText
           android:id="@+id/txt_date_filed_start"
             style="@style/ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox.Dense"
           android:layout_width="wrap_content"
           android:layout_height="0dp"
           android:layout_marginStart="12dp"
           android:drawableEnd="@drawable/ic_calendar_orange"
           android:hint="@string/mm_dd_yy"
           android:singleLine="true"
           android:textSize="13sp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintStart_toEndOf="@+id/rb_input_date_filed"
           app:layout_constraintTop_toTopOf="parent" />

       <View
           android:id="@+id/view_divider_date_filed"
           android:layout_width="10dp"
           android:layout_height="1dp"
           android:layout_marginStart="15dp"
           android:background="@color/gray"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintStart_toEndOf="@+id/txt_date_filed_start"
           app:layout_constraintTop_toTopOf="parent"/>

       <EditText
           android:id="@+id/txt_date_filed_end"
        style="@style/ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox.Dense"
           android:layout_width="wrap_content"
           android:layout_height="0dp"
           android:layout_marginStart="15dp"
           android:hint="@string/mm_dd_yy"
           android:singleLine="true"
           android:drawableEnd="@drawable/ic_calendar_orange"
           android:textSize="13sp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintStart_toEndOf="@+id/view_divider_date_filed"
           app:layout_constraintTop_toTopOf="parent" />

      </android.support.constraint.ConstraintLayout>

layout_bottom_date_filed.xml

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


    <android.support.constraint.ConstraintLayout
       android:id="@+id/layout_leave_date"
       android:layout_width="match_parent"
       android:layout_height="54dp"
       android:background="@transition/bg_transition"
       android:clickable="true"
       android:focusable="true"
       android:visibility="gone"
       android:paddingStart="24dp">

       <ImageView
           android:id="@+id/ic_leave_date"
           android:layout_width="24dp"
           android:layout_height="match_parent"
           android:src="@transition/ic_leave_date_transition"/>

       <TextView
           android:id="@+id/label_leave_date"
           style="@style/TextAppearance.Content.Bold.Black"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginStart="24dp"
           android:text="@string/leave_date"
           app:layout_constraintBottom_toTopOf="@+id/guide_leave_date"
           app:layout_constraintStart_toEndOf="@+id/ic_leave_date"/>

       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginStart="24dp"
           android:text="All"
           app:layout_constraintStart_toEndOf="@+id/ic_leave_date"
           app:layout_constraintTop_toBottomOf="@+id/guide_leave_date"/>

       <android.support.constraint.Guideline
           android:id="@+id/guide_leave_date"
           android:layout_width="match_parent"
           android:layout_height="1dp"
           android:orientation="horizontal"
           app:layout_constraintGuide_percent="0.5"/>
    </android.support.constraint.ConstraintLayout>


    <android.support.constraint.ConstraintLayout
       android:id="@+id/layout1"
       android:layout_width="match_parent"
       android:layout_height="54dp"
       android:background="@transition/bg_transition"
       android:paddingEnd="24dp"
       android:paddingStart="24dp"
       android:visibility="visible"
       app:layout_constraintTop_toBottomOf="@+id/layout_leave_date">

       <ImageView
           android:id="@+id/ic_date_filed"
           android:layout_width="24dp"
           android:layout_height="24dp"
           android:background="@transition/ic_date_filed_transition"
           app:layout_constraintTop_toTopOf="parent"
           app:layout_constraintBottom_toBottomOf="parent"/>

       <TextView
           android:id="@+id/label_date_filed"
           style="@style/TextAppearance.Content.Bold.Black"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginStart="24dp"
           android:text="@string/date_filled"
           app:layout_constraintBottom_toTopOf="@+id/guide_date_filed"
           app:layout_constraintStart_toEndOf="@+id/ic_date_filed"/>

       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginStart="24dp"
           android:text="All"
           app:layout_constraintStart_toEndOf="@+id/ic_date_filed"
           app:layout_constraintTop_toBottomOf="@+id/guide_date_filed"/>

       <android.support.constraint.Guideline
           android:id="@+id/guide_date_filed"
           android:layout_width="match_parent"
           android:layout_height="1dp"
           android:orientation="horizontal"
           app:layout_constraintGuide_percent="0.5"/>
    </android.support.constraint.ConstraintLayout>



    <android.support.constraint.ConstraintLayout
       android:id="@+id/layout_all_date_filed"
       android:layout_width="match_parent"
       android:layout_height="54dp"
       android:clickable="true"
       android:focusable="true"
       android:paddingEnd="0dp"
       android:paddingStart="12dp"
       app:layout_constraintTop_toBottomOf="@+id/layout1">

       <RadioButton
           android:id="@+id/rb_all_date_filed"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintTop_toTopOf="parent"/>

       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginStart="12dp"
           android:text="@string/all"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintStart_toEndOf="@id/rb_all_date_filed"
           app:layout_constraintTop_toTopOf="parent"/>

    </android.support.constraint.ConstraintLayout>

    <android.support.constraint.ConstraintLayout
       android:id="@+id/layout_input_date_filed"
       android:layout_width="match_parent"
       android:layout_height="54dp"
       android:clickable="true"
       android:focusable="true"
       android:paddingEnd="0dp"
       android:paddingStart="12dp"
       app:layout_constraintTop_toBottomOf="@+id/layout_all_date_filed">

       <RadioButton
           android:id="@+id/rb_input_date_filed"
           android:layout_width="wrap_content"
           android:layout_height="0dp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintTop_toTopOf="parent"/>

       <EditText
           android:id="@+id/txt_date_filed_start"
             style="@style/ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox.Dense"
           android:layout_width="wrap_content"
           android:layout_height="0dp"
           android:layout_marginStart="12dp"
           android:drawableEnd="@drawable/ic_calendar_orange"
           android:hint="@string/mm_dd_yy"
           android:singleLine="true"
           android:textSize="13sp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintStart_toEndOf="@+id/rb_input_date_filed"
           app:layout_constraintTop_toTopOf="parent" />

       <View
           android:id="@+id/view_divider_date_filed"
           android:layout_width="10dp"
           android:layout_height="1dp"
           android:layout_marginStart="15dp"
           android:background="@color/gray"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintStart_toEndOf="@+id/txt_date_filed_start"
           app:layout_constraintTop_toTopOf="parent"/>

       <EditText
           android:id="@+id/txt_date_filed_end"
        style="@style/ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox.Dense"
           android:layout_width="wrap_content"
           android:layout_height="0dp"
           android:layout_marginStart="15dp"
           android:hint="@string/mm_dd_yy"
           android:singleLine="true"
           android:drawableEnd="@drawable/ic_calendar_orange"
           android:textSize="13sp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintStart_toEndOf="@+id/view_divider_date_filed"
           app:layout_constraintTop_toTopOf="parent" />

      </android.support.constraint.ConstraintLayout>

这是它的样子：

更新：

我尝试将此设置应用于其他片段（不是 BottomSheetFragment），动画似乎工作正常。也许它与 BottomSheetFragment 有关？

Answer 1

我通过删除 OnViewCreated() 上的这些行解决了这个问题：

LayoutTransition transition = new LayoutTransition();
transition.setAnimateParentHierarchy(false);
layoutRoot.setLayoutTransition(transition);

在 BottomSheetFragment 上重复 ConstraintSet 的过渡动画问题

Repeating ConstraintSet's transition animation issue on BottomSheetFragment

android

android-transitions

android-constraintlayout

constraintset