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 （在动画文件夹中）

<?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来增加新的布局，使用Shared Element原理看起来很平滑。否则，LayoutManager将始终向下推另一张Card。现在，我选择了一个更简单的解决方案，即将隐藏部分向上扩展到顶部，以覆盖Card的图像。

如何展开CardView以使其与下一个RecyclerView项重叠？

1 个答案: