基于viewpager开发循环旋转木马效果

效果图：

WX20190527-143016.png

1. 声明：本效果是基于轮子修改，对此表示感谢。项目github
2. 原有项目已经实现view缩放和item平移嵌入功能，在其基础上做了以下修改：
   • 将居中修改为居左
   • 添加了循环滑动
   • 针对不同的位置动态计算图片上的遮罩
3. 简要分析原有项目的实现：
   • 居中选中item的大小是整个viewpager的大小，然而viewpager是一个横向复合布局，其item是顺序横向布局绘制的，同时借助viewpager父布局的clipChildren属性可以实现多个item顺序绘制并能够在显示区域显示，也符合画布的画布无限大，显示有限制的原理（自定义view特别是复合view很重要的一个原理，深刻理解了画布无限大也就能空间中想象得出复合view怎么绘制多item了）。
   • ViewPager.PageTransformer可以实现viewpager各个item和各item切换非常炫的效果，当前能看到的很炫viewpager效果基本都是基于它开发的，主要是这个方法transformPage(View page, float position)：page：当前操作的item view，position是指离选中item的偏移量，注意其是float的，也就是静态是position是int的，在滑动的过程中这个偏移量并不会处理成int，而是据实计算了一个偏移量，这样就能实现一个效果的动态转换，而不是很生硬的切换。本案例中就是利用这个api计算其缩放和平移（具体算法下面会描述）。
   • getChildDrawingOrder(int childCount, int i)：viewgroup提供的一个api方法，在复合view中肯定是包含多个子view的，在复合view的ondraw中会调用这个方法来校验先绘制那个子view，自定义view时需要改变子view的绘制顺序的时候可以修改这个api，修改这个前提需要先设置setChildrenDrawingOrderEnabled(true)，还有返回值position越大越晚绘制，本案例就是修改为居中选中view最后绘制（以居中为准，两边都是越靠近居中越晚绘制，从而实现嵌入效果）
4. 下面着重描述一下修改项的实现：
   • 将居中修改为居左：简单，viewpager第一次填充数据后设置其居中的选中item即可
   • 循环滚动：和普通viewpager的实现原理一样，头多加一个尾部item尾部多加一个头部item用来滑动的时候不会出现空白屏，并且在头尾滑动的时候后台修改为选中真正的对应item来实现循环滑动，此处类似，只是不是头尾添加一个item，而是根据自己的ui样式添加多个item，后台切换真正选中item的也不太一样，前面==某一个就好了，而后者是>=或者<=。
   • 针对不同的位置动态计算图片上的遮罩，为了更好的突出选中效果，在除了选中item外其他三个都是对称添加了遮罩，包括两层遮罩（透明度不一样的白遮罩和控制宽度的黑色渐变遮罩），下面分开讨论这两层遮罩（遮罩的绘制就不多述了，常规绘制）。
     • 白遮罩：这个还好都是对称的，只是透明度不一样，这个在viewpager选中监听中根据选中position然后遍历viewpager计算出当前view是不是选中view的贴身view（123view），根据这个在item上面绘制对应的透明度白遮罩就好

     • 黑遮罩：这个比较麻烦，因为他不是全item遮罩，而是一个item从显示的边起到固定宽度的遮罩渐变，宽度固定的都好说，麻烦的就是对于嵌入view的遮罩起始边的计算（这个也得依据整个效果的缩放和平移计算），先以一个item描述算法，即：

       
       image.png
       

       备注：w为item宽度，w1为item缩放后的宽度，缩放比例已知，这个也就知道了，平移距离dis是知道的，w和w1可以算出缩放后的距离上一个item的距离，平移距离减去这个距离就是item的嵌入距离，这个就是黑遮罩的起始边，后面的可以类推，需要注意的是后面的计算嵌入距离时不仅仅自己item缩放后的距离还包含前一个itemview的一个缩放后的边距

小伙伴们，若是把你从坑里拉出来，别忘了赞赏一下小弟，加个关注也好奥