一、效果圖
二、實現思路
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)
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演算法如圖
Qt自定義控制項 繪製滑動條
主要 展示 標頭檔案 ifndef myslider h define myslider h include include include include include class myslider public qwidget q object public explicit myslider...
自定義控制項之滑動
view滑動的方法是現實絢麗的自定義控制項的基礎 一般來說實現滑動的方法有三種 通過view本身提供的scrollto scrollby方法來實現 通過動畫方法 通過更改view的layoutparams,實現重新布局來實現。一 通過view本身提供的scrollto scrollby方法來實現 s...
seekbar 自定義樣式
android layout width 192dip android layout height wrap content android progressdrawable drawable seekbar style android thumb drawable thumb bg android...