自定义一个进度跟随滑块一起滑动的progress进度条

/**
 * @author XC
 * @version 5
 * @date 2017/10/17 14:43
 * @describe 进度和滑块一起滑动的ProgressView
 */
public class CustomProgressView extends View {

    private int mWidth, mHeight;// 整个的宽和高
    private int mProgressHeight;// 进度条的相对高度
    private float mProgressRealHeight = UiUtils.dip2px(5);//进度条真实高度
    private int mRadius = UiUtils.dip2px(3);// 进度条圆角半径
    private float mDragClickPaintRadius;// 拖动点半径
    private float mStartY = UiUtils.dip2px(3);//给拖动条突出部分预留空间
    private int progress;//进度值
    private float mBgProgressWidth, mAboveProgressWidth;// 背景、进度条宽度（长度）
    private Paint mBackgroundPaint, mAbovePaint, mDragClickPaint;// 背景画笔，上层画笔、拖动点

    private boolean isRoundRect = true;// 是否是圆角矩形

    private float mMaxValue = 100;//最大值

    public int getProgress() {
        return this.progress;
    }

    public void setProgress(int mValue) {
        this.progress = mValue;
        invalidate();
    }

    public float getmProgressRealHeight() {
        return mProgressRealHeight;
    }

    public void setmProgressRealHeight(float mProgressRealHeight) {
        this.mProgressRealHeight = mProgressRealHeight;
        invalidate();
    }

    public boolean isRoundRect() {
        return isRoundRect;
    }

    public void setRoundRect(boolean isRoundRect) {
        this.isRoundRect = isRoundRect;
        invalidate();
    }

    public float getmMaxValue() {
        return mMaxValue;
    }

    public void setmMaxValue(float mMaxValue) {
        this.mMaxValue = mMaxValue;
        invalidate();
    }

    public CustomProgressView(Context context) {
        super(context);
        init();
    }

    public CustomProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CustomProgressView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    /**
     * 初始化
     */
    private void init() {
        //背景空心圆角矩形
        mBackgroundPaint = new Paint();
        mBackgroundPaint.setColor(getResources().getColor(R.color.btn_blue_normal));
        mBackgroundPaint.setStyle(Paint.Style.STROKE);
        mBackgroundPaint.setStrokeWidth(1);
        mBackgroundPaint.setAntiAlias(true);// 抗锯齿效果

        //进度条
        mAbovePaint = new Paint();
        mAbovePaint.setColor(getResources().getColor(R.color.btn_blue_normal));
        mAbovePaint.setTextSize(UiUtils.dip2px(10));
        mAbovePaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mAbovePaint.setAntiAlias(true);// 抗锯齿效果

        //滑块
        mDragClickPaint = new Paint();
        mDragClickPaint.setColor(getResources().getColor(R.color.btn_blue_normal));
        mDragClickPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mDragClickPaint.setAntiAlias(true);// 抗锯齿效果

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        mWidth = w;
        mHeight = h;
        mBgProgressWidth = mWidth;
        mProgressHeight = (int) (mProgressRealHeight + mStartY);
        mDragClickPaintRadius = (float) (mProgressRealHeight / 2 + UiUtils.dip2px(2));
        mAboveProgressWidth = mWidth * (progress / mMaxValue);
        super.onSizeChanged(w, h, oldw, oldh);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // 绘制三个矩形
        drawRect(canvas, mBackgroundPaint, 0, mStartY, mBgProgressWidth, mProgressHeight);
        drawRect(canvas, mAbovePaint, 0, mStartY, mAboveProgressWidth, mProgressHeight);
        // 绘制拖动点
        drawDragClick(canvas);
        // 绘制滚动数字
        drawChangeValue(canvas);
        super.onDraw(canvas);
    }

    /**
     * 绘制滚动数字
     *
     * @param canvas
     */
    private void drawChangeValue(Canvas canvas) {
        String text = String.valueOf(progress) + "%";
        float textWidth = mAbovePaint.measureText(text);
        if (progress == 0) {
            canvas.drawText(text, 0,
                    mProgressHeight + mDragClickPaintRadius + UiUtils.dip2px(10), mAbovePaint);
        } else if (progress == 100) {
            canvas.drawText(text, mWidth - textWidth,
                    mProgressHeight + mDragClickPaintRadius + UiUtils.dip2px(10), mAbovePaint);
        } else {
            canvas.drawText(text, mAboveProgressWidth - textWidth / 2,
                    mProgressHeight + mDragClickPaintRadius + UiUtils.dip2px(10), mAbovePaint);
        }
    }

    /**
     * 绘制拖动点
     *
     * @param canvas
     */
    private void drawDragClick(Canvas canvas) {
        RectF oval2;
        if (progress == 0) {
            oval2 = new RectF(0, mStartY + mProgressRealHeight / 2 - mDragClickPaintRadius,
                    mDragClickPaintRadius * 2, mStartY + mProgressRealHeight / 2 + mDragClickPaintRadius);
        } else if (progress == 100) {
            oval2 = new RectF(mAboveProgressWidth - mDragClickPaintRadius * 2, mStartY + mProgressRealHeight / 2 - mDragClickPaintRadius,
                    mAboveProgressWidth, mStartY + mProgressRealHeight / 2 + mDragClickPaintRadius);
        } else {
            oval2 = new RectF(mAboveProgressWidth - mDragClickPaintRadius, mStartY + mProgressRealHeight / 2 - mDragClickPaintRadius,
                    mAboveProgressWidth + mDragClickPaintRadius, mStartY + mProgressRealHeight / 2 + mDragClickPaintRadius);
        }
        canvas.drawOval(oval2, mDragClickPaint);
    }

    /**
     * 绘制矩形
     *
     * @param canvas
     * @param paint
     * @param left   左
     * @param top    上
     * @param right  右
     * @param bottom 下
     */
    private void drawRect(Canvas canvas, Paint paint, float left, float top, float right, float bottom) {
        RectF rectF = new RectF(left, top, right, bottom);
        if (isRoundRect) {
            canvas.drawRoundRect(rectF, mRadius, mRadius, paint);
        } else {
            canvas.drawRect(rectF, paint);
        }
    }
}