一、效果圖
二、實現思路
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算法如圖
