翻页效果的RecyclerView | 贺文杰的博客

实现一个自定义LayoutManager，默认只有一个抽象方法，实现的重点在于onLayoutChildren对页面的布局和滑动操作，当然还有缓存。

属性定义

mPosition是当前item的位置信息，mPositionOffset是偏移信息，mMinVy是最低的y方向的速度，这个需要根据不同屏幕尺寸来定。

private static final int MIN_VY = 300;
private int mPosition = 0;
private int mPositionOffset = 0;
private int mMinVy = 0;
private Context mContext;

布局流程

为了实现翻页效果，每次滑动都是有前景页和背景页。当翻页时，如果flip没有超过一半，当前页是primary（前景页），下一页是secondary（背景页）；当超过一半当前页已经是“下一页”（背景页）了，而刚才的当前页变成了上一页（前景页）。值得注意的是，需要把需要把item布局文件的背景设置成白色，不然会有重叠效果。翻页效果在FlipCard中实现。

@Override
public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {

    //如果没有item，直接返回
    if (getItemCount() <= 0) {
        return;
    }
    // 跳过preLayout，preLayout主要用于支持动画
    if (state.isPreLayout()) {
        return;
    }
    fill(recycler, state);
}

private void fill(RecyclerView.Recycler recycler, RecyclerView.State state) {

        checkPosition(state);

        View primary;
        View pre = null;
        View next = null;

        detachAndScrapAttachedViews(recycler);

    	// 当前页
        primary = recycler.getViewForPosition(mPosition);

        if (mPosition + 1 < state.getItemCount()) {
            // 下一页
            next = recycler.getViewForPosition(mPosition + 1);
        }
        if (mPosition - 1 >= 0) {
            // 上一页
            pre = recycler.getViewForPosition(mPosition - 1);
        }
        View secondary = null;

    	// 根据偏移计算是需要上一页还是下一页
        if (mPositionOffset > 0) {
            secondary = next;
        } else if (mPositionOffset < 0) {
            secondary = pre;
        }
        if (mPositionOffset != 0 && secondary != null) {
            // 存在背景页就添加
            addView(secondary);
            measureChildWithMargins(secondary, 0, 0);
            layoutDecorated(secondary, 0, 0, getWidth(), getHeight());
        }

    	// 回收另一页的信息
        if (pre != null && secondary !=pre) {
            recycler.recycleView(pre);
        }
        if (next != null && secondary !=next) {
            recycler.recycleView(next);
        }

    	// 添加当前页作为前景页
        addView(primary);
        measureChildWithMargins(primary, 0, 0);
        layoutDecorated(primary, 0, 0, getWidth(), getHeight());

        if (primary instanceof FlipCard && (secondary == null || secondary instanceof FlipCard)) {
            final float percent = (float) mPositionOffset / getItemHeightPositon();
            // 计算滑动比例，得到flip效果
            Log.d(TAG, "fill: "+percent);
            if (secondary != null) {
                ((FlipCard) secondary).setState(false, percent);
                ((FlipCard) primary).setState(true, percent);
            } else {
                // 当在第一页或最后一页时不存在背景页（留白/刷新等）
                ((FlipCard) primary).setState(true, percent);
            }
        } else {
            throw new IllegalStateException("view should be FlipCard");
        }
    }

    private void checkPosition(RecyclerView.State state) {
        // 页面最多能滑动到 -2/5*itemHeight ~ itemHeight*(state.getItemCount()-1) + itemHeight*2/5
        final int itemHeight = getItemHeightPositon();
        final int current = mPosition * itemHeight + mPositionOffset;
        final int max = itemHeight * (state.getItemCount() - 1) + itemHeight * 2 / 5;

        int pos = Math.max(-itemHeight * 2 / 5, Math.min(current, max));
        mPosition = Math.round(pos / (float)itemHeight);
        mPosition = mPosition >= 0 ? mPosition : 0;
        mPositionOffset = pos - mPosition * itemHeight;
    }

为了使翻页效果流畅，设置每一页的高度都是实际高度的2/3，这样避免完全滑满一个屏幕才完成翻页效果（不考虑惯性滑动）。

// 这样把一个item的高度设为了原来的2/3，直观的结果就是只要滑动2/3就相当于过了一个item
private int getItemHeightInPositon() {
    return getHeight() * 2 / 3;
}

滑动

完成上述步骤自然还不能滑动

@Override
public boolean canScrollVertically() {
	// 纵向可滑
    return true;
}

@Override
public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) {
    final int before = mPosition * getItemHeightPositon() + mPositionOffset;

    mPositionOffset += dy;
    checkPosition(state);
    final int after = mPosition * getItemHeightPositon() + mPositionOffset;

    final int ans = after - before;
    fill(recycler, state);

    return ans;
}

@Override
public void scrollToPosition(int position) {
    mPosition = position;
    mPositionOffset = 0;
    requestLayout();
    Log.d(TAG, "scrollToPosition " + position + " position " + mPosition + " positionOffset " + mPositionOffset);
}

// 平稳滑动
@Override
public void smoothScrollToPosition(RecyclerView recyclerView, RecyclerView.State state, int position) {
    Log.d(TAG, "smoothScrollTo " + position + " position " + mPosition + " positionOffset " + mPositionOffset);

    FlipScroller scroller = new FlipScroller(recyclerView.getContext());
    scroller.setTargetPosition(position);
    startSmoothScroll(scroller);

}

private class FlipScroller extends LinearSmoothScroller {
    private static final String TAG = "FlipScroller";

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

    @Override
    protected void onStop() {
        super.onStop();
        Log.d(TAG, "onStop: ");
    }

    @Override
    public int calculateDyToMakeVisible(View view, int snapPreference) {
        final int position = getPosition(view);
        final int now = mPositionOffset + mPosition * getItemHeightPositon();
        final int to = position * getItemHeightPositon();
        Log.d(TAG, "calculateDyToMakeVisible: position " + position + " ans " + (to - now));
        return (now - to);
    }

    @Override
    public int calculateDxToMakeVisible(View view, int snapPreference) {
        return 0;
    }

    @Override
    protected int calculateTimeForScrolling(int dx) {

        Log.d(TAG, "calculateTimeForScrolling: ");
        int time = super.calculateTimeForScrolling(dx*5);

        return time;
    }

}
/*
以下四个方法是为了滑动时的对齐操作，不至于滑了半页然后就停在那
详细可看：https://www.jianshu.com/p/e54db232df62
*/
@Override
public PointF computeScrollVectorForPosition(int targetPosition) {
    int dir = 0;
    int now = mPosition * getItemHeightPositon() + mPositionOffset;
    int to = targetPosition * getItemHeightPositon();
    if (now > to) {
        dir = -1;
    } else if (now < to) {
        dir = 1;
    }
    Log.d(TAG, "computeScrollVector " + dir + " now " + mPosition + " target " + targetPosition);

    return new PointF(0, dir);
}
public int calculateDistance(View view) {
    int pos = getPosition(view);
    final int now = getItemHeightPositon() * mPosition + mPositionOffset;
    final int to = getItemHeightPositon() * pos;

    return to - now;
}

public int findTargetPosition(int vY) {
    int ans = mPosition;
    Log.d(TAG, "findTargetPosition: "+vY+"~"+mPositionOffset);
    int absV = vY > 0 ? vY : -vY;
    if (absV > mMinVy) {
        if (vY * mPositionOffset > 0) {
            // 速度与位置偏移同向
            int d = vY > 0 ? 1 : -1;
            ans += d;
        } else {
            ans = mPosition;
        }
    } else {
        ans = mPosition;
    }

    int count = getItemCount();
    if (count == 0) {
        return 0;
    }

    ans = Math.min(count - 1, Math.max(0, ans));
    return ans;
}

public View findSnapView() {
    Log.d(TAG, "findSnapView: "+getChildCount()+"~"+getItemCount());
    for (int i = 0;i < getChildCount(); i ++ ){
        View child = getChildAt(i);
        if (getPosition(child) == mPosition) {
            return child;
        }
    }
    return null;
}

// 滑动时的对齐操作
// 惯性滑动先根据findTargetSnapPosition()计算到TargetSnapView，再根据calculateDistanceToFinalSnap()计算到TargetSnapView与对齐位置的剩余距离。普通滑动就是等到滑动停止，findSnapView()找到需要对齐的View即SanpView，再calculateDistanceToFinalSnap()计算得到额外的滑动距离。
public class MySnap extends SnapHelper {
    private static final String TAG = "MySnap";

    @Nullable
    @Override
    public int[] calculateDistanceToFinalSnap(@NonNull RecyclerView.LayoutManager layoutManager, @NonNull View targetView) {
        if (layoutManager instanceof CustomLayoutManager) {
            return new int[]{0, ((CustomLayoutManager) layoutManager).calculateDistance(targetView)};
        } else {
            throw new RuntimeException();
        }
    }

    @Nullable
    @Override
    public View findSnapView(RecyclerView.LayoutManager layoutManager) {
        CustomLayoutManager flipLayoutManager = (CustomLayoutManager) layoutManager;

        return flipLayoutManager.findSnapView();
    }

    @Override
    public int findTargetSnapPosition(RecyclerView.LayoutManager layoutManager, int velocityX, int velocityY) {
        if (layoutManager instanceof CustomLayoutManager) {
            return ((CustomLayoutManager) layoutManager).findTargetPosition(velocityY);
        } else {
            throw new RuntimeException();
        }
    }
}

翻页View

public class FlipCard extends FrameLayout {

    private static final String TAG = "FlipCard";

    private Paint mScrimPaint;

    private Camera mCamera;
    private Matrix mMatrix;

    private boolean mIsForground;
    private float mPercent;

    public FlipCard(Context context) {
        this(context, null);
    }

    public FlipCard(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public FlipCard(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        mScrimPaint = new Paint();
        mCamera = new Camera();
        mMatrix = new Matrix();
    }

    public void setState(boolean isForground, float percent) {
        mIsForground = isForground;
        mPercent = percent;
    }

    @Override
    public void draw(Canvas canvas) {

        if (mPercent == 0) {
            super.draw(canvas);
            return;
        }

        final int height = canvas.getHeight();
        final int width = canvas.getWidth();
        final float percent = mPercent > 0 ? mPercent : -mPercent;

        if (mIsForground) {
            // clip card effect for forground view
            // draw part1
            int save1 = canvas.save();
            if (mPercent > 0) {
                canvas.clipRect(0, 0, width, height / 2);
            } else {
                canvas.clipRect(0, height / 2, width, height);
            }
            super.draw(canvas);
            canvas.restoreToCount(save1);

            // draw part2
            if (mPercent < 0) {
                canvas.clipRect(0, 0, width, height / 2);
            } else {
                canvas.clipRect(0, height / 2, width, height);
            }
            mCamera.save();
            mCamera.setLocation(0f, 0f, -80);
            mCamera.rotateX(mPercent * 180);
            mCamera.getMatrix(mMatrix);
            mCamera.restore();
            mMatrix.preTranslate(-width / 2, -height / 2);
            mMatrix.postTranslate(width / 2, height / 2);
            canvas.concat(mMatrix);
            super.draw(canvas);

            mScrimPaint.setColor(0x08000000);
            canvas.drawRect(0, 0, width, height, mScrimPaint);
        } else {
            // 作为背景，不需要有flip效果，只需要切出一半view展示出来即可
            // draw shadow for underground view
            final int scrimColor = (int) (0xff * (1 - percent * 2)) << 24;
            mScrimPaint.setColor(scrimColor);

            if (mPercent < 0) {
                canvas.clipRect(0, 0, width, height / 2);
            } else {
                canvas.clipRect(0, height / 2, width, height);
            }

            super.draw(canvas);
            canvas.drawRect(0, 0, width, height, mScrimPaint);
        }
    }

}

使用

customLayoutManager = new CustomLayoutManager(this);
recyclerView.setLayoutManager(customLayoutManager);
adapter = new CustomAdapter(myData,MainActivity.this);
recyclerView.setAdapter(adapter);

MySnap snap = new MySnap();
snap.attachToRecyclerView(recyclerView);

缓存

翻页效果带来了本身其滑动范围有限，依次只能上下翻页，因为对于缓存，首先稍微设置mCacheViews大一些，默认为2，由于每次翻页会绑定下一页，因此我设置为3来保证由本页（例：1）翻到下一页（例：2）时，不会因为加载再下一页（例：3）而导致原来的上一页（例：0）被回收。

另一项策略时预加载Prefetch，对于自定义LayoutManager，需要重写LayoutManager.collectAdjacentPrefetchPositions()方法，可以参考LinearLayoutManager实现。

包含完整源码的项目：https://github.com/starsight/Gank

参考链接

让你明明白白的使用RecyclerView——SnapHelper详解

https://medium.com/google-developers/recyclerview-prefetch-c2f269075710

Android ListView 与 RecyclerView 对比浅析–缓存机制