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

概述先看效果图：Step1:定义StepBean定义五个状态，分别为：为完成、正在进行、已完成、终点完成、终点未完成。

先看效果图：

Step1:定义StepBean

定义五个状态，分别为：为完成、正在进行、已完成、终点完成、终点未完成。

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;  }}

Step2:自定义HorizontalStepsVIEwIndicator

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();  }}

Step3:自定义HorizontalStepVIEw

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,0);  }  public HorizontalStepVIEw(Context context,int defStyleAttr){    super(context,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);        }      }    }  }}

Step4:如何使用?

在布局文件xml中：

<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"          />

在Activity中的使用，部分代码截取：

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);                stepBean2 = new StepBean("学时充值",0);                stepBean3 = new StepBean("开始用车",3);                break;              case 3:                stepBean0 = new StepBean("手机绑定",1);                stepBean3 = new StepBean("开始用车",2);                break;            }            stepsBeanList.add(stepBean0);            stepsBeanList.add(stepBean1);            stepsBeanList.add(stepBean2);            stepsBeanList.add(stepBean3);          mHorizontalStepVIEw.setStepVIEwTexts(stepsBeanList);

以上所述是小编给大家介绍的AndroID 仿摩拜单车共享单车进度条实现StepVIEw效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程小技巧网站的支持！

总结

以上是内存溢出为你收集整理的Android 仿摩拜单车共享单车进度条实现StepView效果全部内容，希望文章能够帮你解决Android 仿摩拜单车共享单车进度条实现StepView效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。