Android中的TransitionManager动画重叠

Question

我正在尝试使用TransitionManager动画来展开和折叠我的视图。以下是输出结果：

当折叠顶部视图时，会出现重叠的布局。如何避免这种情况？我将“detailedView”（带有图标的视图）的可见性设置为GONE并使用以下代码进行动画：

topView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                TransitionManager.beginDelayedTransition(topView);
                TransitionManager.beginDelayedTransition(bottomView);
                if (detailsView.getVisibility() == View.VISIBLE) {
                    detailsView.setVisibility(View.GONE);
                    cardText.setText("Collapse Title");
                } else {
                   detailsView.setVisibility(View.VISIBLE);
                   cardText.setText("Expanded Title");

                }
            }
        });

- Dexter

Answer 1

我会以不同的方式构建动画。我会使用一个包裹内容的顶部单元格的LinearLayout，在点击时，我会执行以下操作：

 valueAnimator = ValueAnimator.ofInt(titleContainer.getHeight(),titleContainer.getHeight() + newHeight );
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            titleContainer.setHeight(animation.getAnimatedValue());
        }
    });
    valueAnimator.setDuration(270);
    valueAnimator.start();

- Uriel Frankel

---

我很高兴你喜欢它。 - Uriel Frankel

Answer 2

我曾经遇到同样的问题。

TransitionManager.beginDelayedTransition() 函数的第一个参数必须是所有在转场中参与交互的视图的父级，例如：

下面是我拥有的布局：

<!-- The scene root  -->
<LinearLayout
    android:id="@+id/transition_container" >


    <!-- First card  -->
    <androidx.cardview.widget.CardView
        android:id="@+id/expandableCard1">

        <LinearLayout
           android:id="@+id/staticHeader1">
        </LinearLayout>

        <LinearLayout
           android:id="@+id/expandableContent1">
        </LinearLayout>

    </androidx.cardview.widget.CardView>


    <!-- Second card  -->
    <androidx.cardview.widget.CardView
        android:id="@+id/expandableCard2">

        <LinearLayout
           android:id="@+id/staticHeader2">
        </LinearLayout>

        <LinearLayout
           android:id="@+id/expandableContent2">
        </LinearLayout>

    </androidx.cardview.widget.CardView>


</LinearLayout>

以下是我的 Kotlin 代码：

// toggle
if( expandableContent1.visibility == View.GONE ){

      // apply to the root scene
      TransitionManager.beginDelayedTransition(transition_container )

      // change the visibility of the expandable content
      expandableContent1.visibility = View.VISIBLE
      arrowBtn.setImageResource( R.drawable.ic_arrow_up_24)

} else {

      // apply to the root scene
      TransitionManager.beginDelayedTransition(transition_container )

      // change the visibility of the expandable content
      expandableContent1.visibility = View.GONE
      arrowBtn.setImageResource( R.drawable.ic_arrow_down_24)
}

- carlos ezam

Answer 3

你能试着设置你的过渡效果吗？

TransitionSet()
.setOrdering(TransitionSet.ORDERING_SEQUENTIAL)

/**
 * A flag used to indicate that the child transitions of this set
 * should all start at the same time.
 */
public static final int ORDERING_TOGETHER = 0;

/**
 * A flag used to indicate that the child transitions of this set should
 * play in sequence; when one child transition ends, the next child
 * transition begins. Note that a transition does not end until all
 * instances of it (which are playing on all applicable targets of the
 * transition) end.
 */
public static final int ORDERING_SEQUENTIAL = 1;

- Phạm Thành Nam