自定義乙個儀錶盤View

2021-09-11 10:59:15 字數 3120 閱讀 8521

（背景色變化很醜，請忽略哈。主要是演示一下效果哈哈哈！）

首先看到這個效果。分析一下有哪些組成部分

話不多說開擼，先定個小目標，繼承個view類再說

public class ybbview extends view 


public ybbview(context context, @nullable attributeset attrs) 


}複製**
重寫onmeasure方法

@override


protected void onmeasure(int widthmeasurespec, int heightmeasurespec) 


private int getmeasuresize(int def, int measurespec) else


if (mode == measurespec.exactly) else


if (mode == measurespec.at_most) 


return measuresize;


}@override


protected void onsizechanged(int w, int h, int oldw, int oldh) 


複製**
emmm，到這可能有人要問了，(沒人問我也要說。。) 為啥(height * 0.8f)高要乘以0.8呢？其實最開始是沒有這個0.8的，不過後來我發現了乙個問題，就畫個圖來表示一下吧~~ 看下圖

繪製背景

/**


* 繪製view的背景


*/private void drawbackground(canvas canvas) 


複製**
繪製外層圓弧

private void drawarc(canvas canvas) 


/*** 得到乙個漸變的圓弧疊加層


** @param d 圓的直徑


* @param colors 漸變陣列


* @param startarc 從什麼角度開始漸變


* @return


*/private sweepgradient getgradient(int d, int colors, int startarc) 


複製**
這裡有乙個漸變顏色的圖層，sweepgradient它預設是從0度開始漸變的，但是我們想要的卻不是，所以要進行乙個旋轉。讓他的0度和我們想要的角度重合。

繪製裡層一圈刻度

private void drawpoint(canvas canvas) 


}複製**
這裡為了可以讓刻度可以隨意變寬變長所以也用弧度來做。

繪製兩行文字

private void drawtext(canvas canvas) 


private void drawnumtext(canvas canvas) 


複製**
重新ondraw方法

@override


protected void ondraw(canvas canvas) 


複製**
ondraw方法裡只需要依次呼叫寫好的繪製方法就行了。注釋掉的**是除錯用的，畫了個座標軸哈哈本來想刪了，想了下留著吧。忽略它就行了。

畫好了之後就該讓它動起來了。決定採用屬性動畫來做。

valueanimator va = valueanimator.offloat(numbertext);


va.setduration(animtime);


va.setinterpolator(new decelerateinterpolator());


va.addupdatelistener(new valueanimator.animatorupdatelistener


() });


複製**
這樣就讓數字動起來了，其他的呢跟這一樣的，只是屬性值換乙個啦。 然後背景色漸變是用到了argbevaluator。看**：

backcoloranim = valueanimator.ofint(backcolors);


backcoloranim.setduration(animtime);


backcoloranim.setevaluator(new argbevaluator());


backcoloranim.addupdatelistener(new valueanimator.animatorupdatelistener


() });


複製**
這個類是系統提供關於顏色計算的乙個類，有興趣的可以深入了解一下。

最後定義一些屬性，方便使用



"arcwidth" format="dimension" /> 


"pointarc" format="integer" />


"pointspacing" format="integer" />


"pointwidth" format="dimension" />


"maxamt" format="integer" />


"animtime" format="integer" />


"amttextsize" format="dimension" />


"tiptextsize" format="dimension" />


declare-styleable>


public ybbview(context context, @nullable attributeset attrs) 


複製**
emmm 可能有些粗糙，不過這麼寫下來也是學到了很多知識。希望有大牛能多指正我的不足之處。多交流學習。 最後上 github

自定義表盤View

使用自定義view 屬性attrs檔案如下 表盤半徑 表盤相對控制項邊框距離 刻度相對表盤距離 常規刻度顏色 常規刻度長度 表盤整點刻度顏色 整點刻度長度 時針顏色 時針長度 分針顏色 分針長度 秒針顏色 秒針長度 表盤字型大小 表盤字型顏色 自定義view檔案 public class watch...

Qt編寫自定義控制項3 速度儀錶盤

速度儀錶盤，寫作之初的本意是用來展示當前測試的網速用的，三色圓環 數碼管顯示當前速度，qt自帶了數碼管控制項qlcdnumber，直接整合即可，同時還帶有動畫功能，其實也可以用在汽車 工業領域等，展示汽車的當前速度和各種指標情況，比如生成領域的完成百分比等，控制項採用純painter繪製，自由拉伸不...

自定義時鐘View,表盤的繪製

實現的效果圖如下 main中布局檔案 values資料夾下新建乙個xml檔案,定義引數 1.自定義乙個類 myclock extends view,並設定統一的入口 public myclock context context public myclock context context,attri...