在动画制作时,在RecyclerView内部折叠CardView

Mau*_*ker 18 android android-animation android-cardview

我想做什么

CardView在底部有一个支持文本GONE,默认情况下.我想只在用户点击"操作箭头"时才能看到卡片的这一部分,如下图所示:

展开箭头

我知道我可以通过简单地设置View可见性来实现这一目标VISIBLE,但我也希望为扩展和崩溃事件设置动画.

问题和我到目前为止所尝试的内容

要做到这一点,我已经android:animateLayoutChanges="true"在我的CardViewxml 上使用了该属性,并且它在扩展时工作得很好.但是,一旦我再次点击箭头折叠支持文本,下面的卡片就会重叠我在动画期间点击过的卡片.我怎样才能避免这种重叠?

编辑:我知道有可能做一些像这个问题解决方案,但它似乎过于复杂,因为该android:animateLayoutChanges选项存在.我想知道是否可以使用该XML属性解决我的问题,以保持简单.

我的动画代码如下:

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);
    }
}
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

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

在此输入图像描述

Tun*_*i_D 18

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

TransitionManager.beginDelayedTransition(the rootView containing the cardView, new AutoTransition()); 
Run Code Online (Sandbox Code Playgroud)

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

至于为什么这样做,调用TransitionManager.beginDelayedTransition()使TransitionManger捕获父ViewGroup中的当前值并在下一个动画帧中渲染动画.在这种情况下传递的Transition是AutoTransition,它负责处理父ViewGroup中的所有淡入淡出,移动和调整大小.

请参见TransitionsTransitionManager

另外,请注意在适当的位置使用支持库中的Transitions,或者执行必要的API级别检查.

  • 你能解释一下*为什么*这个有用吗? (4认同)
  • 谢谢你补充说明.请在你发布的所有答案中养成这样做的习惯 (2认同)