android 步骤指示器实现

来源：互联网发布：iphone4s实用软件编辑：程序博客网时间：2024/06/06 19:30

最近在弄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) ;    }

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

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

0 0