public class StepBean{
  public static final int STEP_UNDO = -1;//未完成
  public static final int STEP_CURRENT = 0;//正在進(jìn)行
  public static final int STEP_COMPLETED = 1;//已完成
  public static final int STEP_LAST_COMPLETED = 2;//終點(diǎn)完成
  public static final int STEP_LAST_UNCOMPLETED = 3;//終點(diǎn)未完成
  private String name;
  private int state;
  public String getName(){
    return name;
  }
  public void setName(String name){
    this.name = name;
  }
  public int getState(){
    return state;
  }
  public void setState(int state){
    this.state = state;
  }
  public StepBean(){
  }
  public StepBean(String name, int state){
    this.name = name;
    this.state = state;
  }
}

public class HorizontalStepsViewIndicator extends View {
  private int defaultStepIndicatorNum = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 40, getResources().getDisplayMetrics());//定義默認(rèn)的高度
  private float mCompletedLineHeight;//完成線的高度
  private float mCircleRadius;//圓的半徑
  private Drawable mCompleteIcon;//完成的默認(rèn)圖片
  private Drawable mAttentionIcon;//正在進(jìn)行的默認(rèn)圖片
  private Drawable mDefaultIcon;//默認(rèn)的背景圖
  private Drawable mLastCompleteIcon;//終點(diǎn)未完成圖片
  private Drawable mLastUnCompleteIcon;//終點(diǎn)完成圖片
  private float mCenterY;//該view的Y軸中間位置
  private float mLeftY;//左上方的Y位置
  private float mRightY;//右下方的位置
  private List<StepBean> mStepBeanList ;//當(dāng)前有幾步流程
  private int mStepNum = 0;
  private float mLinePadding;//兩條連線之間的間距
  private List<Float> mCircleCenterPointPositionList;//定義所有圓的圓心點(diǎn)位置的集合
  private Paint mUnCompletedPaint;//未完成Paint
  private Paint mCompletedPaint;//完成paint
  private int mUnCompletedLineColor = ContextCompat.getColor(getContext(), R.color.uncompleted_color);//定義默認(rèn)未完成線的顏色
  private int mCompletedLineColor = ContextCompat.getColor(getContext(), R.color.completed_color);//定義默認(rèn)完成線的顏色
  private PathEffect mEffects;
  private int mComplectingPosition;//正在進(jìn)行position
  private Path mPath;
  private OnDrawIndicatorListener mOnDrawListener;
  private int screenWidth;
  /**
   * 設(shè)置監(jiān)聽
   * @param onDrawListener
   */
  public void setOnDrawListener(OnDrawIndicatorListener onDrawListener){
    mOnDrawListener = onDrawListener;
  }
  /**
   * get圓的半徑 get circle radius
   * @return
   */
  public float getCircleRadius(){
    return mCircleRadius;
  }
  public HorizontalStepsViewIndicator(Context context){
    this(context, null);
  }
  public HorizontalStepsViewIndicator(Context context, AttributeSet attrs){
    this(context, attrs, 0);
  }
  public HorizontalStepsViewIndicator(Context context, AttributeSet attrs, int defStyle){
    super(context, attrs, defStyle);
    init();
  }
  private void init(){
    mStepBeanList = new ArrayList<>();
    mPath = new Path();
    mEffects = new DashPathEffect(new float[]{8, 8, 8, 8}, 1);
    mCircleCenterPointPositionList = new ArrayList<>();//初始化
    mUnCompletedPaint = new Paint();
    mCompletedPaint = new Paint();
    mUnCompletedPaint.setAntiAlias(true);
    mUnCompletedPaint.setColor(mUnCompletedLineColor);
    mUnCompletedPaint.setStyle(Paint.Style.STROKE);
    mUnCompletedPaint.setStrokeWidth(2);
    mCompletedPaint.setAntiAlias(true);
    mCompletedPaint.setColor(mCompletedLineColor);
    mCompletedPaint.setStyle(Paint.Style.STROKE);
    mCompletedPaint.setStrokeWidth(2);
    mUnCompletedPaint.setPathEffect(mEffects);
    mCompletedPaint.setStyle(Paint.Style.FILL);
    mCompletedLineHeight = 0.03f * defaultStepIndicatorNum;//已經(jīng)完成線的寬高
    mCircleRadius = 0.28f * defaultStepIndicatorNum;//圓的半徑
    mLinePadding = 1.0f * defaultStepIndicatorNum;//線與線之間的間距
    mCompleteIcon = ContextCompat.getDrawable(getContext(), R.drawable.complted);//已經(jīng)完成的icon
    mAttentionIcon = ContextCompat.getDrawable(getContext(), R.drawable.attention);//正在進(jìn)行的icon
    mDefaultIcon = ContextCompat.getDrawable(getContext(), R.drawable.default_icon);//未完成的icon
    mLastCompleteIcon= ContextCompat.getDrawable(getContext(), R.drawable.last_complted);//終點(diǎn)已完成的icon
    mLastUnCompleteIcon= ContextCompat.getDrawable(getContext(), R.drawable.last_uncomplted);//終點(diǎn)未完成的icon
  }
  @Override
  protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
    int width = defaultStepIndicatorNum * 2;
    if(MeasureSpec.UNSPECIFIED != MeasureSpec.getMode(widthMeasureSpec)){
      screenWidth = MeasureSpec.getSize(widthMeasureSpec);
    }
    int height = defaultStepIndicatorNum;
    if(MeasureSpec.UNSPECIFIED != MeasureSpec.getMode(heightMeasureSpec)){
      height = Math.min(height, MeasureSpec.getSize(heightMeasureSpec));
    }
    width = (int) (mStepNum * mCircleRadius * 2 - (mStepNum - 1) * mLinePadding);
    setMeasuredDimension(width, height);
  }
  @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh){
    super.onSizeChanged(w, h, oldw, oldh);
    //獲取中間的高度,目的是為了讓該view繪制的線和圓在該view垂直居中
    mCenterY = 0.5f * getHeight();
    //獲取左上方Y(jié)的位置，獲取該點(diǎn)的意義是為了方便畫矩形左上的Y位置
    mLeftY = mCenterY - (mCompletedLineHeight / 2);
    //獲取右下方Y(jié)的位置，獲取該點(diǎn)的意義是為了方便畫矩形右下的Y位置
    mRightY = mCenterY + mCompletedLineHeight / 2;
    mCircleCenterPointPositionList.clear();
    for(int i = 0; i < mStepNum; i++){
      //先計(jì)算全部最左邊的padding值（getWidth()-（圓形直徑+兩圓之間距離）*2）
      float paddingLeft = (screenWidth - mStepNum * mCircleRadius * 2 - (mStepNum - 1) * mLinePadding) / 2;
      //add to list
      mCircleCenterPointPositionList.add(paddingLeft + mCircleRadius + i * mCircleRadius * 2 + i * mLinePadding);
    }
    /**
     * set listener
     */
    if(mOnDrawListener!=null){
      mOnDrawListener.ondrawIndicator();
    }
  }
  @Override
  protected synchronized void onDraw(Canvas canvas){
    super.onDraw(canvas);
    if(mOnDrawListener!=null){
      mOnDrawListener.ondrawIndicator();
    }
    mUnCompletedPaint.setColor(mUnCompletedLineColor);
    mCompletedPaint.setColor(mCompletedLineColor);
    //-----------------------畫線-------draw line-----------------------------------------------
    for(int i = 0; i < mCircleCenterPointPositionList.size() -1; i++){
      //前一個(gè)ComplectedXPosition
      final float preComplectedXPosition = mCircleCenterPointPositionList.get(i);
      //后一個(gè)ComplectedXPosition
      final float afterComplectedXPosition = mCircleCenterPointPositionList.get(i + 1);
      if(i <= mComplectingPosition&&mStepBeanList.get(0).getState()!=StepBean.STEP_UNDO){//判斷在完成之前的所有點(diǎn)
        //判斷在完成之前的所有點(diǎn)，畫完成的線，這里是矩形,很細(xì)的矩形，類似線，為了做區(qū)分，好看些
        canvas.drawRect(preComplectedXPosition + mCircleRadius - 10, mLeftY, afterComplectedXPosition - mCircleRadius + 10, mRightY, mCompletedPaint);
      } else{
        mPath.moveTo(preComplectedXPosition + mCircleRadius, mCenterY);
        mPath.lineTo(afterComplectedXPosition - mCircleRadius, mCenterY);
        canvas.drawPath(mPath, mUnCompletedPaint);
      }
    }
    //-----------------------畫線-------draw line-----------------------------------------------
    //-----------------------畫圖標(biāo)-----draw icon-----------------------------------------------
    for(int i = 0; i < mCircleCenterPointPositionList.size(); i++){
      final float currentComplectedXPosition = mCircleCenterPointPositionList.get(i);
      Rect rect = new Rect((int) (currentComplectedXPosition - mCircleRadius), (int) (mCenterY - mCircleRadius), (int) (currentComplectedXPosition + mCircleRadius), (int) (mCenterY + mCircleRadius));
      StepBean stepsBean = mStepBeanList.get(i);
      if(stepsBean.getState()==StepBean.STEP_UNDO){
        mDefaultIcon.setBounds(rect);
        mDefaultIcon.draw(canvas);
      }else if(stepsBean.getState()==StepBean.STEP_CURRENT){
        mCompletedPaint.setColor(Color.WHITE);
        canvas.drawCircle(currentComplectedXPosition, mCenterY, mCircleRadius * 1.1f, mCompletedPaint);
        mAttentionIcon.setBounds(rect);
        mAttentionIcon.draw(canvas);
      }else if(stepsBean.getState()==StepBean.STEP_COMPLETED){
        mCompleteIcon.setBounds(rect);
        mCompleteIcon.draw(canvas);
      }else if(stepsBean.getState()==StepBean.STEP_LAST_COMPLETED){
        mLastCompleteIcon.setBounds(rect);
        mLastCompleteIcon.draw(canvas);
      }else if(stepsBean.getState()==StepBean.STEP_LAST_UNCOMPLETED){
        mLastUnCompleteIcon.setBounds(rect);
        mLastUnCompleteIcon.draw(canvas);
      }
    }
    //-----------------------畫圖標(biāo)-----draw icon-----------------------------------------------
  }
  /**
   * 得到所有圓點(diǎn)所在的位置
   * @return
   */
  public List<Float> getCircleCenterPointPositionList()
  {
    return mCircleCenterPointPositionList;
  }
  /**
   * 設(shè)置流程步數(shù)
   * @param stepsBeanList 流程步數(shù)
   */
  public void setStepNum(List<StepBean> stepsBeanList) {
    this.mStepBeanList = stepsBeanList;
    mStepNum = mStepBeanList.size();
    if(mStepBeanList!=null&&mStepBeanList.size()>0){
      for(int i = 0;i<mStepNum;i++){
        StepBean stepsBean = mStepBeanList.get(i);
          if(stepsBean.getState()==StepBean.STEP_COMPLETED){
            mComplectingPosition = i;
          }
      }
    }
    requestLayout();
  }
  /**
   * 設(shè)置未完成線的顏色
   * @param unCompletedLineColor
   */
  public void setUnCompletedLineColor(int unCompletedLineColor){
    this.mUnCompletedLineColor = unCompletedLineColor;
  }
  /**
   * 設(shè)置已完成線的顏色
   * @param completedLineColor
   */
  public void setCompletedLineColor(int completedLineColor){
    this.mCompletedLineColor = completedLineColor;
  }
  /**
   * 設(shè)置默認(rèn)圖片
   * @param defaultIcon
   */
  public void setDefaultIcon(Drawable defaultIcon){
    this.mDefaultIcon = defaultIcon;
  }
  /**
   * 設(shè)置已完成圖片
   * @param completeIcon
   */
  public void setCompleteIcon(Drawable completeIcon){
    this.mCompleteIcon = completeIcon;
  }
  public void setLastCompleteIcon(Drawable lastcompleteIcon){
    this.mLastCompleteIcon = lastcompleteIcon;
  }
  public void setLastUnCompleteIcon(Drawable lastUnCompleteIcon){
    this.mLastUnCompleteIcon = lastUnCompleteIcon;
  }
  /**
   * 設(shè)置正在進(jìn)行中的圖片
   * @param attentionIcon
   */
  public void setAttentionIcon(Drawable attentionIcon){
    this.mAttentionIcon = attentionIcon;
  }
  /**
   * 設(shè)置對(duì)view監(jiān)聽
   */
  public interface OnDrawIndicatorListener{
    void ondrawIndicator();
  }
}

public class HorizontalStepView extends LinearLayout implements HorizontalStepsViewIndicator.OnDrawIndicatorListener{
  private RelativeLayout mTextContainer;
  private HorizontalStepsViewIndicator mStepsViewIndicator;
  private List<StepBean> mStepBeanList;
  private int mComplectingPosition;
  private int mUnComplectedTextColor = ContextCompat.getColor(getContext(), R.color.uncompleted_text_color);//定義默認(rèn)未完成文字的顏色;
  private int mComplectedTextColor = ContextCompat.getColor(getContext(), R.color.completed_color);//定義默認(rèn)完成文字的顏色;
  private int mTextSize = 14;//default textSize
  private TextView mTextView;
  public HorizontalStepView(Context context){
    this(context, null);
  }
  public HorizontalStepView(Context context, AttributeSet attrs){
    this(context, attrs, 0);
  }
  public HorizontalStepView(Context context, AttributeSet attrs, int defStyleAttr){
    super(context, attrs, defStyleAttr);
    init();
  }
  private void init(){
    View rootView = LayoutInflater.from(getContext()).inflate(R.layout.widget_horizontal_stepsview, this);
    mStepsViewIndicator = (HorizontalStepsViewIndicator) rootView.findViewById(R.id.steps_indicator);
    mStepsViewIndicator.setOnDrawListener(this);
    mTextContainer = (RelativeLayout) rootView.findViewById(R.id.rl_text_container);
  }
  /**
   * 設(shè)置顯示的文字
   * @param stepsBeanList
   * @return
   */
  public HorizontalStepView setStepViewTexts(List<StepBean> stepsBeanList) {
    mStepBeanList = stepsBeanList;
    mStepsViewIndicator.setStepNum(mStepBeanList);
    return this;
  }
  /**
   * 設(shè)置未完成文字的顏色
   * @param unComplectedTextColor
   * @return
   */
  public HorizontalStepView setStepViewUnComplectedTextColor(int unComplectedTextColor) {
    mUnComplectedTextColor = unComplectedTextColor;
    return this;
  }
  /**
   * 設(shè)置完成文字的顏色
   * @param complectedTextColor
   * @return
   */
  public HorizontalStepView setStepViewComplectedTextColor(int complectedTextColor) {
    this.mComplectedTextColor = complectedTextColor;
    return this;
  }
  /**
   * 設(shè)置StepsViewIndicator未完成線的顏色
   * @param unCompletedLineColor
   * @return
   */
  public HorizontalStepView setStepsViewIndicatorUnCompletedLineColor(int unCompletedLineColor) {
    mStepsViewIndicator.setUnCompletedLineColor(unCompletedLineColor);
    return this;
  }
  /**
   * 設(shè)置StepsViewIndicator完成線的顏色
   * @param completedLineColor
   * @return
   */
  public HorizontalStepView setStepsViewIndicatorCompletedLineColor(int completedLineColor) {
    mStepsViewIndicator.setCompletedLineColor(completedLineColor);
    return this;
  }
  /**
   * 設(shè)置StepsViewIndicator默認(rèn)圖片
   * @param defaultIcon
   */
  public HorizontalStepView setStepsViewIndicatorDefaultIcon(Drawable defaultIcon) {
    mStepsViewIndicator.setDefaultIcon(defaultIcon);
    return this;
  }
  /**
   * 設(shè)置StepsViewIndicator已完成圖片
   * @param completeIcon
   */
  public HorizontalStepView setStepsViewIndicatorCompleteIcon(Drawable completeIcon) {
    mStepsViewIndicator.setCompleteIcon(completeIcon);
    return this;
  }
  /**
   * 設(shè)置StepsViewIndicator正在進(jìn)行中的圖片
   * @param attentionIcon
   */
  public HorizontalStepView setStepsViewIndicatorAttentionIcon(Drawable attentionIcon) {
    mStepsViewIndicator.setAttentionIcon(attentionIcon);
    return this;
  }
  public HorizontalStepView setStepsViewIndicatorLastCompleteIcon(Drawable lastCompleteIcon) {
    mStepsViewIndicator.setLastCompleteIcon(lastCompleteIcon);
    return this;
  }
  public HorizontalStepView setStepsViewIndicatorLastUnCompleteIcon(Drawable lastUnCompleteIcon) {
    mStepsViewIndicator.setLastUnCompleteIcon(lastUnCompleteIcon);
    return this;
  }
  /**
   * set textSize
   * @param textSize
   * @return
   */
  public HorizontalStepView setTextSize(int textSize) {
    if(textSize > 0) {
      mTextSize = textSize;
    }
    return this;
  }
  @Override
  public void ondrawIndicator() {
    if(mTextContainer != null) {
      mTextContainer.removeAllViews();
      List<Float> complectedXPosition = mStepsViewIndicator.getCircleCenterPointPositionList();
      if(mStepBeanList != null && complectedXPosition != null && complectedXPosition.size() > 0) {
        for(int i = 0; i < mStepBeanList.size(); i++) {
          mTextView = new TextView(getContext());
          mTextView.setTextSize(TypedValue.COMPLEX_UNIT_SP, mTextSize);
          mTextView.setText(mStepBeanList.get(i).getName());
          int spec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
          mTextView.measure(spec, spec);
          // getMeasuredWidth
          int measuredWidth = mTextView.getMeasuredWidth();
          mTextView.setX(complectedXPosition.get(i) - measuredWidth / 2);
          mTextView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
          if(i <= mComplectingPosition) {
            mTextView.setTypeface(null);
            mTextView.setTextColor(mComplectedTextColor);
          } else{
            mTextView.setTextColor(mUnComplectedTextColor);
          }
          mTextContainer.addView(mTextView);
        }
      }
    }
  }
}

<cn.comnav.utrain.ui.widget.HorizontalStepView
          android:id="@+id/hsv_step_view"
          android:layout_width="match_parent"
          android:layout_height="80dp"
          android:layout_below="@+id/ll_role"
          android:layout_marginBottom="40dp"
          />

private List<StepBean> stepsBeanList;
         private HorizontalStepView mHorizontalStepView;
         mHorizontalStepView=(HorizontalStepView)findViewById(R.id.hsv_step_view);
         stepsBeanList = new ArrayList<>();
            StepBean stepBean0=null;
            StepBean stepBean1=null;
            StepBean stepBean2=null;
            StepBean stepBean3=null;
            switch (stepIndex){
              case 1:
                stepBean0 = new StepBean("手機(jī)綁定",1);
                stepBean1 = new StepBean("實(shí)名認(rèn)證",0);
                stepBean2 = new StepBean("學(xué)時(shí)充值",-1);
                stepBean3 = new StepBean("開始用車",3);
                break;
              case 2:
                stepBean0 = new StepBean("手機(jī)綁定",1);
                stepBean1 = new StepBean("實(shí)名認(rèn)證",1);
                stepBean2 = new StepBean("學(xué)時(shí)充值",0);
                stepBean3 = new StepBean("開始用車",3);
                break;
              case 3:
                stepBean0 = new StepBean("手機(jī)綁定",1);
                stepBean1 = new StepBean("實(shí)名認(rèn)證",1);
                stepBean2 = new StepBean("學(xué)時(shí)充值",1);
                stepBean3 = new StepBean("開始用車",2);
                break;
            }
            stepsBeanList.add(stepBean0);
            stepsBeanList.add(stepBean1);
            stepsBeanList.add(stepBean2);
            stepsBeanList.add(stepBean3);
          mHorizontalStepView.setStepViewTexts(stepsBeanList);