制作动画时，在RecyclerView中折叠CardView

问题描述

我有一个CardView，底部带有支持文本，默认为GONE.我想仅在用户单击操作箭头"时才显示卡的这一部分，如下图所示:

I have a CardView with a supporting text on the bottom that is GONE by default. I want to make this section of the card visible only when the user clicks the "action arrow", as shown on the image below:

我知道我可以通过简单地将View可见性设置为VISIBLE来实现这一点，但是我也想为扩展和折叠事件设置动画.

I know I can achieve that by simply setting that View visibility to VISIBLE, but I also want to animate the expand and the collapse events.

为此，我在CardView xml上使用了android:animateLayoutChanges="true"属性，并且在扩展时效果很好.但是，一旦我再次单击箭头以折叠辅助文字，下面的卡片就会与我在动画过程中单击的卡片重叠.如何避免这种重叠?

To do that I've used the android:animateLayoutChanges="true" property on my CardView xml, and it works just fine when it's expanding. But once I click on the arrow again to collapse the supporting text, the card below overlaps the card I've clicked during the animation. How can I avoid this overlapping?

编辑:我知道可能可以执行此问题的解决方案，但由于存在android:animateLayoutChanges选项，因此似乎过于复杂.我想知道是否有可能使用该XML属性来解决我的问题，使其保持简单.

I know it may be possible to do something like the solution on this question, but it seems overly complicated since the android:animateLayoutChanges option exists. I wonder if it's possible to solve my issue using that XML property, to keep it simple.

我的动画代码如下:

Java代码

protected void expandCard() {
    if (isExpanded) {
        ibt_show_more.animate().rotation(0).start();
        isExpanded = false;
        tv_support.setVisibility(View.GONE);
    }
    else {
        ibt_show_more.animate().rotation(180).start();
        isExpanded = true;
        tv_support.setVisibility(View.VISIBLE);
    }
}

XML代码

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/spacing_small"
    card_view:cardCornerRadius="2dp"
    android:id="@+id/os_list_item_cv">

    <RelativeLayout
        android:id="@+id/os_list_item_rl_root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:animateLayoutChanges="true">

        <!-- Here goes the header, the image, the action buttons and so on -->
        <!-- Omitted on purpose -->
        <!-- ... -->

        <!-- This is the support TextView -->
        <TextView
            android:id="@+id/tv_support"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/os_list_item_rl_actions"
            android:text="@string/bacon_ipsum"
            android:paddingBottom="24dp"
            android:paddingEnd="16dp"
            android:paddingRight="16dp"
            android:paddingLeft="16dp"
            android:paddingStart="16dp"
            android:visibility="gone"/>

    </RelativeLayout>

</android.support.v7.widget.CardView>

完整性的GIF(具有错误的崩溃行为)

推荐答案

在更改可见性之前，请添加以下代码行:

Right before you change the visibility, add this line of code:

TransitionManager.beginDelayedTransition(the rootView containing the cardView, new AutoTransition());

您应该获得流畅的动画.还要在此之前从您的xml中删除"animateLayoutChanges = true".

You should get a smooth animation. Also remove "animateLayoutChanges=true" from your xml before this.

关于这为什么起作用，调用TransitionManager.beginDelayedTransition()使TransitionManger捕获父ViewGroup中的当前值，并在下一个动画帧中渲染动画.在这种情况下传递的转换是自动转换，它负责处理父ViewGroup中的所有淡入，移动和调整大小.

As for why this works, calling TransitionManager.beginDelayedTransition() makes the TransitionManger capture current values in the parent ViewGroup and render the animations in the next animation frame. The Transition passed in this case is an AutoTransition, which takes care of all the fading, moving, and resizing in the parent ViewGroup.

请参见过渡和 TransitionManager

还请注意在适当情况下使用支持库中的Transitions，或执行必要的API级别检查.

Also take care to use Transitions from the support library where appropriate, or perform the neccessary API level checks.

这篇关于制作动画时，在RecyclerView中折叠CardView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！