支付寶芝麻信用頁面自定義View的簡單製作續

前兩個月剛剛寫了一篇關於支付寶芝麻信用頁面自定義view的總結，感覺寫的不太好，鏈結如下：

當時寫的時候沒有考慮到布局的問題，當移動view的時候，view就出現繪圖錯亂了，還好有個哥們看了給我提醒了一下，最近剛好比較閒，就尋思重新記錄一下寫自定義view的過程，算是對自定義view的乙個小的總結吧，順便把遇到過的坑記錄一下，提醒一下自己。

注意：這篇文章針對

廢話不多說，首先看看，人家支付寶芝麻信用的頁面吧：

上圖展示的就是乙個支付寶信用的乙個頁面，我們從頁面的構造開始分析：

最上面的檢視我們並不需要自定義，直接使用textview即可，主要需要自定義的模組就只有中間那一部分，我們把它單獨拿出來分析一下：

我們可以看到它是由兩個半圓環，即外面的半圈圈構成，思考一下，在使用

canvas.drawarc(rectf,165, 210,false,outarcpaint);

這個api就可以搞定了，我們還能發現在第二個圓圈裡面有刻度線著寫小東東，同樣檢視最內層還有刻度線的說明，這個我們需要怎麼做呢？思考一下，我們可以通過不斷地旋轉畫布定點繪製，當畫布旋轉完成我們刻度線和刻度線下方的字型就可以完成啦。

接下來就是要寫中間的字了，呼叫

canvas.drawtext(numstring,centerx-textwidth/2,centery,textpaint);

即可，還是很容易的，我們的靜態效果到這就分析完成了，我們看看**的實現方式：

重寫的onmeasure()方法：

@override
protected
void
onmeasure(int widthmeasurespec, int heightmeasurespec) 
public
intmeasuredimension(int defaultsize, int measurespec)else
}return result;
}

我們這裡保證這個view是乙個正方形的效果，防止檢視太難看。

初始化工具類：

private void init()

上述初始化了一些畫筆工具以及一些變數，這裡就不詳細的去說明paint各個方法的含義了，不懂得同學請度娘。

最重要的方法就是我們的ondraw()方法了，所有的自定義view一般都要重寫此方法進行檢視的繪製：

@override
protected void ondraw(canvas canvas) 
private void drawtheline(canvas canvas,int centerx,int centery) else 
float textlength=kedufontpaint.measuretext(stringarray[i-1]);
canvas.drawtext(stringarray[i-1],centerx-textlength/2,lineendy+30,kedufontpaint);
canvas.rotate(rotateradius,centerx,centery);
}canvas.restore();
}private void drawtext(canvas canvas,int centerx,int centery)
if (!textutils.isempty(textstring))
}

最麻煩的無非是座標的計算，這裡就不詳細的講了，要講可能要將一大堆，所以就不詳述了，這裡講幾個需要注意的地方：

1.當我們使用一些canvas方法的時候，我們需要知道方法中的座標都是相對於本身view而言的，一般而言，我們並不需要考慮使用getx()或者gety()來進行座標的計算的，否則當我們改變布局的位置的時候，是會引起座標的錯位問題的，這個很重要！

2.當考慮到旋轉畫布的問題的時候，座標的計算方面會比較抽象，可能花的時間會很多，需要深入了解canvas.rotate()的工作原理，這一方面我自己也有點暈忽忽的，網上很多人講的都不一樣，有時間的時候需要多加研究一下。

我們靜態的頁面到這裡算是完成了，我們看一下效果圖：

我們可以看到修改了布局後，自定的view效果保持一致，這正是我們所需要的，好的，接下來我們就需要讓圖動起來了，我們分別需要乙個類似於progreebar的圓環動態效果，乙個背景漸變效果，這裡不考慮數字變化的動態效果，網上好像有著方面的控制項，自己實現可能有一定的難度，所以我們考慮progreebar的圓環動態效果和背景漸變效果實現：

1.圓環動態效果，我們可以通過view.post方法進行重繪的操作

2.背景漸變，屬性動畫中提供了這個api，我們也可以實現

//背景漸變動畫實現
valueanimator coloranim= objectanimator.ofint(context, "backgroundcolor", 0xffff8080, 0xff8080ff);
coloranim.setduration(30 * 180);
coloranim.setevaluator(new argbevaluator());
coloranim.start();

更新條的實現：

post(new runnable() 
}});

最後的效果：

支付寶芝麻信用頁面自定義View的簡單製作續

芝麻信用別忘檢視支付寶芝麻信用分，這些特權別浪費

Android自定義類似支付寶密碼輸入的控制項

自定義view密碼框等同於支付寶支付密碼框

支付寶芝麻信用頁面自定義View的簡單製作 續

芝麻信用 別忘檢視支付寶芝麻信用分，這些特權別浪費

Android自定義類似支付寶密碼輸入的控制項

自定義view密碼框等同於支付寶支付密碼框

相關推薦

支付寶芝麻信用頁面自定義View的簡單製作續

芝麻信用別忘檢視支付寶芝麻信用分，這些特權別浪費