炫酷的水滴ViewPagerIndicator

最新推荐文章于 2022-08-18 18:12:56 发布

郭霖_

最新推荐文章于 2022-08-18 18:12:56 发布

阅读量648

点赞数

本文链接：https://blog.csdn.net/c10wtiybq1ye3/article/details/78098602

版权

今日科技快讯

近日，美国旅行房屋租赁服务Airbnb在其最新一轮10亿美元的融资中，中投公司认购约10%，本轮估值达到310亿美元。Airbnb和Uber均是成立于2008年，被誉为共享经济模式的主要推动者，Airbnb在营收和用户数量上低于Uber，但亏损额更少，牢牢占据了全球线上短租市场。

作者简介

本篇来自 Ulez 的投稿，分享了一个炫酷的ViewPager指示器，弹性十足，希望大家喜欢。

Ulez 的博客地址：

http://blog.csdn.net/s122ktyt

正文

去年在是某个Android群了看到有人发了一个设计图，觉得很好。想自己实现一下，到上网搜了一些资料，比如参考：

http://www.jianshu.com/p/791d3a791ec2

这位兄弟已经把如何绘制一个弹性的圆写的很详细了，在此对他表示感谢。不过他没有完整实现这个自定义控件，所以还是自己动手实现一个，但是我觉得效果和原设计还有差距，一直没写博客。这几天抽时间把里面的效果在改了改，顺便也把博客写了。先上效果图：

下面开始分析写得思路，先来个方法截图：

用贝塞尔曲线绘制一个圆需要12个点，如上图所示。然后在绘制时用 mPath.cubicTo() 依次连接，canvas.drawPath(mPath, mPaint) 就能绘制一个完整的圆了，弹性圆就是在此基础上调整 p的参数。比如 {p2,p3,p4},增加X坐标，会使圆向右凸起。

代码中 XPoint 为x相同的一组点：p2，p3，p4 和 p8，p9，p10，YPoint 同理。代码中的mc对应图中的M，绘制圆时这个值是固定的，理论参考：

How to create circle with Bézier curves?

http://stackoverflow.com/questions/1734745/how-to-create-circle-with-b%C3%A9zier-curves

p1={p5,p6,p7}.,p3={p11,p0,p1},p2={p2,p3,p4},p4={p8,p9,p10}，radius 为圆半径。

resetP() 在完成选项切换时都需要调用一下，重置绘制的圆形形状，不然有时候会绘制不规则的圆，造成这个的原因是view刷新频率是有限的，有些临界状态直接就跳过了，导致参数没跟着变化就绘制了图像。

下面根据两种切换viewpager的方式分析：

第一种情况，点击 indicator 切换

在 onTouchEvent 计算将要切换的位置，调用 startAniTo(int currentPos, int toPos), animator 监听 setTouchAble(!animating) 是禁止动画未结束用户又去手动滑动 viewpager 切换。

下面是 dispatchDraw 方法,为了更简单看懂，我就截取 position 从左向右的情况；处理临界情况很重要，没处理好你会发现绘制出来的是什么鬼！

mCurrentTime 是动画变化时刷新的值，从0到1，根据这个值重绘时计算圆的坐标。我将mCurrentTime 分为下列几种状态：

mCurrentTime == 0：

这个状态就是根据position绘制正常的圆。

mCurrentTime > 0 && mCurrentTime <= 0.2：

这个此时圆向右凸起，但是原本的canvas.translate和上个状态不变，所以是圆停止在当前位置并且慢慢凸起的效果。

mCurrentTime > 0.2 && mCurrentTime <= 0.5：

这时圆开始平移，canvas.translate(startX + (mCurrentTime - 0.2f) * distance / 0.7f, startY); 那为啥是除以0.7呢？因为0到0.2没平移，0.2到0.9平移完成，0.9到1处理回弹。平移时间只有0.9-0.2=0.7，这段时间要完成一个distance的距离的平移。同时之前圆向右凸起时,p2组的点x坐标总共增加了一个radius（这个决定凸起程度）。现在要把它弄回对称椭圆，所以p1组和p3组的点要右移半个radius，同时mc调整一下使椭圆不那么尖；

mCurrentTime > 0.5 && mCurrentTime <= 0.8：

p1和p3的X坐标继续往右移，mc逐渐重置为原来大小，效果就是圆的最右端固定不变，左边的凸起缩回去

mCurrentTime > 0.8 && mCurrentTime <= 0.9：

左边的p4.组点往右平移过头，圆形成凹陷

mCurrentTime > 0.9 && mCurrentTime < 1：

这个阶段是处理回弹，p4.组点x逐渐恢复正常。表现为回弹恢复为标准圆。

mCurrentTime == 1：

position 此时真实改变了，重置为正常的圆。

以上的每个阶段在进入下个阶段时，都需要重置一下p坐标，因为view刷新频率是有限的，有些结束的临界状态值直接就跳过了，导致参数没跟着变化就绘制了图像。

第二种情况，拖动viewpager切换

viewPager.addOnPageChangeListener,在 onPageScrolled 中调用 updateDrop(position, positionOffset, positionOffsetPixels),更新位置。这里需要注意的是点击 indicator 也会回调，若不进行判断会造成重复的移动，所以之前在动画开启的监听时设置 boolean animating 值。

这里我用 mCurrentTime = position + positionOffset - (int) (position + positionOffset); 然而这样计算是有问题的，比如向左滑动，它是从0到0.9几，然后突变为0，为了这个判断添加了一个 lastCurrentTime ，根据接近接近0或1更改为0或1。

总结一下，需要注意的是 mCurrentTime 状态的划分、临界状态的处理、以及在合适的位置重置p坐标，在写的过程几次碰到绘制的图像莫名其妙，这是p的坐标问题，查找原因一般也是状态没重置。

源码地址：