打造一个快速灵敏可上下滑动的viewpager

96
金山胖
2017.10.31 14:04* 字数 733

效果图 

可以看得出来上下切换是 viewpager  左右切换也是viewpager 。

原理

先来说说怎么实现一个上下切换的 viewpager 。

想要实现这个功能首先得知道 viewpager 的切换原理 。

如果你熟悉Android 的位移动画 那么 viewpager 子元素之间的切换是什么原理你就能想的到了。对的,其实就是位移动画。

viewpager 有一个 setPageTransformer 这个方法


根据注释可以知道这是页面切换的时候的回调 传入我们重写的 PageTransformer 

在 PageTransformer 中加上一个上下移动的 位移动画 那么就实现了这个功能了。补下对应的代码


由于正常情况下是左右滑的 所以要变成向下滑的话 把 onTouchEvent 内传入的 X Y 的坐标对调一下 对应的代码


这样就完成了一个可以上下滑动的viewpager 了

快速滑动

由于这是图片浏览功能 所以切换要灵敏 怎样增加他的上下滑动的灵敏度呢? 普通的viewpager 有时候得滑动页面一大半才能切换到下一目标也

现在我想稍微滑动一点距离就让它切到目标页 

viewpager 的切换肯定是有自己的一套算法的  只要我们把它改成我们自己想要的效果 也就是改源码 

于是我写了一个跟原生的 viewpager 一模一样的类 也就是直接把他的代码拿过来抄了(直接抄肯定是不行的)

找到他里面的一个方法 determineTargetPage 贴下我修改后的代码


注意下我标注的地方 跟原码对比下 差距在 原码里是 velocity 速率 即手指滑动的速率 我直接给改成横向移动的距离 deltaX 也就是我直接通过你手指移动的距离是否大于一定的值去判断要不要切到下一个目标页。这样只要稍微滑动就可以切换下一页了,项目经理就不会说 这滑动不灵活 改! 

触摸事件冲突处理 

看下整个的布局结构 首先 整体是一个竖向的 viewpager 子元素是一个横向的 viewpager

所以如果父 viewpager 不去拦截触摸事件的话 那么这个上下滑动的事件将传给子viewpager消费 子viewpager是一个横向的滑动 对上下操作是不做处理的所以滑动将会无效 

所以要在父 viewpager 的 onInterceptTouchEvent 做出相应的处理


由于子布局里还有点击事件所以这里的操作是如果移动大于5个像素点那么去判断是否纵向的速率大于横向的速率 如果大于那么就拦截触摸事件 让父布局消费触摸事件。

Android开发
Web note ad 1