按照規矩先上圖

問：為什麼寫這個自定義View呢？
答：工作讓我成長。

Android關於自定義View的文章不再新鮮，實現方式也是各有千秋，在這裡自己寫的一個進度指示器實現方式是通過繼承自View實現,內部所有的圓圈、線條和文字都是直接繪製，沒有以ViewGroup的addView()方式去做。

1.理清思路

以最終效果圖為參考，我們要分4步走

1. 繪製空心的圓圈
   
2. 繪製實心的圓
   
3. 繪製圓圈之間的線條
4. 繪製每一個步驟的說明文字

2.準備工作

根據需求來，哪些東西是可以使用者自定義的，是通過屬性控制還是暴露setter出去自己決定。這裡我準備的attribute

xml
<declare-styleable name="ProgressView">
<attr name="defaultColor" format="color"/>
<attr name="reachedColor" format="color"/>
<attr name="max" format="integer"/>
<attr name="progress" format="integer"/>
<!--圓圈和線條之間的間隙-->
<attr name="gap" format="dimension"/>
<!--文字說明和圓圈之間的margin-->
<attr name="textMargin" format="dimension"/>
<attr name="lineHeight" format="dimension"/>
<attr name="lineColor" format="color"/>
<attr name="minLineWidth" format="dimension"/>
<!--圓點各項資料-->
<attr name="centerRadius" format="dimension"/>
<attr name="strokeWidth" format="dimension"/>
<attr name="strokeRadius" format="dimension"/>
<!--文案-->
<attr name="contentText" format="string"/>
<attr name="stepTextSize" format="dimension"/>
<attr name="contextTextSize" format="dimension"/>
<attr name="contextTextColor" format="color"/>
<!--文字的位置-->
<attr name="indicator_mode" format="enum">
<enum name="bottom" value="1"/>
<enum name="top" value="2"/>
</attr>
</declare-styleable>



private Paint mStrokePaint = new Paint(Paint.ANTI_ALIAS_FLAG);//空心圓圈畫筆
private Paint mCenterPaint = new Paint(Paint.ANTI_ALIAS_FLAG);//實心圓圈畫筆
private Paint mTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);//文字畫筆
private Paint mLinePaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);//線條畫筆
private RectF mLineRect = new RectF();//線條
private Rect mTextRect = new Rect();//進度文字
private float mGap;//線條與圓圈之間的間隔
private float mMargin;//文字與圓圈垂直方向的間距
private float mStepTextSize;//進度文字大小
private float mLineHeight;//線條高度
private float mStrokeWidth;//外圈的寬度
private float mCenterRadius;//內圈半徑
private float mStrokeRadius;//外圈半徑
private float mCircleHeight;//繪製圓圈的高度
private float mTextY;//繪製文案的Y值
private int mMode;//文字相對於圓圈的位置，上下
private int mProgress;
private int mMaxCount;
private int mDefaultColor;
private int mReachedColor;
private int mTextColor;
private int mLineColor;
private int mWidth;
private int mHeight;


3.開始寫程式碼

初始化的自定義View程式碼是需要套公式的，在構造中通過TypedArray獲取View的各種屬性值、為一些屬性提供預設值、定義好屬性變數、根據View的需要提供預設的寬高等，然後繼續。

3.1重寫onMeasure()

在onMeasure方法中一定要為你的View新增好寬高限制，關鍵點是View的測量要避免在MeasureSpec.AT_MOST和MeasureSpec.UNSPECIFIED的情況下獲取不到想要的效果，最好提供給一個預設值。

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //measure()方法為自己定義的測量方法
        setMeasuredDimension(measure(widthMeasureSpec, true), measure(heightMeasureSpec, false));
    }

    private int measure(int measureSpec, boolean isWidth) {
        int result;
        int mode = MeasureSpec.getMode(measureSpec);
        int size = MeasureSpec.getSize(measureSpec);
        int padding = isWidth ? getPaddingLeft() + getPaddingRight() : getPaddingTop() + getPaddingBottom();
        if (mode == MeasureSpec.EXACTLY) {
            result = size;
        } else {
            result = isWidth ? getSuggestedMinimumWidth() : getSuggestedMinimumHeight();
            result += padding;
            if (mode == MeasureSpec.AT_MOST) {
                if (isWidth) {
                    result = Math.max(result, size);
                } else {
                    result = Math.min(result, size);
                }
            }
        }
        return result;
    }

這裡給View提供的最小寬高分別是一個圓圈的寬和一個200的高。

    @Override
    protected int getSuggestedMinimumWidth() {
        return (int) (mStrokeRadius * 2);
    }
    @Override
    protected int getSuggestedMinimumHeight() {
        return DEFAULT_HEIGHT;
    }

3.2onDraw()繪製

到現在為止我們已經控制好View的寬高了，其實也可以先繪製一番看看效果了，接著在onDraw裡面根據最大的mMaxCount和mProgress繪製圓圈。

• （這裡View繪製的效果是居中顯示的）首先考慮繪製最外層的空心圓圈，如果mMaxCount為1的時候圓圈的位置就是螢幕的中心點了，如果mMaxCount為2的時候呢？我的想法是把螢幕可用的寬度（除去padding）2等分，兩個圓點之間的寬度權重佔一，兩點距離左右的邊距各自權重為0.5，以此類推。
• 繪製實心圓圈就是和空心圓的位置完全一樣，只需要傳入不同的畫筆和半徑就OK了。
• 最後繪製圓圈之間的連線線，兩個圓圈之間的間隔g的長度是可以計算出來的，然後在這個基礎上減去圓圈的半徑就OK了，當然友好一點的做法還是要通過一個屬性gap去控制線條與圓圈之間的margin值。
• 為了讓線條的高度可以自定義，這裡的線條就通過Rect去繪製了。

        int height = getHeight() - getPaddingBottom() - getPaddingTop();
        int usefulWidth = mWidth - getPaddingLeft() - getPaddingRight();//可用寬度
        float g = (usefulWidth / (mMaxCount));
        //起始點
        float startX = getPaddingLeft() + mStrokeRadius;
        startX += g / 2.0f;//這裡繪製不能超出paddingRight
        for (int iLoop = 0; iLoop < mMaxCount; iLoop++) {
            float drawX = startX + (iLoop * g);
            //已完成進度的色值
            mStrokePaint.setColor(iLoop <= mProgress - 1 ? mReachedColor : mDefaultColor);
            canvas.drawCircle(drawX, height / 2, mStrokeRadius, mStrokePaint);
            //繪製進度位置
            if (iLoop <= mProgress - 1) {
                canvas.drawCircle(drawX, height / 2, mCenterRadius, mCenterPaint);
            }
        }
        //繪製連線線
        if (mDrawLine) {//mMaxCount大於1的時候就繪製連線線
            int lineCount = mMaxCount - 1;
            for (int lLoop = 0; lLoop < lineCount; lLoop++) {
                float drawXStart = startX + mStrokeRadius + dp2px(mGap) + (lLoop * g);
                float drawXEnd = startX + g - mStrokeRadius - dp2px(mGap) + (lLoop * g);
                mLineRect.left = drawXStart;
                mLineRect.right = drawXEnd;
                canvas.drawRect(mLineRect, mLinePaint);
            }
        }

看下效果，初步就長這個樣子，當然具體的各個值是要經過計算和除錯的。

接下來就要繪製文字了，文字的繪製位置需要謹慎操作，每一個步驟圓心的位置也就是你每一步文案說明的X軸中心，而Y值需要另行計算，以圓圈在文案上方為例子，圓圈的最底部和文案的最上方應該是Y值相等的，但是首先我們需要保證的是圓圈和文字的繪製位置Y軸一致，然後再去做加減法控制文字的位移，這裡控制文字的Y軸是不能通過簡單的textSize控制的，關於Paint的decent等方法文末附上鍊接，於是有了下面這段程式碼控制繪製文案的Y軸。

    private void calcSize() {
        int usefulHeight = mHeight - getPaddingBottom() - getPaddingTop();
        if (checkSteps()) {
            mDrawText = true;
            mTextPaint.getTextBounds(String.valueOf(mSteps.get(0)), 0, String.valueOf(mSteps.get(0)).length(), mTextRect);
            float center = (mTextPaint.ascent() + mTextPaint.descent()) / 2.0f;
            if (mMode == MODE_BOTTOM) {
                mCircleHeight = usefulHeight / 2.0f - mTextSize;
                mTextY = mCircleHeight - center;
            } else {
                mCircleHeight = usefulHeight / 2.0f + mTextSize;
                mTextY = mCircleHeight - center;
            }
        } else {
            mDrawText = false;
            mCircleHeight = usefulHeight / 2.0f;
        }
        ......
    }

OK,現在文字和圓圈的Y軸一致了，然後我們根據mode來控制文字上下方的位移，如果文字在圓圈上方，那麼mTextY的值就需要在原來的基礎上減去圓圈半徑mStrokeRadius,然後再減去mTextSize的1/2才能正好使得文字的最下方和圓圈的正上方是同一個Y軸。看程式碼。

        ......
        if (checkSteps()) {
            mDrawText = true;
            mTextPaint.getTextBounds(String.valueOf(mSteps.get(0)), 0, String.valueOf(mSteps.get(0)).length(), mTextRect);//這裡假設所有的文案字型大小是一樣的，忽略SpannableString帶來的影響，嚴謹一點的做法可以在onDraw()裡自行測量
            float center = (mTextPaint.ascent() + mTextPaint.descent()) / 2.0f;
            if (mMode == MODE_BOTTOM) {
                mCircleHeight = usefulHeight / 2.0f - mTextSize;
                mTextY = mCircleHeight - center + mStrokeRadius + mTextSize / 2.0f + dp2px(mMargin);
            } else {
                mCircleHeight = usefulHeight / 2.0f + mTextSize;
                mTextY = mCircleHeight - center - mStrokeRadius - mTextSize / 2.0f - dp2px(mMargin);
            }
        }

然後再來看一下效果


貌似文案的繪製也OK了，接下來就需要修飾一番了。
最後，我加了textMargin屬性控制文案和圓圈之間的間隔，indicator_mode屬性來控制文案和圓圈的相對位置.最終的結果就是效果圖了，程式碼連結附上。