一、效果图

二、实现思路

1.控件继承自View

2.重写两个方法onDraw() 绘制页面和 onTouch() 添加监听

3.onDraw(Canvas ca)中

    a.new Canvas（new Bitmap:backgroundImage） ：backgroundCanvas 并设置控件背景

    b.new paint 设置渐变（LinearGradient），向backgroundCanvas 中绘制滑动条（drawLine），绘制滑动条左边的圆角和右边的圆角（drawCircle），绘制滑动条上大圆环的渐变颜色的外环（drawCircle），给paint取消渐变setShader(null)，绘制白色的内环（drawCircle）和滑动条上的小白点（drawLine）

    c. 使用paint向backgroundCanvas 中 绘制“低”“风险指数”“高”的文案（drawText）

    d.new Canvas（new Bitmap:fullImage） ：canvas.drawBitmap(backgroundImage)

    e.绘制推荐文字（drawText），和倒立水滴图片（drawBitmap）

    f.根据我的id，填充不同的颜色和水滴图片（drawBitmap），绘制我的（drawText）

    g.绘制滑动条上的圆形滑块图片（drawBitmap），和风险指数图标，文案（drawText），绘制滑块第一层外光圈，和第二次外光圈 ，的半径（drawCircle）和透明度（paint.setAlpha），随着动画执行进度变化而变化

    h. ca.drawBitmap(fullImage)

小结：先创建一个图片backgroundImage,然后将其包装成backgroundCanvas，在backgroundCanvas上绘制背景图像，然后new 一个图片fullImage,包装成 canvas ，再将背景图片backgroundImage绘制到canvas上，再在canvas上绘制滑块文案动画等，最后将fullImage 绘制到onDraw提供的父canvas ca上

 

4.onTouch()

    a.MotionEvent.ACTION_DOWN和MotionEvent.ACTION_MOVE

    　　计算出drawX的位置（控件left边< drawX< 控件的Right 边），drawX用于绘制滑块和风险指数。同时调用calculateGroupSelected(event);计算当前滑动位置X最近的9个点是哪个点，用于实现松手后滑块自动移动到最近的小圆圈上

    b. MotionEvent.ACTION_UP

    　　计算出drawX的位置（控件left边< drawX< 控件的Right 边），drawX用于绘制滑块和风险指数。同时调用calculateGroupSelected(event);计算当前滑动位置X最近的9个点是哪个点（groupSelected），用于实现松手后滑块自动移动到最近的小圆圈上

    通过ValueAnimator（drawX，groupSelected）实现松手后滑块自动移动到最近的小圆圈上的动画

    当上边动画结束后启动绘制滑块第一层外光圈，和第二次外光圈 的 波纹动画

 

5.calculateGroupSelected算法如图