【移動(dòng)應(yīng)用開發(fā)技術(shù)】Android實(shí)現(xiàn)底部帶刻度的進(jìn)度條樣式

【移動(dòng)應(yīng)用開發(fā)技術(shù)】Android實(shí)現(xiàn)底部帶刻度的進(jìn)度條樣式

由于公司需要一個(gè)帶刻度的進(jìn)度條樣式，網(wǎng)上找了一圈，有些是加個(gè)刻度的背景圖片，這樣對(duì)于我的項(xiàng)目來(lái)說(shuō)，不合適，因?yàn)榭潭刃枰獎(jiǎng)討B(tài)去改變，所以換背景圖片的方案肯定是不行的，唯一的辦法就是自己繪制一個(gè)進(jìn)度條，進(jìn)度條的繪制相對(duì)來(lái)說(shuō)是比較簡(jiǎn)單的。我自己對(duì)自定義控件這一塊也不是很了解，全當(dāng)學(xué)習(xí)一下吧，寫這篇博客也是記錄一下，如果有人也有這樣樣式的進(jìn)度條需求，也可以直接拿過(guò)去用，比較自己也用過(guò)很多大神的東西。

開始就先上圖吧樣式就是上圖這樣了，由于是通過(guò)canvas繪制的，所以想要的樣式都可以自己去繪制，我這邊就搞一個(gè)簡(jiǎn)單的就行了。首先得繼承View，由于這個(gè)控件比較簡(jiǎn)單，我就沒有搞那種在布局文件中設(shè)值的屬性了，繼承之后第一步，需要測(cè)量布局，得到畫布的大小，這個(gè)值其實(shí)就是我們?cè)诓季治募性O(shè)置的控件的寬高。

這邊拿到畫布的大小，設(shè)置進(jìn)度條顯示的寬度，我這邊設(shè)置的為畫布寬度的80%然后就是初始化畫筆了，具體我就不多贅述了，我使用了五個(gè)畫筆，分別是進(jìn)度條背景底框，進(jìn)度，刻度繪制，刻度下的字，當(dāng)前數(shù)值的文字具體看代碼。接下來(lái)就是onDraw方法進(jìn)行繪制了，用canvas繪制，繪制的起點(diǎn)是你畫布的左上角，橫向?yàn)閤，縱向?yàn)閥，所以繪制的時(shí)候只要確定好x,y的坐標(biāo)，那就好畫了。進(jìn)度條其實(shí)很容易繪制，就是畫兩個(gè)矩形，一個(gè)地沒有進(jìn)度的矩形，另一個(gè)是當(dāng)前進(jìn)度的矩形就行了，percent是當(dāng)前進(jìn)度的百分比，之所以加個(gè)leftPadding是因?yàn)槿绻麖?開始就頂?shù)疆嫴甲筮吜耍竺娈嬁潭认碌淖煮w就會(huì)存在截?cái)喱F(xiàn)象，顯示不全。drawRect的每個(gè)參數(shù)是什么意思我就不多說(shuō)了，這個(gè)很多文章都有介紹。跟其他進(jìn)度條不同的是，帶刻度的最重要是怎么繪制刻度了，我這邊默認(rèn)總共9個(gè)刻度，可以自行修改，怎么畫出刻度線，重要的就是通過(guò)canvas的平移，translate來(lái)實(shí)現(xiàn)，x為每次繪制的位置，畫一條就會(huì)平移一段距離再畫一條，原理就是這樣。numY的參數(shù)其實(shí)就是與畫布頂點(diǎn)的距離，由于我的進(jìn)度條設(shè)置的是30的高度，刻度要緊挨著進(jìn)度底部，所以開始畫的y坐標(biāo)也是30，+10是繪制刻度線的長(zhǎng)度，所以刻度線長(zhǎng)度就是10?？潭认碌奈淖?，也是獲取文字的寬度，取中心位置。接下來(lái)就是繪制右邊顯示當(dāng)前數(shù)組的文字了，只要確定好位置，就很簡(jiǎn)單了。顯示的值是多少，也很簡(jiǎn)單算出來(lái)，具體怎