Android 仿摩拜单车共享单车进度条实现StepView效果

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,defStylE);
    init();
  }
  private void init(){
    mStepBeanList = new ArrayList<>();
    mPath = new Path();
    mEffects = new DashPathEffect(new float[]{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();
  }
}