如何将CardView展开以重叠下一个RecyclerView项目？

Question

我有一个RecyclerView，它使用自定义LinearLayoutManager对CardView进行充气，其中滚动被禁用。 我总是只在屏幕上显示2个CardView。 每个CardView都有一个折叠部分，单击小箭头时会出现该部分。

问题：下一张卡被推下

我需要的是：在顶部的CardView上，拼写的部分应该重叠在底部的Cardview上。 我已经有一个动画来扩展它。 在底部，我想将图片重叠到顶部的CardView上。 此外，其他没有可见的CardViews永远不会出现在这个过程中。 我如何实现这一目标？

这是我的CardView：

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        card_view:cardElevation="8dp"
        card_view:cardCornerRadius="4dp">


    <androidx.constraintlayout.widget.ConstraintLayout
             android:layout_width="match_parent"
             android:layout_height="match_parent">

        <!--*************visible part****************************-->

        <ImageView
                android:id="@+id/clash_image"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                card_view:layout_constraintTop_toTopOf="parent"
                card_view:layout_constraintBottom_toTopOf="@id/tv1"
                android:src="@drawable/image_placeholder" card_view:layout_constraintEnd_toEndOf="parent"
                card_view:layout_constraintStart_toStartOf="parent"
                />

        <TextView android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:paddingLeft="5dp"
                  android:paddingRight="5dp"
                  android:text="#Hashtag1"
                    android:id="@+id/tv1"
                card_view:layout_constraintTop_toBottomOf="@+id/clash_image"
                card_view:layout_constraintStart_toStartOf="parent"/>
        <TextView android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:paddingLeft="5dp"
                  android:paddingRight="5dp"
                  android:text="#Hashtag1"
                  android:id="@+id/tv2"
                card_view:layout_constraintStart_toEndOf="@+id/tv1"
                card_view:layout_constraintTop_toBottomOf="@+id/clash_image"/>
        <TextView android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:paddingLeft="5dp"
                  android:paddingRight="5dp"
                  android:text="#Hashtag1"
                  android:id="@+id/tv3"
                  card_view:layout_constraintStart_toEndOf="@+id/tv2"
                  card_view:layout_constraintTop_toBottomOf="@+id/clash_image"/>

        <ImageView
                android:id="@+id/expand"
                android:src="@drawable/ic_expand"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                card_view:layout_constraintEnd_toEndOf="parent"
                card_view:layout_constraintTop_toBottomOf="@+id/clash_image"/>


        <!--*****************invisible part to expand on click****************************-->


        <RelativeLayout
                android:id="@+id/rlCollapsingPart"
                android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        card_view:layout_constraintTop_toBottomOf="@+id/expand"
                        card_view:layout_constraintStart_toStartOf="parent"
        android:visibility="gone">

            <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/avatarThumbnail"
                    style="@style/icon"
                    android:src="@drawable/defaultavatar"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentTop="true"/>

            <TextView
                    android:id="@+id/username_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    tools:text="willsmith"
                    android:textColor="@color/black"
                    android:textStyle="bold"
                    android:layout_toEndOf="@+id/avatarThumbnail"
            />



            <TextView
                    android:id="@+id/caption_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingStart="10dp"
                    android:textColor="@color/black"
                    android:layout_alignParentStart="true"
                    android:layout_below="@+id/avatarThumbnail"
                    tools:text="willsmith This is a caption for the post. It's actually a very long caption."/>


            <RelativeLayout android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_below="@+id/caption_text"
            android:background="@color/grey">

                <ImageView
                        android:id="@+id/like_image"
                        android:layout_height="45dp"
                        android:layout_width="45dp"
                        android:padding="10dp"
                        android:src="@drawable/ic_home"
                        android:layout_alignParentStart="true"/>

                <ImageView
                        android:id="@+id/comment_image"
                        card_view:layout_constraintStart_toEndOf="@id/like_image"
                        card_view:layout_constraintTop_toTopOf="@id/like_image"
                        card_view:layout_constraintBottom_toBottomOf="@id/like_image"
                        android:layout_height="45dp"
                        android:layout_width="45dp"
                        android:padding="10dp"
                        android:src="@drawable/ic_home"
                        android:layout_toEndOf="@+id/like_image"/>

                <ImageView
                        android:id="@+id/share_image"
                        android:layout_toEndOf="@+id/comment_image"
                        android:layout_height="45dp"
                        android:layout_width="45dp"
                        android:padding="10dp"
                        android:src="@drawable/ic_home"/>

                <ImageView
                        android:id="@+id/more_image"
                        style="@style/icon"
                        android:src="@drawable/ic_home"
                        android:layout_alignParentEnd="true"/>

            </RelativeLayout>

        </RelativeLayout>





    </androidx.constraintlayout.widget.ConstraintLayout>

</com.google.android.material.card.MaterialCardView>

编辑

我使用适配器中的基本点击监听器和动画来扩展隐藏部分。 Adapter.kt

override fun onBindViewHolder(holder: ViewHolder, position: Int) {

...         

holder.view.expand.setOnClickListener(View.OnClickListener {
        val slideDown = AnimationUtils.loadAnimation(context, R.anim.card_expand_animator)
        //toggling visibility
        if(holder.view.rlCollapsingPart.visibility == View.VISIBLE) {
            holder.view.rlCollapsingPart.visibility = View.GONE
        }else{
            holder.view.rlCollapsingPart.startAnimation(slideDown)
            holder.view.rlCollapsingPart.visibility = View.VISIBLE    
        }
    })  

}

MyAnim.xml （在anim文件夹中）

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <scale
            android:duration="500"
            android:fromXScale="1.0"
            android:fromYScale="0.0"
            android:toXScale="1.0"
            android:toYScale="1.0"/>
</set>

Answer 1

经过进一步的研究和理解，这是不可能的。 为了“重叠”另一张卡片，我必须使用PupUpWindow来PupUpWindow新的布局，使用Shared Element原则可以看起来很流畅。 否则，LayoutManager将始终按下另一张卡。 现在我选择了一个更简单的解决方案，即将隐藏部分扩展到顶部，以覆盖Card的图像。