ScaleViewPager类似魅族banner效果的实现

17年初的时候实现过类似腾讯视频的vip页面的banner效果，后来看到鸿洋推送的文章，有人实现类似魅族的banner效果，当时看了看觉得和腾讯视频当年的风格有些类似，但是又不是完全的一样，跟魅族的banner还有些区别，于是就抽出时间实现了一个相似度非常高的魅族banner效果。

一共有两种实现的方式，一个是基于ViewPager,一个是基于RecyclerViewPager(https://github.com/lsjwzh/RecyclerViewPager)。思路都是一样的。实现该效果的有两个重要的点。一是要改变ViewPager或RecyclerViewPager的子view的绘制顺序，达到中间的view在最上层绘制，二是要根据滑动的大小方向等来调整view的放大缩小平移等算法。

一、改变子view的绘制顺序

ViewPager：

• 调用setChildrenDrawingOrderEnabledCompat(true); 或者setPageTransformer(true,new PageTransformer());
• 重写protected int getChildDrawingOrder(int childCount, int i)方法，实现你自己的算法来控制绘制的顺序。
• 5.0以上的版本也可以不通过以上的方式设置，使用setZ(float z)方法来设置相关view的z值，从而实现覆盖的观感（此文暂时不详表,尝试过，可以实现，有兴趣可以交流）；

RecyclerViewPager: setChildDrawingOrderCallback(new ScaleChildDrawingOrderCallback()); 设置自己实现的ChildDrawingOrderCallback中的onGetChildDrawingOrder(int childCount, int i)方法，实现你自己的算法来控制绘制的顺序。
具体算法：

private ArrayList<Integer> childCenterXAbs = new ArrayList<>();//子view的X中心点距离父布局X的中心点的绝对距离的存放集合
private SparseArray<Integer> childIndex = new SparseArray<>();//子view中心点作为key,存放的view最初的索引位置

protected int getChildDrawingOrder(int childCount, int n) {
    if (n == 0 || childIndex.size() != childCount) {
        childCenterXAbs.clear();
        childIndex.clear();
        //先获得当前控件（ViewPager）的中心点在屏幕的位置
        int viewCenterX = getViewCenterX(this);
        for (int i = 0; i < childCount; ++i) {
            //计算每个子View中心点的X值和父布局（ViewPager）中心点的X值的距离
            int indexAbs = Math.abs(viewCenterX - getViewCenterX(getChildAt(i)));
            //两个距离相同，后来的那个做自增，从而保持abs不同
            if (childIndex.get(indexAbs) != null) {
                ++indexAbs;
            }
            childCenterXAbs.add(indexAbs);
            childIndex.append(indexAbs, i);
        }
        Collections.sort(childCenterXAbs);//1,0,2  0,1,2
    }
    //哪个item距离中心点远一些，就先draw它。（最近的就是中间放大的item,最后draw）(n=0，draw第一个，即childCenterXAbs中最大的)
    return childIndex.get(childCenterXAbs.get(childCount - 1 - n));
}

//获取某个view的中心点在屏幕上的X值
private int getViewCenterX(View view) {
    int[] array = new int[2];
    view.getLocationOnScreen(array);
    return array[0] + view.getWidth() / 2;
}   

二、实现对应的PageTransformer

ViewPager：setPageTransformer(true,new PageTransformer());
RecyclerViewPager：addOnScrollListener(new ScaleOnScrollListener());

private float mScaleMax = 1.0f;//最大的放大系数，建议是1.0
private float mScaleMin = 0.914f;//最小的缩小系数，建议不要和mScaleMax 相差太多
private float mCoverWidth = 40f;//中间的view覆盖两侧的view的大小
   class SPageTransformer implements ViewPager.PageTransformer {

    private float reduceX = 0.0f;
    private float itemWidth = 0;
    private float offsetPosition = 0f;

    @Override
    public void transformPage(View view, float position) {
        if (offsetPosition == 0f) {
            float paddingLeft = ScaleViewPager.this.getPaddingLeft();
            float paddingRight = ScaleViewPager.this.getPaddingRight();
            float width = ScaleViewPager.this.getMeasuredWidth();
            offsetPosition = paddingLeft / (width - paddingLeft - paddingRight);
        }
        float currentPos = position - offsetPosition;
        if (itemWidth == 0) {
            itemWidth = view.getWidth();
            //由于左右边的view缩小而与原始的view宽度相比减小的宽度值的一半
            //当mScaleMax = 1.0f时，reduceX =（mScaleMax  - mScaleMin)) * itemWidth / 2.0f;
            reduceX = (((1.0f - mScaleMax) +（1.0f - mScaleMin)) * itemWidth / 2.0f;
        }
        if (currentPos <= -1.0f) {
            view.setTranslationX(reduceX + mCoverWidth);
            view.setScaleX(mScaleMin);
            view.setScaleY(mScaleMin);
        } else if (currentPos <= 1.0) {
            float scale = (mScaleMax - mScaleMin) * Math.abs(1.0f - Math.abs(currentPos));
            float translationX = currentPos * -reduceX;
            if (currentPos <= -0.5) {//两个view中间的临界，一般是从右到左滑动时，这时两个view在同一层，左侧View需要往X轴正方向移动覆盖的值(即：mCoverWidth )
                view.setTranslationX(translationX + mCoverWidth * Math.abs(Math.abs(currentPos) - 0.5f) / 0.5f);
            } else if (currentPos <= 0.0f) {
                view.setTranslationX(translationX);
            } else if (currentPos >= 0.5) {//两个view中间的临界，这时两个view在同一层，一般是从左向右滑动时
                view.setTranslationX(translationX - mCoverWidth * Math.abs(Math.abs(currentPos) - 0.5f) / 0.5f);
            } else {
                view.setTranslationX(translationX);
            }
            view.setScaleX(scale + mScaleMin);
            view.setScaleY(scale + mScaleMin);
        } else {
            view.setScaleX(mScaleMin);
            view.setScaleY(mScaleMin);
            view.setTranslationX(-reduceX - mCoverWidth);
        }

    }
}

草图说明了一下算法：

图解算法1.png 图解算法2.png

注意事项：

• 使用ScaleRecylerViewPager时尽量设置mScaleMax为1.0f而且mScaleMin不要设置与mScaleMax相差太大，由于RecylerViewPager内部算法的问题，设置差距太大，会造成可预知和不可预知的bug
• paddingRight、mCoverWidth和paddingLeft不宜设置过大,否则观感不佳
• 该文章以ScaleViewPager展开分析，ScaleRecylerViewPager原理基本相通

源码链接：

https://github.com/liuyuejinqiu/ScaleViewPager