回收者视图中每个项目的视差效果?

时间:2016-04-18 09:29:21

标签: android animation android-recyclerview soundcloud parallax

我试图使用Parallax并获得一些奇怪的错误,想知道是否有人可以添加一些输入。我见过的唯一有效实现视差的应用就是soundcloud。它非常微妙,但每个项目都有一个图像背景,滚动时它具有视差效果。

我已经创建了一个自定义的RecyclerView来处理这个问题,这是我到目前为止所做的:

public class ParallaxScrollListener extends RecyclerView.OnScrollListener {

private float scrollSpeed = 0.5f;

@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
    super.onScrolled(recyclerView, dx, dy);
    LinearLayoutManager layoutManager = (LinearLayoutManager) recyclerView.getLayoutManager();

    int firstVisible = layoutManager.findFirstVisibleItemPosition();
    int visibleCount = Math.abs(firstVisible - layoutManager.findLastVisibleItemPosition());

    Matrix imageMatrix;
    float tempSpeed = -100;

    if (dy > 0) {
        tempSpeed = scrollSpeed;
    } else if (dy < 0) {
        tempSpeed = -scrollSpeed;
    }

    for (int i = firstVisible; i < (firstVisible + visibleCount); i++) {
        ImageView imageView = ((MyClass.MyAdapter.MyViewHolder) recyclerView.getLayoutManager().findViewByPosition(i).getTag()).image;
        if (imageView != null) {
            imageMatrix = imageView.getImageMatrix();
            imageMatrix.postTranslate(0, tempSpeed);
            imageView.setImageMatrix(imageMatrix);
            imageView.invalidate();
        }
    }
}

在我的RecyclerView适配器onBindView中我也有以下内容:

 Matrix matrix = viewHolder.image.getImageMatrix();
 matrix.postTranslate(0, 0);
 viewHolder.image.setImageMatrix(matrix);
 viewHolder.itemView.setTag(viewHolder);

最后在onViewRecycled方法中,我有以下内容:

@Override
    public void onViewRecycled(MyViewHolder viewHolder) {
        super.onViewRecycled(viewHolder);
        if (viewHolder.image != null) {
            viewHolder.image.setScaleType(ImageView.ScaleType.MATRIX);
            Matrix matrix = viewHolder.image.getImageMatrix();
            // this is set manually to show to the center
            matrix.reset();
            viewHolder.image.setImageMatrix(matrix);
        }
}

I been working with this code on Github to get the idea

因此视差有效,但我的RecyclerView中的视图也会移动。我在图像下方有一个CardView,它会移动,在每个项目之间产生很大的间隙。滚动是导致这种情况的原因,间隙越大,向上和向下滚动越大,随着视差将它们移出边界,图像变小。

我已尝试弄乱OnScrollListener中的scrollSpeed这样的数字但是虽然它减少了错误,但它也减少了视差。

有没有人对我如何在RecyclerView的每个项目上实现无错视差效果有任何想法?我觉得我已经到了这个地方,但它仍然非常多,我不知道下一步是什么。

Ps我试过看第三方图书馆,但他们似乎都只使用像CoordinatorLayout这样的标题视差,我还没有找到任何只在列表中的每个项目上做的事情。

我希望这个问题能够得到很好的讨论,即使我不能解决我的问题,因为Parallax似乎在Android中未得到充分利用,并且很少涉及它。

感谢您的时间,感谢您的帮助。

2 个答案:

答案 0 :(得分:4)

我设法让Parallax使用这个库:https://github.com/yayaa/ParallaxRecyclerView

对于任何自己这样做的人来说,玩它仍然是一件好事,看看它是如何运作的。

与我的代码类似的概念,但它确实有效!哈哈。

答案 1 :(得分:1)

你走在正确的轨道上。您必须使用ScrollListener。此外,您必须访问RecyclerViews LayoutManager并迭代所有可见的项目,并根据滚动的像素数量设置translateY

事情变得有点复杂,因为你不能使用recyclerView.getChildAt(pos)因为LayoutManager负责布局元素,它们在LayoutManager中的顺序可能与getChildAt(pos)不同。 / p>

所以算法基本上应该是这样的(伪代码,假设使用了LinearLayoutManager):

for (int i = layoutManager.findFirstVisibleItemPosition(); i <= layoutmanager.findLastVisibleItemPosition; i++){

   // i is the adapter position

   ViewHolder vh = recyclerView.findViewHolderForAdapterPosition(i);
   vh.imageView.setTranslationY( computedParalaxOffset ); // assuming ViewHolder has a imageView field on which you want to apply the parallax effect
}