先上一張效果圖，該圖為我制作用于展示游戲中，玩家的各項能力數(shù)值的一張雷達(dá)圖。
對于自定義控件你得需要有以下知識儲備：（RaderView涉及到的只是點較為基礎(chǔ)）
1.自定義屬性
2.onMeasure/onDraw
鴻洋大神有一篇對自定義View介紹的的比較詳細(xì)的文章，附鏈接。
http://blog.csdn.net/lmj623565791/article/details/24252901/
本文將結(jié)合上文的基礎(chǔ)知識，進(jìn)行實踐性地實現(xiàn)一個滿足特殊需求的自定義View。本文將從正常流程來編寫RaderView，包括碰到的許多問題及思考。我將盡力為您展現(xiàn)一個比較完整的自定義View的實現(xiàn)過程。
一.自定義屬性
結(jié)合我們預(yù)期的效果圖，這算是一個比較簡單的自定義View，圖中只有兩個屬性是我們需要關(guān)注的。
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的構(gòu)造方法中獲取我們已經(jīng)定義好的屬性：
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轉(zhuǎn)換px，屬性a記得recycle，上述代碼記得寫到構(gòu)造器中。
二.控件的長寬測量
顧名思義，這里要實現(xiàn)復(fù)寫onMeasure方法。先上一部分代碼（這里為了節(jié)省版面，只上寬度的測量過程）
? 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導(dǎo)致中心右移
? ? ? ? centerX = centerX + 2 * textsize;
? ? ? ? setMeasuredDimension(width, height);
那么上面的代碼即為比較完整的，測量寬度的代碼。下面將提出幾個我在實現(xiàn)過程中遇到的問題，以及幾個變量代表的含義。
MeasureSpec.EXACTLY：當(dāng)寬度設(shè)置為精確值或者M(jìn)ATCH_PARENT
MeasureSpec.AT_MOST：當(dāng)寬度設(shè)置為WRAP_CONTENT
按照我的構(gòu)思以及預(yù)期的圖，我直接將width的值設(shè)置為widthSize+padding（左右），但是當(dāng)繪制時，無法將左邊和右邊的字（生存、傷害）展示完全，所以應(yīng)該加上4*textsize的寬度，最終的結(jié)果才是這個控件整體的寬度。這里還有一個地方要注意的是，我在這里 加上 4*textsize的做法是十分不建議的，考慮到拓展性，我們應(yīng)該可以自己設(shè)置左右的字體，那么當(dāng)X軸上添加的字體不為4的時候，就會出現(xiàn)問題。因此，在這應(yīng)該添加記錄字體個數(shù)的變量，例如mTextCount，最終寬度加上mTextCount * textSize就好啦~
diamater：雷達(dá)圖中心到某個定點的邊長
centerX：記錄中心點，用于從中心繪制雷達(dá)圖的background，很好理解。
scaleX：縮放的比例。在寬度的測量中，經(jīng)常會遇到長和寬設(shè)置的比較不搭配（高大于寬，或索性直接設(shè)置為MATCH_PARENT），這個時候就需要進(jìn)行縮放?？梢钥闯觯?dāng)widthMode為MeasureSpec.EXACTLY時，說明我們?yōu)檫@個控件設(shè)置了具體的寬度或者為MATCH_PARENT（控件寬度并不是diameter）。那么當(dāng)diameter（半徑）>width/2時，就需要進(jìn)行縮放。
當(dāng)程序進(jìn)行到這里的時候，我發(fā)現(xiàn)當(dāng)我設(shè)置width和height相同的時候，并且都需要進(jìn)行0.5倍縮放時，我的圖是這樣的：
為什么會出現(xiàn)這種情況呢？答案是Y軸上需要*根號3/2（這是為什么呢？？嘿嘿嘿）
其實這種情況不止要出現(xiàn)在需要縮放的情況下，只是設(shè)計進(jìn)行到縮放這一步，會出現(xiàn)這個問題，原因就是縱軸上的高度，并不是我們設(shè)置的diameter，因為diameter被掰彎了。。。因此這個縮放比例很有必要。
如果將圖片展示完全，那么就需要取scaleX和scaleY中比較小得值。
至此，onMeasure中的方法介紹完畢。
三：繪制
前面介紹的諸多變量都是為了給繪制打基礎(chǔ)。即onDraw函數(shù)的實現(xiàn)
看到預(yù)期效果圖中有三部分需要繪制
1.背景
2.透明的雷達(dá)填充部分
3.文字
首先背景的繪制，主要是骨架部分的繪制，這部分可以根據(jù)自己的需求繪制。沒有難點，唯一比較復(fù)雜的就是計算添加交點的比例，和繪制的過程。
Hexagon記錄了6個點的坐標(biāo)，通過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);
? ? ? ? }
? ? }
這里我的繪制方法是從中點到外圈逐圈繪制。
半透明的雷達(dá)填充部分方法如上，只是hexagon類中存放的是能力值終點的值。
文字更簡單啦，調(diào)用canvas的drawText方法就可以了。
2,3部分的繪制請各位進(jìn)行一個簡單的思考。
四.動畫效果
屬性動畫部分的有關(guān)問題請參考郭林寫的
動畫效果則是用屬性動畫實現(xiàn)的一個非常簡單的勻速擴(kuò)散的效果。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);
? ? }
}
五.總結(jié)
我做完這個控件后，對自定義View中onMeasure和onDraw部分有了一定理解。個人認(rèn)為在圖形的形狀部分，算是比較簡單的，唯一可能麻煩的應(yīng)該是長寬的計算和圖像的繪制。
寫完這個控件后，我認(rèn)為我只是知道了皮毛。
學(xué)無止境，共勉。如果有什么地方有問題、或者可以改進(jìn)，希望可以共同探討。
