回收器视图 - 滚动时调整项目视图的大小(用于类似轮播的效果) [英] Recycler view - resizing item view while scrolling (for carousel like effect)

问题描述

我需要创建一个垂直的回收视图，其中屏幕中央的项目视图应该调整大小以在滚动时具有类似缩放的效果.

我尝试过但没有奏效的事情:

1. 添加滚动侦听器并按位置循环遍历项目视图，测量居中位置，然后更新居中 view 的 LayoutParams.

   • RecyclerView 不会让滚动时计算项目的位置或更新视图.如果在 onScrolled
   中执行此类操作，则会抛出 IllegalStateException

2. 在滚动状态为 IDLE 或 SETTLING 时更改 onScrollStateChanged 中居中项目视图的 LayoutParams.

   • 仅在滚动已经/即将完成后更新视图，而不是在滚动项目期间执行.

3. 剩下的最后一个选项是实现自己的自定义 LayoutManager，它会扩展默认的 LayoutManager.

   • 据我所知，实现自定义 Layoutmanager 涉及处理许多需要处理的复杂计算.

任何其他解决方案或想法将不胜感激.

解决方案

我在 SO 上找到了

垂直方向:

I need to create a vertical recyclerview in which item view in center of the screen should be resized to have zoom like effect while scrolling.

Things I have tried but didn't work :

1. Adding a scroll listener and looping through item views by position, measuring the centered position then updating LayoutParams of centered view.

   • RecyclerView won't let compute the position of items or update view while scrolling. It throws IllegalStateException if such operations are performed in onScrolled

2. Changing LayoutParams of centered item view in onScrollStateChanged while scrolling state is IDLE or SETTLING.

   • That only updates view after scroll has been/is going to be completed, not during scrolling on items is being performed.

3. The last option remained is implementing own custom LayoutManager that would extend default LayoutManager.

   • As far as I know, implementing custom Layoutmanager involves dealing with a lot more complex computations that needs to handled.

Any other solutions or ideas will be appreciated.

解决方案

I found this answer on SO, which did the exact same thing horizontally. Answer provides a working solution that extends LinearLayoutManager. I modified it a bit for also adapting vertical lists and it works. If there is any mistake in implementation, let me know in comments. Cheers!

Custom Layout Manager :

public class CenterZoomLayoutManager extends LinearLayoutManager {

    private final float mShrinkAmount = 0.15f;
    private final float mShrinkDistance = 0.9f;

    public CenterZoomLayoutManager(Context context) {
        super(context);
    }

    public CenterZoomLayoutManager(Context context, int orientation, boolean reverseLayout) {
        super(context, orientation, reverseLayout);
    }


    @Override
    public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) {
        int orientation = getOrientation();
        if (orientation == VERTICAL) {
            int scrolled = super.scrollVerticallyBy(dy, recycler, state);
            float midpoint = getHeight() / 2.f;
            float d0 = 0.f;
            float d1 = mShrinkDistance * midpoint;
            float s0 = 1.f;
            float s1 = 1.f - mShrinkAmount;
            for (int i = 0; i < getChildCount(); i++) {
                View child = getChildAt(i);
                float childMidpoint =
                        (getDecoratedBottom(child) + getDecoratedTop(child)) / 2.f;
                float d = Math.min(d1, Math.abs(midpoint - childMidpoint));
                float scale = s0 + (s1 - s0) * (d - d0) / (d1 - d0);
                child.setScaleX(scale);
                child.setScaleY(scale);
            }
            return scrolled;
        } else {
            return 0;
        }
    }

    @Override
    public int scrollHorizontallyBy(int dx, RecyclerView.Recycler recycler, RecyclerView.State state) {
        int orientation = getOrientation();
        if (orientation == HORIZONTAL) {
            int scrolled = super.scrollHorizontallyBy(dx, recycler, state);

            float midpoint = getWidth() / 2.f;
            float d0 = 0.f;
            float d1 = mShrinkDistance * midpoint;
            float s0 = 1.f;
            float s1 = 1.f - mShrinkAmount;
            for (int i = 0; i < getChildCount(); i++) {
                View child = getChildAt(i);
                float childMidpoint =
                        (getDecoratedRight(child) + getDecoratedLeft(child)) / 2.f;
                float d = Math.min(d1, Math.abs(midpoint - childMidpoint));
                float scale = s0 + (s1 - s0) * (d - d0) / (d1 - d0);
                child.setScaleX(scale);
                child.setScaleY(scale);
            }
            return scrolled;
        } else {
            return 0;
        }

    }
}

With horizontal orientation :

with vertical orientation :

这篇关于回收器视图 - 滚动时调整项目视图的大小(用于类似轮播的效果)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！