本文主要是介绍自定义View之炫酷的水滴ViewPageIndicator，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
*本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布
去年在是某个Android群了看到有人发了一个设计图，觉得很好。想自己实现一下，到上网搜了一些资料，比如参考，这位兄弟已经把如何绘制一个弹性的圆写的很详细了，在此对他表示感谢。不过他没有完整实现这个自定义控件，所以还是自己动手实现一个，但是我觉得效果和原设计还有差距，一直没写博客。这几天抽时间把里面的效果在改了改，顺便也把博客写了。
源码地址放在最后，先上效果图：
下面开始分析写得思路，先来个方法截图：
用贝塞尔曲线绘制一个圆需要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?。p1={p5,p6,p7}.,p3={p11,p0,p1},p2={p2,p3,p4},p4={p8,p9,p10}，radius为圆半径。
private XPoint p2, p4; private YPoint p1, p3; private void resetP() {p1.setY(radius); p1.setX(0); p1.setMc(mc); p3.setY(-radius); p3.setX(0); p3.setMc(mc); p2.setY(0); p2.setX(radius); p2.setMc(mc); p4.setY(0); p4.setX(-radius); p4.setMc(mc); }resetP()在完成选项切换时都需要调用一下，重置绘制的圆形形状，不然有时候会绘制不规则的圆，造成这个的原因是view刷新频率是有限的，有些临界状态直接就跳过了，导致参数没跟着变化就绘制了图像。
下面根据两种切换viewpager的方式分析：
第一种情况，点击indicator切换：
在onTouchEvent计算将要切换的位置，调用startAniTo(int currentPos, int toPos), animator监听setTouchAble(!animating)是禁止动画未结束用户又去手动滑动viewpager切换。
private boolean startAniTo(int currentPos, int toPos) {this.currentPos = currentPos; this.toPos = toPos; if (currentPos == toPos)return true; startColor = roundColors[(this.currentPos) % 4]; endColor = roundColors[(toPos) % 4]; resetP(); startX = div + radius + (this.currentPos) * (div + 2 * radius); distance = (toPos - this.currentPos) * (2 * radius + div) + (toPos > currentPos ? -radius : radius); if (animator == null) {animator = ValueAnimator.ofFloat(0, 1.0f); animator.setDuration(duration); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Override public void onAnimationUpdate(ValueAnimator animation) {mCurrentTime = (float) animation.getAnimatedValue(); invalidate(); }}); animator.addListener(new Animator.AnimatorListener() {@Override public void onAnimationStart(Animator animation) {animating = true; setTouchAble(!animating); }@Override public void onAnimationEnd(Animator animation) {goo(); animating = false; setTouchAble(!animating); }@Override public void onAnimationCancel(Animator animation) {goo(); animating = false; setTouchAble(!animating); }@Override public void onAnimationRepeat(Animator animation) {}}); }animator.start(); if (mViewPager != null) {mViewPager.setCurrentItem(toPos); }return true; }
下面是dispatchDraw方法,为了更简单看懂，我就截取position从左向右的情况；处理临界情况很重要，没处理好你会发现绘制出来的是什么鬼！
@Override protected void dispatchDraw(Canvas canvas) {canvas.save(); mPath.reset(); tabNum = getChildCount(); for (int i = 0; i < tabNum; i++) {canvas.drawCircle(div + radius + i * (div + 2 * radius), startY, radius, mPaintCircle); }if (mCurrentTime == 0) {resetP(); canvas.drawCircle(div + radius + (currentPos) * (div + 2 * radius), startY, 0, mClickPaint); mPaint.setColor(startColor); canvas.translate(startX, startY); p2.setX(radius); }if (mCurrentTime > 0 && mCurrentTime <= 0.2) {if (animating)canvas.drawCircle(div + radius + (toPos) * (div + 2 * radius), startY, radius * 1.0f * 5 * mCurrentTime, mClickPaint); canvas.translate(startX, startY); p2.setX(radius + 2 * 5 * mCurrentTime * radius / 2); } else if (mCurrentTime > 0.2 && mCurrentTime <= 0.5) {canvas.translate(startX + (mCurrentTime - 0.2f) * distance / 0.7f, startY); p2.setX(2 * radius); p1.setX(0.5f * radius * (mCurrentTime - 0.2f) / 0.3f); p3.setX(0.5f * radius * (mCurrentTime - 0.2f) / 0.3f); p2.setMc(mc + (mCurrentTime - 0.2f) * mc / 4 / 0.3f); p4.setMc(mc + (mCurrentTime - 0.2f) * mc / 4 / 0.3f); } else if (mCurrentTime > 0.5 && mCurrentTime <= 0.8) {canvas.translate(startX + (mCurrentTime - 0.2f) * distance / 0.7f, startY); p1.setX(0.5f * radius + 0.5f * radius * (mCurrentTime - 0.5f) / 0.3f); p3.setX(0.5f * radius + 0.5f * radius * (mCurrentTime - 0.5f) / 0.3f); p2.setMc(1.25f * mc - 0.25f * mc * (mCurrentTime - 0.5f) / 0.3f); p4.setMc(1.25f * mc - 0.25f * mc * (mCurrentTime - 0.5f) / 0.3f); } else if (mCurrentTime > 0.8 && mCurrentTime <= 0.9) {p2.setMc(mc); p4.setMc(mc); canvas.translate(startX + (mCurrentTime - 0.2f) * distance / 0.7f, startY); p4.setX(-radius + 1.6f * radius * (mCurrentTime - 0.8f) / 0.1f); } else if (mCurrentTime > 0.9 && mCurrentTime < 1) {p1.setX(radius); p3.setX(radius); canvas.translate(startX + distance, startY); p4.setX(0.6f * radius - 0.6f * radius * (mCurrentTime - 0.9f) / 0.1f); }if (mCurrentTime == 1) {lastCurrentTime = 0; mPaint.setColor(endColor); p1.setX(radius); p3.setX(radius); canvas.translate(startX + distance, startY); p4.setX(0); currentPos = toPos; resetP(); canvas.translate(radius, 0); }mPath.moveTo(p1.x, p1.y); mPath.cubicTo(p1.right.x, p1.right.y, p2.bottom.x, p2.bottom.y, p2.x, p2.y); mPath.cubicTo(p2.top.x, p2.top.y, p3.right.x, p3.right.y, p3.x, p3.y); mPath.cubicTo(p3.left.x, p3.left.y, p4.top.x, p4.top.y, p4.x, p4.y); mPath.cubicTo(p4.bottom.x, p4.bottom.y, p1.left.x, p1.left.y, p1.x, p1.y); if (mCurrentTime > 0 && mCurrentTime < 1)mPaint.setColor(getCurrentColor(mCurrentTime, startColor, endColor)); canvas.drawPath(mPath, mPaint); canvas.restore(); super.dispatchDraw(canvas); }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值。
private void updateDrop(int position, float positionOffset, int positionOffsetPixels) {if (animator != null)animator.cancel(); if ((position + positionOffset) - currentPos > 0)direction = true; else if ((position + positionOffset) - currentPos < 0)direction = false; if (direction)toPos = currentPos + 1; else toPos = currentPos - 1; startColor = roundColors[(currentPos) % 4]; endColor = roundColors[(currentPos + (direction ? 1 : -1)) % 4]; startX = div + radius + (currentPos) * (div + 2 * radius); distance = direction ? ((2 * radius + div) + (direction ? -radius : radius)) : (-(2 * radius + div) + (direction ? -radius : radius)); mCurrentTime = position + positionOffset - (int) (position + positionOffset); if (!direction)mCurrentTime = 1 - mCurrentTime; if (Math.abs(lastCurrentTime - mCurrentTime) > 0.2) {//突变时根据接近0或1更改为0或1； if (lastCurrentTime < 0.1)mCurrentTime = 0; else if (lastCurrentTime > 0.9)mCurrentTime = 1; }lastCurrentTime = mCurrentTime; invalidate(); }这里我用mCurrentTime = position + positionOffset - (int) (position + positionOffset);然而这样计算是有问题的，比如向左滑动，它是从0到0.9几，然后突变为0，为了这个判断添加了一个lastCurrentTime ，根据接近接近0或1更改为0或1。
总结一下，需要注意的是mCurrentTime 状态的划分、临界状态的处理、以及在合适的位置重置p坐标，在写的过程几次碰到绘制的图像莫名其妙，这是p的坐标问题，查找原因一般也是状态没重置。
写在最后：昨天投稿了，今天收到郭神的回复，会帮我发布文章，但是由于稿件的积压，需要等上一段时间，还是很开心，感谢郭神。
源码地址：https://github.com/Ulez/DropIndicator
这篇关于自定义View之炫酷的水滴ViewPageIndicator的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
