先看效果图

device-2016-07-18-102915.png

class StepView extends View {    
    private int width;  
    private int radius;   
    private Context context; 
    private int lineDistance;    
    private Paint linePaint;
    private Bitmap fail;
    private Bitmap wait;
    private Bitmap success;
    private TextPaint textPaint;
    private StepEntity stepEntity;
    private DashPathEffect dashPathEffect;
    private Paint pathPaint;
    public StepEntity getStepEntity() {
        return stepEntity;
    }
    public void setStepEntity(StepEntity stepEntity) { 
       this.stepEntity = stepEntity; 
       invalidate();
    } 
   public StepView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }
   public StepView(Context context) {
        this(context,null);
    }
    public StepView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context=context;
        //进度圆的半径
        radius=dp2Px(20);
        //两个圆之间线段的长度
        lineDistance=dp2Px(40);
        //圆之间横线
        linePaint = new Paint();
        linePaint.setAntiAlias(true);
        linePaint.setColor(Color.BLACK);
        linePaint.setStyle(Paint.Style.STROKE);
        //线段宽度
        linePaint.setStrokeWidth(dp2Px(5));
        //图片资源
        fail = BitmapFactory.decodeResource(getResources(), R.mipmap.fail);
        wait = BitmapFactory.decodeResource(getResources(), R.mipmap.wait);
        success = BitmapFactory.decodeResource(getResources(), R.mipmap.success);
        //文字paint
        textPaint = new TextPaint();
        textPaint.setAntiAlias(true);
        textPaint.setColor(Color.BLACK);
        textPaint.setTextSize(dp2Px(15));
        //虚线paint
        pathPaint = new Paint();
        pathPaint.setAntiAlias(true);
        pathPaint.setColor(Color.WHITE);
        pathPaint.setStyle(Paint.Style.STROKE);
        pathPaint.setStrokeWidth(dp2Px(2));
        dashPathEffect = new DashPathEffect(new float[]{4,4,4,4},1);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getMeasuredWidth();
        int height=getMeasuredHeight();
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int distance;
        //当前应该显示的状态图片
        Bitmap bitmap;
        for(int i=1;i<=stepEntity.getStep();i++) {
            distance=(i-1)*(lineDistance+2*radius);
            //图片显示区域
            Rect rectF=new Rect();
            rectF.left=distance;
            rectF.top=0;
            rectF.right=distance+2*radius;
            rectF.bottom=radius*2;
            //已完成的步骤
            if(stepEntity.getCurrent()>i){
                bitmap=success;
                linePaint.setColor(Color.BLACK);
            //正在进行中的步骤,这个步骤有可能是失败的，所以图片
            }else if(stepEntity.getCurrent()==i){
               if(stepEntity.isFailure()){
                  bitmap=fail;
               }else {
                  bitmap = success;
                }
                linePaint.setColor(Color.RED);
            //未完成的步骤
             }else{
                bitmap=wait;
                linePaint.setColor(Color.RED);
            }
            //绘制图片
            canvas.drawBitmap(bitmap,null,rectF,null);
            //文字宽高
            Rect bound=new Rect();
            textPaint.getTextBounds(stepEntity.getSteps()[i-1],0,stepEntity.getSteps()[i-1].length(),bound);
            //文字在圆下面5dp
            canvas.drawText(stepEntity.getSteps()[i-1],distance+radius-
bound.width()/2,2*radius+bound.height()+dp2Px(5),textPaint);
          //线段只在总步骤数>1时绘制
            if(i>1){
                //两个圆之间线段的起始点 和终点
               int start=2*radius*(i-1)+(i-2)*lineDistance;
                int end=start+lineDistance;
                //已完成的步骤用实线表示
                if(stepEntity.getCurrent()>i){
                    canvas.drawLine(start,radius,end,radius,linePaint);
                //未完成的步骤用虚线表示
                }else {
                    Path path = new Path();
                    path.moveTo(start, radius);
                    path.lineTo(end, radius);
                    pathPaint.setPathEffect(dashPathEffect);
                    canvas.drawPath(path, pathPaint);
                }
            }
        }
    }
    //dp转px
    public  int dp2Px(int dp) {
        DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
        return dp < 0 ? dp : Math.round(dp*displayMetrics.density);
    }
}

//需要用到的实体类

public class StepEntity {
    //当前步骤
    private int current;
   //步骤下面的文字描述，长度即是步骤数
    private String[]steps;
    //总的步骤数
    private int step;
    //当前步骤是否失败
    private
    public int getCurrent() {
        return current;
    }
    public void setCurrent(int current) {
        if(current<=0){
            current=1;
        }
        this.current = current;
    }
    public String[] getSteps() {
        return steps;
    }
    public void setSteps(String[] steps) {
        this.steps = steps;
    }
    public int getStep() {
        return steps.length;
    }
    public boolean isFailure() {
    return isFailure;
    }
    public void setFailure(boolean failure) {
      isFailure = failure;
    }
}