RecyclerView 的视差标题效果 [英] Parallax header effect with RecyclerView

问题描述

我想更改我目前使用的 ListView 以使用 RecyclerView 以便我可以使用 StaggeredGridLayoutManager 但 RecyclerView 无法添加像 ListView 这样的标题.

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

如果没有标题，我如何使用 RecyclerView 创建相同的视差效果?

解决方案

所以今天我尝试在 RecyclerView 上存档这种效果.我能做到，但由于代码太多，我将在此处粘贴我的 github 项目，我将解释该项目的一些关键点.

I want to change my ListView I currently have over to use RecyclerView so I can make use of StaggeredGridLayoutManager but RecyclerView does not have the ability to add a header like ListView.

Usually with a ListView I set an empty view in the header and put the image below the listview and translate the bottom image with the scrolling of the list to create the Parallax effect.

So with out a header how can I create the same parallax effect with RecyclerView?

解决方案

So today I tried to archive that effect on a RecyclerView. I was able to do it but since the code is too much I will paste here my github project and I will explain some of the key points of the project.

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

First we need to look at getItemViewType on the RecyclerView.Adapter class. This methods defines what type of view we're dealing with. That type will be passed on to onCreateViewHolder and there we can inflate different views. So what I did was: check if the position is the first one. If so then inflate the header, if not inflate a normal row.

I've added also a CustomRelativeLayout that clips the view so we don't have any trouble with the dividers and with the rows getting on top of the header.

From this point you seem to know the rest of the logic behind it.

The final result was:

EDIT:

If you need to insert something in adapter make sure you notify the correct position by adding 1 in the notifyItemChanged/Inserted method. For example:

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
}

Another important edit I've done is the scroll logic. The mCurrentOffset system I was using didn't work with the item insertion since the offset will change if you add an item. So what I did was:

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

To test this I added a postDelayed Runnable, started the app, scrolled to the end, add the item in position 0, and scroll up again. The result was:

If anyone is looking for other parallax effects they can check my other repo:

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

这篇关于RecyclerView 的视差标题效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！