android 步骤指示器实现

最近在弄PHP，android端需要弄一个指示器，如下图这样的，本来以为要些时间就想网上找了，可是马蛋周五刚好公司没网，好吧，就自己弄了一个，发现还很简单，做个记录吧：

下面说一下实现过程，先说水平的HorizontalStepView,主要是onDraw方法，由于本人水平比较菜，所以就写了四个方法，分别为：

 @Override
    protected void onDraw(Canvas canvas) {
        if(mPointCount < 2) return;

        //画线
        drawLines(canvas);

        //画大圆的背景
        drawBigBackgroundPoints(canvas);

        //画大的圆点
        drawBigPoints(canvas);

        //画上面的文字
        drawUpTexts(canvas);

        //画下面的文字
        drawDownText(canvas) ;
    }

我本人所理解的自定义View，就是拆分我们需要的需求，拆分到我们都能实现的小过程就行。比如这个例子，可以拆分成线的组成、大圆点、大圆点背景、上面的文字、下面的文字

所有可以根据这写具体的特点，先定义我们需要的属性：

<declare-styleable name="HorizontalStepView">
        <!--上层文字属性-->
        <attr name="up_text_size" format="dimension"/>
        <attr name="up_text_finished_color" format="color" />
        <attr name="up_text_todo_color" format="color" />
        <attr name="up_text_padding" format="dimension" />

        <!--下层文字属性-->
        <attr name="down_text_size" format="dimension" />
        <attr name="down_text_finished_color" format="color" />
        <attr name="down_text_todo_color" format="color" />
        <attr name="down_text_padding" format="dimension" />

        <!--大点的属性-->
        <attr name="big_point_radius" format="dimension" />
        <attr name="big_point_outer_radius" format="dimension" />
        <attr name="big_point_finished_color" format="color"/>
        <attr name="big_point_todo_color" format="color" />
        <attr name="big_point_outer_color" format="color" />

        <!--线的属性-->
        <attr name="line_stroke_width" format="dimension" />
        <attr name="line_finished_color" format="color" />
        <attr name="line_todo_color" format="color" />

        <!--总共需要完成的步骤-->
        <attr name="total_step" format="integer"/>

    </declare-styleable>

这个已经很清楚了，上层文字、下层文字、大圆的属性、线的属性都已经确定，那我们就根据这些属性，设置不同的Paint,如下：

    //画大圆点的Paint
    private Paint mPointPaint;
    //画线的Paint
    private Paint mLinePaint;
    //画文字的Paint
    private Paint mTextPaint;

最主要的是画线了，因为涉及到颜色的变化，下面是个人的画法：

private void drawLines(Canvas canvas) {
        for (int i = 0; i < mPointCount; i++) {  //总共需要完成的步骤，当前的步骤
            if (i < mCurrentPoint) {  //是否完成，显示的颜色不同
                mLineColor = mLineFinishedColor;
            } else {
                mLineColor = mLineTodoColor;
            }
            mLinePaint.setColor(mLineColor);

            //画线开始与结束的点 这点主要是个人的需求
            int tempStart = mStart + mBigPointRadius + i * mTwoPointLengthValue - mTwoPointLengthValue / 2;
            int tempEnd = tempStart + mTwoPointLengthValue;

            if (tempStart < mStart + mBigPointRadius) tempStart = mStart + mBigPointRadius;
            if (tempEnd > mEnd - mBigPointRadius) tempEnd = mEnd - mBigPointRadius;

            canvas.drawLine(tempStart, mHorizontalValue, tempEnd, mHorizontalValue, mLinePaint);
        }
    }

竖直的VerticalStepView,实现方式也基本如下：

    @Override
    protected void onDraw(Canvas canvas) {
        if(mPointCount < 2 || mDatas == null) return;

        //画竖直的粗线
        drawLine(canvas) ;

        //画粗线上的大圆点
        drawPoint(canvas) ;

        //画右边的文字
        drawText(canvas) ;
    }

源码下面会给出，也基本就这个样子

源码
好了，就这样了。。。