先看效果圖

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;
        //當前應該顯示的狀態(tài)圖片
        Bitmap bitmap;
        for(int i=1;i<=stepEntity.getStep();i++) {
            distance=(i-1)*(lineDistance+2*radius);
            //圖片顯示區(qū)域
            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);
          //線段只在總步驟數(shù)>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轉(zhuǎn)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;
   //步驟下面的文字描述症歇，長度即是步驟數(shù)
    private String[]steps;
    //總的步驟數(shù)
    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;
    }
}