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.0private 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);        }    }}

草图说明了一下算法：

注意事项：

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

源码链接：

https://github.com/liuyuejinqiu/ScaleViewPager