RecyclerView仿Gallery效果(带有特效)

由于RecyclerView提供的LayoutManager有限，只能满足日常常见的一些效果，如果想达到一些想要的效果，则需要重写LayoutManager了。网上重写LayoutManger的例子非常多，例如你可能误会了！原来自定义LayoutManager可以这么简单。所以以下关于LayoutManger需要重写方法的细节我就不再这里一一赘述了。

首先上下我的运行效果图：

Gallery浏览模式.gif

如图所示，这里需要实现的细节包括缩放，渐变和滑动自动居中。

实现细节如下：

1、设计草图：

无标题.png

这里我将所有的视图宽均设为屏幕的70%，高为屏幕的90%，缩放的最小比例设置为7/9，o1和o2分别为p1和p3的中心点。

2、缩放周期

a、每一个视图中心点移动到下一个视图中心点算一次缩放周期，且每个视图宽均为屏幕的70%，故o1到o2距离=70%屏幕宽，即L = getWidth()*0.7。
b、令滑动总距离为scrollOffset，则当前中心点距离屏幕中心点距离为L1 = rect.left + getWidth() * 0.35 - getWidth() * 0.5 - scrollOffset，其中rect为当前视图所在矩阵。
c、缩放比例区间从7/9至1
d、可计算出每次滑动的缩放比例为scale = 1 - (L1 / L) * (2/9f)
e、渐变处理。这里我将渐变透明度区间设置为50%至1
f、对应源码为：

...
Rect rect = allRects.get(i);
scale = (float) (rect.left + getWidth() * 0.35 - getWidth() * 0.5 - scrollOffset);
scale /= translate();
scale = Math.abs(scale);
v.setAlpha(1 - scale * 0.5f);
scale *= 2 / 9f;
scale = 1 - scale;
v.setScaleX(scale);
v.setScaleY(scale);
...

3、滑动停止自动居中处理

RecyclerView从24.2.0开始增加了SnapHelper的辅助类，用于处理滑动结束时item对齐到某个位置。故居中处理就十分简单了：
new LinearSnapHelper().attachToRecyclerView(recyclerView);

4、最终代码

public class GalleryLayoutManager extends RecyclerView.LayoutManager {
    private int totalWidth;
    private int scrollOffset;
    private SparseArray allRects;

    public GalleryLayoutManager() {
        allRects = new SparseArray<>();
    }

    @Override
    public RecyclerView.LayoutParams generateDefaultLayoutParams() {
        return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    }

    @Override
    public boolean canScrollHorizontally() {
        return true;
    }

    @Override
    public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
        calculateChildrenSize(recycler);
        recyclerAndFillView(recycler, state);
    }

    private void calculateChildrenSize(RecyclerView.Recycler recycler) {
        totalWidth = (int) (getWidth() * 0.1);
        for (int i = 0; i < getItemCount(); i++) {
            View v = recycler.getViewForPosition(i);
            addView(v);
            measureChildWithMargins(v, (int) (getWidth() * 0.3), (int) (getHeight() * 0.1));
            calculateItemDecorationsForChild(v, new Rect());
            int width = getDecoratedMeasuredWidth(v);
            int height = getDecoratedMeasuredHeight(v);
            Rect childRect = allRects.get(i);
            if (null == childRect) {
                childRect = new Rect();
            }
            childRect.set(totalWidth, (getHeight() - height) / 2, totalWidth + width, (getHeight() + height) / 2);
            totalWidth += width;
            allRects.put(i, childRect);
        }
        totalWidth += getWidth() * 0.1;
    }

    @Override
    public int scrollHorizontallyBy(int dx, RecyclerView.Recycler recycler, RecyclerView.State state) {
        if (scrollOffset + dx < 0) {
            dx = -scrollOffset;
        } else if (scrollOffset + dx > totalWidth - getWidth()) {
            dx = totalWidth - getWidth() - scrollOffset;
        }
        offsetChildrenHorizontal(-dx);
        recyclerAndFillView(recycler, state);
        scrollOffset += dx;
        return dx;
    }

    private void recyclerAndFillView(RecyclerView.Recycler recycler, RecyclerView.State state) {
        if (getItemCount() == 0 || state.isPreLayout()) return;
        int w = getWidth();
        int h = getHeight();
        detachAndScrapAttachedViews(recycler);
        Rect displayRect = new Rect(scrollOffset, 0, scrollOffset + w, h);

        float scale;
        for (int i = 0; i < getItemCount(); i++) {
            if (Rect.intersects(displayRect, allRects.get(i))) {
                View v = recycler.getViewForPosition(i);
                measureChildWithMargins(v, (int) (getWidth() * 0.3), (int) (getHeight() * 0.1));
                addView(v);

                Rect rect = allRects.get(i);
                scale = (float) (rect.left + getWidth() * 0.35 - getWidth() * 0.5 - scrollOffset);
                scale /= translate();
                scale = Math.abs(scale);
                v.setAlpha(1 - scale * 0.5f);
                scale *= 2 / 9f;
                scale = 1 - scale;
                v.setScaleX(scale);
                v.setScaleY(scale);
                layoutDecorated(v, rect.left - scrollOffset, rect.top, rect.right - scrollOffset, rect.bottom);
            }
        }
    }

    private float translate() {
        return (float) (getWidth() * 0.7);
    }
}