public class StepBean{  public static final int STEP_UNDO = -1;//未完成  public static final int STEP_CURRENT = 0;//正在進行  public static final int STEP_COMPLETED = 1;//已完成  public static final int STEP_LAST_COMPLETED = 2;//終點完成  public static final int STEP_LAST_UNCOMPLETED = 3;//終點未完成  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());//定義默認的高度  private float mCompletedLineHeight;//完成線的高度  private float mCircleRadius;//圓的半徑  private Drawable mCompleteIcon;//完成的默認圖片  private Drawable mAttentionIcon;//正在進行的默認圖片  private Drawable mDefaultIcon;//默認的背景圖  private Drawable mLastCompleteIcon;//終點未完成圖片  private Drawable mLastUnCompleteIcon;//終點完成圖片  private float mCenterY;//該view的Y軸中間位置  private float mLeftY;//左上方的Y位置  private float mRightY;//右下方的位置  private List<StepBean> mStepBeanList ;//當前有幾步流程  private int mStepNum = 0;  private float mLinePadding;//兩條連線之間的間距  private List<Float> mCircleCenterPointPositionList;//定義所有圓的圓心點位置的集合  private Paint mUnCompletedPaint;//未完成Paint  private Paint mCompletedPaint;//完成paint  private int mUnCompletedLineColor = ContextCompat.getColor(getContext(), R.color.uncompleted_color);//定義默認未完成線的顏色  private int mCompletedLineColor = ContextCompat.getColor(getContext(), R.color.completed_color);//定義默認完成線的顏色  private PathEffect mEffects;  private int mComplectingPosition;//正在進行position  private Path mPath;  private OnDrawIndicatorListener mOnDrawListener;  private int screenWidth;  /**   * 設置監聽   * @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;//已經完成線的寬高    mCircleRadius = 0.28f * defaultStepIndicatorNum;//圓的半徑    mLinePadding = 1.0f * defaultStepIndicatorNum;//線與線之間的間距    mCompleteIcon = ContextCompat.getDrawable(getContext(), R.drawable.complted);//已經完成的icon    mAttentionIcon = ContextCompat.getDrawable(getContext(), R.drawable.attention);//正在進行的icon    mDefaultIcon = ContextCompat.getDrawable(getContext(), R.drawable.default_icon);//未完成的icon    mLastCompleteIcon= ContextCompat.getDrawable(getContext(), R.drawable.last_complted);//終點已完成的icon    mLastUnCompleteIcon= ContextCompat.getDrawable(getContext(), R.drawable.last_uncomplted);//終點未完成的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的位置，獲取該點的意義是為了方便畫矩形左上的Y位置    mLeftY = mCenterY - (mCompletedLineHeight / 2);    //獲取右下方Y的位置，獲取該點的意義是為了方便畫矩形右下的Y位置    mRightY = mCenterY + mCompletedLineHeight / 2;    mCircleCenterPointPositionList.clear();    for(int i = 0; i < mStepNum; i++){      //先計算全部最左邊的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++){      //前一個ComplectedXPosition      final float preComplectedXPosition = mCircleCenterPointPositionList.get(i);      //后一個ComplectedXPosition      final float afterComplectedXPosition = mCircleCenterPointPositionList.get(i + 1);      if(i <= mComplectingPosition&&mStepBeanList.get(0).getState()!=StepBean.STEP_UNDO){//判斷在完成之前的所有點        //判斷在完成之前的所有點，畫完成的線，這里是矩形,很細的矩形，類似線，為了做區分，好看些        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-----------------------------------------------    //-----------------------畫圖標-----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);      }    }    //-----------------------畫圖標-----draw icon-----------------------------------------------  }  /**   * 得到所有圓點所在的位置   * @return   */  public List<Float> getCircleCenterPointPositionList()  {    return mCircleCenterPointPositionList;  }  /**   * 設置流程步數   * @param stepsBeanList 流程步數   */  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();  }  /**   * 設置未完成線的顏色   * @param unCompletedLineColor   */  public void setUnCompletedLineColor(int unCompletedLineColor){    this.mUnCompletedLineColor = unCompletedLineColor;  }  /**   * 設置已完成線的顏色   * @param completedLineColor   */  public void setCompletedLineColor(int completedLineColor){    this.mCompletedLineColor = completedLineColor;  }  /**   * 設置默認圖片   * @param defaultIcon   */  public void setDefaultIcon(Drawable defaultIcon){    this.mDefaultIcon = defaultIcon;  }  /**   * 設置已完成圖片   * @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;  }  /**   * 設置正在進行中的圖片   * @param attentionIcon   */  public void setAttentionIcon(Drawable attentionIcon){    this.mAttentionIcon = attentionIcon;  }  /**   * 設置對view監聽   */  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);//定義默認未完成文字的顏色;  private int mComplectedTextColor = ContextCompat.getColor(getContext(), R.color.completed_color);//定義默認完成文字的顏色;  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);  }  /**   * 設置顯示的文字   * @param stepsBeanList   * @return   */  public HorizontalStepView setStepViewTexts(List<StepBean> stepsBeanList) {    mStepBeanList = stepsBeanList;    mStepsViewIndicator.setStepNum(mStepBeanList);    return this;  }  /**   * 設置未完成文字的顏色   * @param unComplectedTextColor   * @return   */  public HorizontalStepView setStepViewUnComplectedTextColor(int unComplectedTextColor) {    mUnComplectedTextColor = unComplectedTextColor;    return this;  }  /**   * 設置完成文字的顏色   * @param complectedTextColor   * @return   */  public HorizontalStepView setStepViewComplectedTextColor(int complectedTextColor) {    this.mComplectedTextColor = complectedTextColor;    return this;  }  /**   * 設置StepsViewIndicator未完成線的顏色   * @param unCompletedLineColor   * @return   */  public HorizontalStepView setStepsViewIndicatorUnCompletedLineColor(int unCompletedLineColor) {    mStepsViewIndicator.setUnCompletedLineColor(unCompletedLineColor);    return this;  }  /**   * 設置StepsViewIndicator完成線的顏色   * @param completedLineColor   * @return   */  public HorizontalStepView setStepsViewIndicatorCompletedLineColor(int completedLineColor) {    mStepsViewIndicator.setCompletedLineColor(completedLineColor);    return this;  }  /**   * 設置StepsViewIndicator默認圖片   * @param defaultIcon   */  public HorizontalStepView setStepsViewIndicatorDefaultIcon(Drawable defaultIcon) {    mStepsViewIndicator.setDefaultIcon(defaultIcon);    return this;  }  /**   * 設置StepsViewIndicator已完成圖片   * @param completeIcon   */  public HorizontalStepView setStepsViewIndicatorCompleteIcon(Drawable completeIcon) {    mStepsViewIndicator.setCompleteIcon(completeIcon);    return this;  }  /**   * 設置StepsViewIndicator正在進行中的圖片   * @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("手機綁定",1);                stepBean1 = new StepBean("實名認證",0);                stepBean2 = new StepBean("學時充值",-1);                stepBean3 = new StepBean("開始用車",3);                break;              case 2:                stepBean0 = new StepBean("手機綁定",1);                stepBean1 = new StepBean("實名認證",1);                stepBean2 = new StepBean("學時充值",0);                stepBean3 = new StepBean("開始用車",3);                break;              case 3:                stepBean0 = new StepBean("手機綁定",1);                stepBean1 = new StepBean("實名認證",1);                stepBean2 = new StepBean("學時充值",1);                stepBean3 = new StepBean("開始用車",2);                break;            }            stepsBeanList.add(stepBean0);            stepsBeanList.add(stepBean1);            stepsBeanList.add(stepBean2);            stepsBeanList.add(stepBean3);          mHorizontalStepView.setStepViewTexts(stepsBeanList);