Android实现自定义进度条拖动条

在使用Sdk的ProgressBar 和SeekBar的时候总是又各种各样的限制，我们为例使用更加的方便所以一般使用自定义View去画一个自己的Progressbar和SeekBar。
一样看一下最终实现的效果图

5s_seek.gif

最上面是系统自带了下面四个两个可以拖动的SeekBar 两个Progressbar

实现前分析

1.公共的部分
（1）一些公共的参数如字体大小渐变色（开始，中间，结束），文字大小等。
（2）同样的绘制流程初始化绘制参数→绘制背景→绘制彩色进度条
2.不同的部分
（1）绘制的时候有圆和条形（应有子类实现）
（2）绘制的时候是都有圆点和是否能够拖动（远点和拖动应该由可以拖动的条目带你都处理）
然后根据分析大致的画出类图

image.png

类图解释
（1）commonParams ... 所有的公共参数
（2）initParams() 初始化公共参数并完成赋值
（3）initPaint() 初始化Paint
（4）onSizeChanged() 继承View 复写父类的方法
（4）onDraw() 继承View 复写父类的方法
（5）initWidthAndHeight()在onSizeChanged()里面调用，由子类实现，在可以获取到当前宽高的情况下初始化数值
（6）drawBg() 绘背景由子类实现会中线条还是圆
（7）drawProgress() 绘制进度条由子类实现是彩色的圆还是彩色条
（8）drawCircle() 绘制圆点在SeekBar中实现ProgressBar中不实现
（9）onTouchEvent() 处理拖动问题只在SeekBar中实现
（10）performClick() 实现这个是为了防止onTouchEvent与onClick()之间的冲突

具体实现

BaseBar.java

public abstract class BaseBar extends View {
    //画背景的Paint
    public Paint mBgPaint;
    //画进度条的Paint
    public Paint mProgressPaint;
    //进度条高度
    public int mHeight ;
    //开始位置
    public int mStart;
    //结束位置
    public int mEnd;
    //渐变颜色 三个
    public int mStartColor;
    public int mEndColor;
    public int mCenterColor;
    //背景颜色
    public int mBgColor;
    //拖动小圆点颜色
    public int mCircleColor;
    //当前进度
    public float mProgress;
    //小圆点半径
    public int mRadius;
    //文字颜色
    public int mTextColor;
    //文字大小
    public float mTextSize;
    //显示文字的Rect
    public Rect mTxtRec;
    //最里面白色圆的半径
    public int mMinRadio;
    //线中心距离上方距离
    public int mTop;
    //文字距离线的距离
    public int mTextTop;
    //进度条改变回调
    public ProgressChange progressChange;

    public BaseBar(Context context) {
        this(context, null);
    }

    public BaseBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public BaseBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initParams(context,attrs,defStyleAttr);
        initPaint();
    }
    private void initPaint() {
        mBgPaint = new Paint();
        mBgPaint.setAntiAlias(true);
        mBgPaint.setTextSize(mTextSize);
        mBgPaint.setStrokeCap(Paint.Cap.ROUND);
        mBgPaint.setStrokeWidth((float) mHeight);
        mProgressPaint = new Paint();
        mProgressPaint.setAntiAlias(true);
        mProgressPaint.setStrokeCap(Paint.Cap.ROUND);
        mProgressPaint.setStrokeWidth((float) mHeight);
    }


    /***
     * 初始化公共参数
     */
    public void initParams(Context context, AttributeSet attrs, int defStyleAttr) {
        TypedArray seekArray = context.obtainStyledAttributes(attrs, R.styleable.BaseBar, defStyleAttr, 0);
        mStartColor = seekArray.getColor(R.styleable.BaseBar_startColor, ContextCompat.getColor(context, R.color.startColor));
        mCenterColor = seekArray.getColor(R.styleable.BaseBar_centerColor, ContextCompat.getColor(context, R.color.centerColor));
        mEndColor = seekArray.getColor(R.styleable.BaseBar_endColor, ContextCompat.getColor(context, R.color.endColor));
        mBgColor = seekArray.getColor(R.styleable.BaseBar_bgColor, ContextCompat.getColor(context, R.color.bgColor));
        mTextColor = seekArray.getColor(R.styleable.BaseBar_textColor, ContextCompat.getColor(context, R.color.bgColor));
        mCircleColor = seekArray.getColor(R.styleable.BaseBar_circleColor, ContextCompat.getColor(context, R.color.circleColor));
        mTextSize = seekArray.getDimension(R.styleable.BaseBar_textSize, dp2px(15));
        mHeight = (int)seekArray.getDimension(R.styleable.BaseBar_height,dp2px(10));
        mRadius = (int)seekArray.getDimension(R.styleable.BaseBar_radius,dp2px(8));
        mMinRadio = (int)seekArray.getDimension(R.styleable.BaseBar_minRadio,dp2px(40));
        mTop = (int)seekArray.getDimension(R.styleable.BaseBar_top,dp2px(15));
        mTextTop = (int)seekArray.getDimension(R.styleable.BaseBar_textTop,dp2px(8));
        mTxtRec = new Rect();
        seekArray.recycle();
    }
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //初始化高和宽
        initWidthAndHeight(w,h);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawBg(canvas);
        drawMyText(canvas);
        drawProgress(canvas);
        drawCircle(canvas);
    }

    /**
     * 根据初始的高度和宽度设置一些信息
     */
    protected abstract void initWidthAndHeight(int w, int h);
    /**
     * 绘制进度条背景
     */
    protected abstract void drawBg(Canvas canvas);

    /**
     * 绘制显示百分比的文字
     */
    protected abstract void drawMyText(Canvas canvas);

    /**
     * 绘制进度条
     */
    protected abstract void drawProgress(Canvas canvas);

    /**
     * 绘制可以拖动的按钮
     */
    protected abstract void drawCircle(Canvas canvas);



    public interface ProgressChange {
        void onProgressChange(float progress);
    }

    public void setProgress(float mProgress) {
        this.mProgress = mProgress;
        invalidate();
    }

    public void setProgressChange(ProgressChange progressChange) {
        this.progressChange = progressChange;
    }

在这里面定义了
（1）实现的模板
（2）可以自定义设置的参数
（3）SeekBar 拖动的回调接口
CircleProgressBar.java

public class ColorProgressBar extends BaseBar {

    public int proEnd;

    private LinearGradient mLinearGradient;

    public ColorProgressBar(Context context) {
        super(context);
    }

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

    public ColorProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }



    @Override
    protected void initWidthAndHeight(int w, int h) {
        mStart = getPaddingLeft();
        mEnd = getMeasuredWidth() - getPaddingRight();
        mLinearGradient = new LinearGradient(0, 0, w, 0
                , new int[]{mStartColor, mCenterColor, mEndColor}
                , new float[]{0, .5f, 1F}
                , Shader.TileMode.CLAMP);
    }


    @Override
    public void drawCircle(Canvas canvas) {

    }

    @Override
    public void drawBg(Canvas canvas) {
        mBgPaint.setColor(mBgColor);
        canvas.drawLine(mStart, mTop, mEnd, mTop, mBgPaint);
    }

    @Override
    public void drawProgress(Canvas canvas) {
        mProgressPaint.setShader(mLinearGradient);
        proEnd = (int) ((mProgress) * (mEnd - mStart)) + mStart;
        canvas.drawLine(mStart, mTop, proEnd, mTop, mProgressPaint);
    }

    @Override
    public void drawMyText(Canvas canvas) {
        String text = (int) (mProgress * 100) + "%";
        mBgPaint.getTextBounds(text, 0, text.length(), mTxtRec);
        mBgPaint.setColor(mTextColor);
        canvas.drawText(text, (float) (mStart + mEnd - mTxtRec.width()) / 2, (float) (mTop + mHeight / 2 + mTxtRec.height() + mTextTop), mBgPaint);
    }

在实现了
（1）绘制圆环背景 drawBg()
（2）根据mProgress计算角度绘制彩色圆环drawProgress()
（3）计算文字中心显示位置并并显示百分比
CircleSeekBar.java

public class CircleSeekBar extends CircleProgressBar {

    public CircleSeekBar(Context context) {
        super(context);
    }

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

    public CircleSeekBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //初始化高和宽
        initWidthAndHeight(w, h);
    }

    @Override
    public void drawCircle(Canvas canvas) {
        int centerX = (int) (mCenterX + (mMinRadio + mRadius / 2) * Math.cos(mSweepAngle * Math.PI / 180));
        int centerY = (int) (mCenterY + (mMinRadio + mRadius / 2) * Math.sin(mSweepAngle * Math.PI / 180));
        mBgPaint.setColor(mCircleColor);
        canvas.drawCircle(centerX, centerY, mRadius, mBgPaint);
    }

    @Override
    public boolean performClick() {
        return super.performClick();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                mProgress = getProgress(event) / 360;
                mRadius *= 1.5;
                invalidate();
                break;
            case MotionEvent.ACTION_MOVE:
                mProgress = getProgress(event) / 360;
                if (progressChange != null) {
                    progressChange.onProgressChange(mProgress);
                }
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                getRootView().performClick();
                mRadius /= 1.5;
                invalidate();
                break;
        }
        return true;
    }

    /***
     * 计算移动角度
     */
    private float getProgress(MotionEvent event) {
        float x = event.getX() - mCenterX;
        float y = event.getY() - mCenterY;
        if (x > 0 && y > 0) {
            return (float) Math.toDegrees(Math.atan(y / x));
        } else if (x < 0 && y > 0) {
            return 180 + (float) Math.toDegrees(Math.atan(y / x));
        } else if (x < 0 && y < 0) {
            return 180 + (float) Math.toDegrees(Math.atan(y / x));
        } else {
            return 360 + (float) Math.toDegrees(Math.atan(y / x));
        }
    }

}

这个类实在 CircleProgressBar的基础上写的了
在CircleProgressBar中我们已经完成的基本的绘制
我们只需要在这里
（1）处理绘制圆点以及拖动圆点的变化
（2）拖动时候本身变化的计算

在书写自定义View需要注意的两个警告

1.实现onTouchEven() 可能会导致事件拦截而无法处理onClick()事件所以在只实现onTouchEven()时候会出现一个警告

image.png

所以需要重写 performClick()并在onTouchEven中完成调用就没有警告了
2.在自定义View 每次invalidate的时候都会调用onDraw() 方法所以onDraw()是在自定义View中一个频繁调用的方法我们如果在里面新建对象就会提示下面这个警告

image.png

所以应该避免在onDraw中新建对象新建对象放在初始化的时候，如果需要宽和高可以放在 onSizeChanged()里面

github 地址：https://github.com/525642022/MyCustomSeekBar