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原理基本相通
