先上一張效果圖，該圖為我制作用于展示游戲中，玩家的各項能力數值的一張雷達圖。
對于自定義控件你得需要有以下知識儲備：（RaderView涉及到的只是點較為基礎）
1.自定義屬性
2.onMeasure/onDraw
鴻洋大神有一篇對自定義View介紹的的比較詳細的文章，附鏈接。
http://blog.csdn.net/lmj623565791/article/details/24252901/
本文將結合上文的基礎知識，進行實踐性地實現一個滿足特殊需求的自定義View。本文將從正常流程來編寫RaderView，包括碰到的許多問題及思考。我將盡力為您展現一個比較完整的自定義View的實現過程。
一.自定義屬性
結合我們預期的效果圖，這算是一個比較簡單的自定義View，圖中只有兩個屬性是我們需要關注的。
1.圖中的文字大小
2.由中心點到某一個點的線段的長度
綜合以上兩點，在value資源文件下添加attrs.xml文件，并添加如下屬性。
自定義屬性的格式為：名稱name，格式format（string,color,demension,integer,enum,reference,float,boolean,fraction,flag）
<resources>
? ? <attr name="diameter" format="dimension"></attr>
? ? <attr name="textsize" format="dimension"></attr>
? ? <declare-styleable name="radar_view">
? ? ? ? <attr name="diameter"/>
? ? ? ? <attr name="textsize"/>
? ? </declare-styleable>
</resources>
以上則是對屬性的定義部分。在RaderView的構造方法中獲取我們已經定義好的屬性：
privateint diameter;
privateint textsize;
? ? public RadarView(Context context, AttributeSet attrs, int defStyleAttr) {
? ? ? ? super(context, attrs, defStyleAttr);
? ? ? ? ……
? ? ? ? TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.radar_view, defStyleAttr, 0);
? ? ? ? int n = a.getIndexCount();
? ? ? ? for (int i = 0; i < n; i++) {
? ? ? ? ? ? int attr = a.getIndex(i);
? ? ? ? ? ? switch (attr) {
? ? ? ? ? ? ? ? case R.styleable.radar_view_diameter:
? ? ? ? ? ? ? ? ? ? diameter = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case R.styleable.radar_view_textsize:
? ? ? ? ? ? ? ? ? ? textsize = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? }……
? ? ? ? a.recycle();
? ? }
需要注意的是，TypedValue.applyDimension方法用于將sp轉換px，屬性a記得recycle，上述代碼記得寫到構造器中。
二.控件的長寬測量
顧名思義，這里要實現復寫onMeasure方法。先上一部分代碼（這里為了節省版面，只上寬度的測量過程）
? int widthMode = MeasureSpec.getMode(widthMeasureSpec);
? int widthSize = MeasureSpec.getSize(widthMeasureSpec);
? if (widthMode == MeasureSpec.EXACTLY) {
? ? ? ? ? ? if (getWidth() / 2 > centerX) {
? ? ? ? ? ? ? ? centerX = getWidth() / 2;
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? centerX = diameter + getPaddingLeft();
? ? ? ? ? ? }
? ? ? ? } else {
? ? ? ? ? ? float mWidth = diameter;
? ? ? ? ??? width = desired * 2;
? ? ? ? ? ? centerX = width / 2;
? ? ? ? }
? ? ? ? width=width+4*textsize;
? ? ? ? if (width / 2 < diameter) {
? ? ? ? ? ? scaleX = width / 2 * 1.0f / diameter;
? ? ? ? }
? ? ? ? if (scaleX < scaleY) {
? ? ? ? ? ? scaleY = scaleX;
? ? ? ? } else {
? ? ? ? ? ? scaleX = scaleY;
? ? ? ? }
? ? ? ? //由于左邊text導致中心右移
? ? ? ? centerX = centerX + 2 * textsize;
? ? ? ? setMeasuredDimension(width, height);
那么上面的代碼即為比較完整的，測量寬度的代碼。下面將提出幾個我在實現過程中遇到的問題，以及幾個變量代表的含義。
MeasureSpec.EXACTLY：當寬度設置為精確值或者MATCH_PARENT
MeasureSpec.AT_MOST：當寬度設置為WRAP_CONTENT
按照我的構思以及預期的圖，我直接將width的值設置為widthSize+padding（左右），但是當繪制時，無法將左邊和右邊的字（生存、傷害）展示完全，所以應該加上4*textsize的寬度，最終的結果才是這個控件整體的寬度。這里還有一個地方要注意的是，我在這里 加上 4*textsize的做法是十分不建議的，考慮到拓展性，我們應該可以自己設置左右的字體，那么當X軸上添加的字體不為4的時候，就會出現問題。因此，在這應該添加記錄字體個數的變量，例如mTextCount，最終寬度加上mTextCount * textSize就好啦~
diamater：雷達圖中心到某個定點的邊長
centerX：記錄中心點，用于從中心繪制雷達圖的background，很好理解。
scaleX：縮放的比例。在寬度的測量中，經常會遇到長和寬設置的比較不搭配（高大于寬，或索性直接設置為MATCH_PARENT），這個時候就需要進行縮放。可以看出，當widthMode為MeasureSpec.EXACTLY時，說明我們為這個控件設置了具體的寬度或者為MATCH_PARENT（控件寬度并不是diameter）。那么當diameter（半徑）>width/2時，就需要進行縮放。
當程序進行到這里的時候，我發現當我設置width和height相同的時候，并且都需要進行0.5倍縮放時，我的圖是這樣的：
為什么會出現這種情況呢？答案是Y軸上需要*根號3/2（這是為什么呢？？嘿嘿嘿）
其實這種情況不止要出現在需要縮放的情況下，只是設計進行到縮放這一步，會出現這個問題，原因就是縱軸上的高度，并不是我們設置的diameter，因為diameter被掰彎了。。。因此這個縮放比例很有必要。
如果將圖片展示完全，那么就需要取scaleX和scaleY中比較小得值。
至此，onMeasure中的方法介紹完畢。
三：繪制
前面介紹的諸多變量都是為了給繪制打基礎。即onDraw函數的實現
看到預期效果圖中有三部分需要繪制
1.背景
2.透明的雷達填充部分
3.文字
首先背景的繪制，主要是骨架部分的繪制，這部分可以根據自己的需求繪制。沒有難點，唯一比較復雜的就是計算添加交點的比例，和繪制的過程。
Hexagon記錄了6個點的坐標，通過draw6point方法將其按照相鄰順序連線。
private void initBackground(Canvas canvas) {
? ? ? ? canvas.scale(scaleX, scaleY)；
? ? ? ? for (int i = 1; i <= 4; i++) {
? ? ? ? ? ? dia = diameter / 4 * i;
? ? ? ? ? ? sqrt3diameter = (int) (Math.sqrt(3) * dia / 2);
? ? ? ? ? ? halfDiameter = dia / 2;
? ? ? ? ? ? Hexagon hexagon = new Hexagon(centerX + halfDiameter, centerY + sqrt3diameter, centerX + dia, centerY, centerX + halfDiameter, centerY - sqrt3diameter,
? ? ? ? ? ? ? ? ? ? centerX - halfDiameter, centerY - sqrt3diameter, centerX - dia, centerY, centerX - halfDiameter, centerY + sqrt3diameter);
? ? ? ? ? ? draw6point(canvas, hexagon);
? ? ? ? }
? ? }
這里我的繪制方法是從中點到外圈逐圈繪制。
半透明的雷達填充部分方法如上，只是hexagon類中存放的是能力值終點的值。
文字更簡單啦，調用canvas的drawText方法就可以了。
2,3部分的繪制請各位進行一個簡單的思考。
四.動畫效果
屬性動畫部分的有關問題請參考郭林寫的
動畫效果則是用屬性動畫實現的一個非常簡單的勻速擴散的效果。Evaluator如下
public class RadarEvaluator implements TypeEvaluator<Hexagon> {
? ? public Hexagon evaluate(float fraction, Hexagon startValue, Hexagon endValue) {
? ? ? ? int x1 = (int) (startValue.getX1() + fraction * (endValue.getX1() - startValue.getX1()));
? ? ? ? int y1 = (int) (startValue.getY1() + fraction * (endValue.getY1() - startValue.getY1()));
? ? ? ? ……
? ? ? ? return new Hexagon(x1, y1, x2, y2, x3, y3, x4, y4, x5, y5, x6, y6);
? ? }
}
五.總結
我做完這個控件后，對自定義View中onMeasure和onDraw部分有了一定理解。個人認為在圖形的形狀部分，算是比較簡單的，唯一可能麻煩的應該是長寬的計算和圖像的繪制。
寫完這個控件后，我認為我只是知道了皮毛。
學無止境，共勉。如果有什么地方有問題、或者可以改進，希望可以共同探討。
