android 仿摩拜单车共享单车进度条实现StepView，androidstepview

android 仿摩拜单车共享单车进度条实现StepView，androidstepview

转载请注明出处：http://www.cnblogs.com/Joanna-Yan/p/6552712.html 

先看效果图：

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, 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);<