使用RecyclerView进行视差标题效果

Question

我想更改我目前使用{List}的ListView以便使用RecyclerView，因此我可以使用StaggeredGridLayoutManager但是RecyclerView无法添加像ListView这样的标题。

通常使用ListView我在标题中设置一个空视图并将图像放在listview下面，并通过滚动列表来翻译底部图像以创建Parallax效果。

因此，如果没有标题，如何使用RecyclerView创建相同的视差效果？

Answer 1

最简单的方法是使用onScrollListener以下而不依赖任何库。

View view = recyclerView.getChildAt(0);
if(view != null && recyclerView.getChildAdapterPosition(view) == 0)  {
     view.setTranslationY(-view.getTop() / 2);// or use view.animate().translateY();
}

确保您的第二个viewHolder项目具有与抽屉/活动背景相匹配的背景颜色。所以滚动看起来是视差。

Answer 2

所以今天我尝试将这种效果归档到RecyclerView。我能够做到这一点，但由于代码太多，我将在这里粘贴我的github项目，我将解释项目的一些关键点。

https://github.com/kanytu/android-parallax-recyclerview

首先，我们需要查看getItemViewType类的RecyclerView.Adapter。此方法定义了我们正在处理的视图类型。该类型将传递给onCreateViewHolder，我们可以在那里夸大不同的观点。所以我做的是：检查位置是否是第一个。如果是，则膨胀标题，如果没有膨胀正常行。

我还添加了CustomRelativeLayout剪辑视图，这样我们就不会遇到任何分隔线问题，并且行会在标题顶部显示。

从这一点来看，你似乎知道其背后的其余逻辑。

最终结果是：

修改

如果您需要在适配器中插入某些内容，请确保通过在notifyItemChanged/Inserted方法中添加1来通知正确的位置。例如：

public void addItem(String item, int position) {
    mData.add(position, item);
    notifyItemInserted(position + 1); //we have to add 1 to the notification position since we don't want to mess with the header
}

我所做的另一项重要编辑是滚动逻辑。我使用的mCurrentOffset系统没有使用项目插入，因为如果添加项目，偏移量将会改变。所以我做的是：

ViewHolder holder = findViewHolderForPosition(0);
if (holder != null)
  ((ParallaxRecyclerAdapter) getAdapter()).translateHeader(-holder.itemView.getTop() * 0.5f);

为了测试这个，我添加了一个postDelayed Runnable，启动了应用程序，滚动到最后，将项目添加到位置0，然后再次向上滚动。结果是：

如果有人正在寻找其他视差效果，他们可以检查我的其他回购：

https://github.com/kanytu/android-parallax-listview

Answer 3

对于kotlin，您可以按以下方式配置回收站视图

//setting parallax effects
    recyclerView.addOnScrollListener(object :RecyclerView.OnScrollListener(){
        override fun onScrolled(recyclerView: RecyclerView?, dx: Int, dy: Int) {
            super.onScrolled(recyclerView, dx, dy)
            val view = recyclerView?.getChildAt(0)
            if (view != null && recyclerView?.getChildAdapterPosition(view) === 0) {
                val imageView = view.findViewById(R.id.parallaxImage)
                imageView.translationY = -view.top / 2f
            }
        }
    })

Answer 4

这个答案适合那些对GridLayoutManager或StaggeredGridLayoutManager

添加视差标题感到好奇的人

您希望在onBindViewHolder或onCreateViewHolder

中将以下代码添加到适配器

StaggeredGridLayoutManager.LayoutParams layoutParams =
                    (StaggeredGridLayoutManager.LayoutParams) holder.itemView.getLayoutParams();
            layoutParams.setFullSpan(true);