自定义步骤View--StepView

最近遇到一个按步骤走流程的需求，相信其他的程序员也会遇到这样的需求吧，好了下面说一下我解决这个问题的过程

刚接到这个需求的时候，我是使用布局的方式画的，很长很乱，适配是发现，那是相当的烂啊，根本无法满足适配的需要，无语啊。代码就不贴了哈。

还是转换思路，自己写吧，于是就简单的写一个。代码如下：

思路如下：

   先写出7个方法，每个方法实现的是每个步骤的状态，画出圆点、连线、每个步骤的名称

import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.util.AttributeSet;import android.view.View;public class StepView extends View {    private int mWidth;//view的总宽度    private Bitmap curImage;//当前步骤图片    private Bitmap passedImage;//已完成步骤图片    private Bitmap unPassImage;//未完成步骤图片    private Paint paint;//画bitmap使用的画笔    private Paint linePaint;//画线使用的画笔    private float lineWidth;//步骤之间每根线的长度    private int lineCount = 6;//共多少条连线    /**     * 当前图片与未完成和完成图片大小不一致     * 且图片要在一条直线上，因此，画完成和未完成     * 的图片时要计算出marginTop     */    private float unpassTop = 0;    private Paint textPait;//画文字时需要的画笔    private int curIndex = 0;//当前步骤    private int marginTop = 40;//文字与图片之间的间距    public StepView(Context context) {        super(context);        init();    }    public StepView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init();    }    public StepView(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    private void init(){        //初始化图片        curImage = BitmapFactory.decodeResource(getResources(), R.drawable.process_current);        passedImage = BitmapFactory.decodeResource(getResources(), R.drawable.process_passed);        unPassImage = BitmapFactory.decodeResource(getResources(), R.drawable.process_unpass);        //初始化画笔        paint = new Paint();        linePaint = new Paint();        linePaint.setAntiAlias(true);        linePaint.setStrokeWidth(5);        linePaint.setColor(Color.parseColor("#cfcfcf"));        textPait = new Paint();        textPait.setAntiAlias(true);        textPait.setTextSize(36);        textPait.setColor(Color.parseColor("#eeaa2f"));    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        //设置宽度，随着view的宽度的变化而变化        this.mWidth = w;        //计算步骤之间线条的长度        lineWidth = (float)(mWidth - passedImage.getWidth() * lineCount - curImage.getWidth()) / lineCount;        //计算完成与未完成图片与View顶部的间距        unpassTop = (curImage.getHeight() - unPassImage.getHeight()) / 2;    }    
@Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        float startX = 0;        for(int i = 0; i<= lineCount; i++){            //先画点，当前步骤之前为已完成，当前步骤之后为未完成            if(curIndex > i){                drawCircleBitmap(canvas,startX,passedImage,unpassTop);            }else if(curIndex == i){                drawCircleBitmap(canvas,startX,curImage,0);            }else{                drawCircleBitmap(canvas,startX,unPassImage,unpassTop);            }            //画文字            drawText(i,canvas,startX,curIndex);            //画线条            if(curIndex > i){                //计算新的起始位置                startX += passedImage.getWidth();                drawLine(canvas,startX,Color.parseColor("#eeaa2f"));            }else if(curIndex == i){                if(i != 6){                    //计算新的起始位置                    startX += curImage.getWidth();                    drawLine(canvas,startX,Color.parseColor("#cfcfcf"));                }            }else{                if(i != 6){                    //计算新的起始位置                    startX += unPassImage.getWidth();                    drawLine(canvas,startX,Color.parseColor("#cfcfcf"));                }            }            //计算新的起始位置            startX += lineWidth;        }    }    private void drawCircleBitmap(Canvas canvas,float startX,Bitmap bitmap,float marginTop){        canvas.drawBitmap(bitmap,startX,marginTop,paint);    }    private void drawLine(Canvas canvas,float startX,int color){        linePaint.setColor(color);        canvas.drawLine(startX,curImage.getHeight() / 2,startX + lineWidth,curImage.getHeight() / 2,linePaint);    }    private void drawText(int index,Canvas canvas,float startX,int curIndex){        if(index <= curIndex){            textPait.setColor(Color.parseColor("#eeaa2f"));        }else{            textPait.setColor(Color.parseColor("#cfcfcf"));        }        if(index == 0){            canvas.drawText("第一步",0,curImage.getHeight() + marginTop,textPait);        }else if(index == 1){            if(curIndex == 1){                canvas.drawText("第二步",startX - 25,curImage.getHeight() + marginTop,textPait);            }else{                canvas.drawText("第二步",startX - 35,curImage.getHeight() + marginTop,textPait);            }        }else if(index == 2){            if(curIndex == 2){                canvas.drawText("第三步",startX - 25,curImage.getHeight() + marginTop,textPait);            }else{                canvas.drawText("第三步",startX - 35,curImage.getHeight() + marginTop,textPait);            }        }else if(index == 3){            if(curIndex == 3){                canvas.drawText("第四步",startX - 25,curImage.getHeight() + marginTop,textPait);            }else{                canvas.drawText("第四步",startX - 35,curImage.getHeight() + marginTop,textPait);            }        }else if(index == 4){            if(curIndex == 4){                canvas.drawText("第五步",startX - 25,curImage.getHeight() + marginTop,textPait);            }else{                canvas.drawText("第五步",startX - 35,curImage.getHeight() + marginTop,textPait);            }        }else if(index == 5){            if(curIndex == 5){                canvas.drawText("第六步",startX - 25,curImage.getHeight() + marginTop,textPait);            }else{                canvas.drawText("第六步",startX - 35,curImage.getHeight() + marginTop,textPait);            }        }else if(index == 6){            canvas.drawText("第七步",mWidth - 90,curImage.getHeight() + marginTop,textPait);        }    }

    public void setCurIndex(int curIndex) {        this.curIndex = curIndex;        invalidate();    }}

以上的代码是有缺陷，当文字大小改变后，产生的问题需要重新计算，这对适配来说是非常痛苦的，在使用过程中发现了这个问题，故对比做了进一步的优化。

public class StepView extends View {    private int mWidth;//view的总宽度    private Bitmap curImage;//当前步骤图片    private Bitmap passedImage;//已完成步骤图片    private Bitmap unPassImage;//未完成步骤图片    private Paint paint;//画bitmap使用的画笔    private Paint linePaint;//画线使用的画笔    private float lineWidth;//步骤之间每根线的长度    private int lineCount = 0;//共多少条连线    /**     * 当前图片与未完成和完成图片大小不一致     * 且图片要在一条直线上，因此，画完成和未完成     * 的图片时要计算出marginTop     */    private float unpassTop = 0;    private Paint textPait;//画文字时需要的画笔    private int curIndex = 0;//当前步骤    private int marginTop = 15;//文字与图片之间的间距    private int textSize = 12;//文字大小    private int passedImageWidth;    private int curImageWidth;    private int unpassImageWidth;    private int startTextY;    private String[] texts = {"第一步", "第二步", "第三步", "第四步", "第五步", "第六步", "第七步"};    private float[] textLengths = new float[7];    public StepView(Context context) {        super(context);        init(context);    }    public StepView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init(context);    }    public StepView(Context context, AttributeSet attrs) {        super(context, attrs);        init(context);    }    private void init(Context context) {        //初始化图片        curImage = BitmapFactory.decodeResource(getResources(), R.drawable.process_current);        passedImage = BitmapFactory.decodeResource(getResources(), R.drawable.process_passed);        unPassImage = BitmapFactory.decodeResource(getResources(), R.drawable.process_unpass);        textSize = dip2px(context, textSize);        marginTop = dip2px(context, marginTop);        lineCount = texts.length - 1;        passedImageWidth = passedImage.getWidth();        curImageWidth = curImage.getWidth();        unpassImageWidth = unPassImage.getWidth();        startTextY = curImage.getHeight() + marginTop;        //初始化画笔        paint = new Paint();        linePaint = new Paint();        linePaint.setAntiAlias(true);        linePaint.setStrokeWidth(5);        linePaint.setColor(Color.parseColor("#cfcfcf"));        textPait = new Paint();        textPait.setAntiAlias(true);        textPait.setTextSize(textSize);        textPait.setColor(Color.parseColor("#eeaa2f"));        for (int i = 0, len = texts.length; i < len; i++) {            textLengths[i] = getTextLength(texts[i]);        }    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        //设置宽度，随着view的宽度的变化而变化        this.mWidth = w;        //计算步骤之间线条的长度        lineWidth = (float) (mWidth - passedImageWidth * lineCount - curImageWidth) / lineCount;        //计算完成与未完成图片与View顶部的间距        unpassTop = (curImage.getHeight() - unPassImage.getHeight()) / 2;    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        float startX = 0;        for (int i = 0; i <= lineCount; i++) {            //先画点，当前步骤之前为已完成，当前步骤之后为未完成            if (curIndex > i) {                drawCircleBitmap(canvas, startX, passedImage, unpassTop);            } else if (curIndex == i) {                drawCircleBitmap(canvas, startX, curImage, 0);            } else {                drawCircleBitmap(canvas, startX, unPassImage, unpassTop);            }            //画文字            drawText(i, canvas, startX, curIndex, curIndex == i);            //画线条            if (curIndex > i) {                //计算新的起始位置                startX += passedImageWidth;                drawLine(canvas, startX, Color.parseColor("#eeaa2f"));            } else if (curIndex == i) {                if (i != 6) {                    //计算新的起始位置                    startX += curImageWidth;                    drawLine(canvas, startX, Color.parseColor("#cfcfcf"));                }            } else {                if (i != 6) {                    //计算新的起始位置                    startX += unpassImageWidth;                    drawLine(canvas, startX, Color.parseColor("#cfcfcf"));                }            }            //计算新的起始位置            startX += lineWidth;        }    }    private void drawCircleBitmap(Canvas canvas, float startX, Bitmap bitmap, float marginTop) {        canvas.drawBitmap(bitmap, startX, marginTop, paint);    }    private void drawLine(Canvas canvas, float startX, int color) {        linePaint.setColor(color);        canvas.drawLine(startX, curImage.getHeight() / 2, startX + lineWidth, curImage.getHeight() / 2, linePaint);    }    private void drawText(int index, Canvas canvas, float startX, int curIndex, boolean isCur) {        int div = isCur ? curImageWidth / 2 : passedImageWidth / 2;        if (index <= curIndex) {            textPait.setColor(Color.parseColor("#eeaa2f"));        } else {            textPait.setColor(Color.parseColor("#cfcfcf"));        }        if (index == 0) {            canvas.drawText(texts[0], 0, startTextY, textPait);        } else if (index == texts.length - 1) {            canvas.drawText(texts[texts.length - 1], mWidth - textLengths[index], startTextY, textPait);        } else {            canvas.drawText(texts[index], startX + div - textLengths[index] / 2, startTextY, textPait);        }    }    public void setCurIndex(int curIndex) {        this.curIndex = curIndex;        invalidate();    }    private float getTextLength(String text) {        // 使用panit获取文字的宽度        float textLength = textPait.measureText(text);        return textLength;    }    /**     * dip 2 px     *     * @param context     * @param dipValue     * @return 上午11:37:12     */    private int dip2px(Context context, int dipValue) {        final float scale = context.getResources().getDisplayMetrics().density;        return (int) (dipValue * scale);    }}

以上就是全部的代码实现，初步的封装了步骤的变化，其实还可以进一步封装，比如自定义属性，步骤总数、步骤标题集合，已完成步骤的颜色、当前步骤颜色、未完成步骤颜色等等，希望有兴趣的同学进行进一步的封装

需要的图片资源已经上传，本想着把第一步即每个步骤为一个方法实现的代码贴出来的，实在是太麻烦啦，就算啦。

欢迎各位指正！