自定义ScaleSeekBar

android系统提供的原生seekbar使用起来并不是那么好，例如可拖拽区域很小、没有刻度。
最近项目里面设计提供了的设计图就有一个seekbar，seekbar上有刻度，当手指移动到刻度附近时，刻度条就会移动到指定的刻度附近。，同时，会有一个回调通知进度的改变。
接到这个需求后，在github上找了一圈，发现现有的seekbar提供的功能太多，与需求不符合，故自己写了一个。

实现的效果图如下。

screenshot.png

项目地址：scaleseekbar

首先看在布局文件里面怎么使用：

由于进度条需要一定的宽度来展示，在这里直接写死了高度和padding值，实际可以在自定义view里面做特殊处理。

init()函数 初始化

//定义画笔
 mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintWidth = Util.dipToPixel(2);
        mPaint.setStrokeWidth(mPaintWidth);
       // 左右边距
        mSpace = Util.dipToPixel(12);
        //一共画5个点
        mPointNum = 5;
       //获得小圆的半径
        mSmallCircleRadius = Util.dipToPixel(4);
       //获得当前指示条的内半径（比较明显的颜色）
        mBigCircleInnerRadius = Util.dipToPixel(8);
         //获得当前指示条的外半径（比较淡的颜色）
        mBigCircleOuterRadius = Util.dipToPixel(10);
        //因为要预留空位给外圈的大圆
        mPaddingTop = getPaddingTop() + mBigCircleOuterRadius;

定义了上述属性后，接着需要获得各个点的坐标。我们在OnMeasure后获取控件的宽高，同时确定各个点的位置。

super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //控件宽度
        mWidth = getMeasuredWidth();
        //去除左右边距后留给seekbar的绘制区间
        mLength = mWidth - mSpace * 2;// 
        mSegmentLength = mLength / (mPointNum - 1);// 5个点分割成4段 每段的长度
        mEndPoint = mSpace + (mSegmentLength * (mPointNum - 1));//终止点的位置.

提供接口给外部调用设置当前的进度条。（总进度为5， 这里progress的取值为0~4,这里可以假设默认值为2）

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

获取完每个点的坐标位置、线段的起止值，圆的半径以及当前的进度后，我们就可以在ondraw()里面进行绘制了。

super.onDraw(canvas);
        this.mPaint.setColor(this.mColors[1]);
       //根据线段起止点绘制一条线
        canvas.drawLine(this.mSpace, this.mSpace + this.mPaddingTop, this.mEndPoint, this.mSpace + this.mPaddingTop, this.mPaint);// 整体绘制一条灰色线贯穿整体
        this.mPaint.setColor(this.mColors[0]);
        //在起始点话了一个小圆。
        canvas.drawCircle(this.mSpace, this.mSpace + this.mPaddingTop, mSmallCircleRadius, this.mPaint);//画了一个小圆环
        //根据mNewProgress的值确定当前的进度条所在的终点，绘制一条从起点到进度终点的线
        canvas.drawLine(this.mSpace, this.mSpace + this.mPaddingTop, this.mSpace + this.mSegmentLength * this.mNewProgress, this.mSpace + this.mPaddingTop, this.mPaint); // 根据进度条画了新的颜色线
        int index = 1;
        //根据mNowProgress的值，小于mNowProgress的值绘制蓝色圆圈，大于mNowProgress的绘制灰色圆圈。
        if (index < this.mPointNum) {
            for (; index < this.mPointNum; index++) {
                if (this.mNewProgress > index) {
                    this.mPaint.setColor(this.mColors[0]);
                } else {
                    this.mPaint.setColor(this.mColors[1]);
                }
                canvas.drawCircle(this.mSpace + index * mSegmentLength, this.mSpace + this.mPaddingTop, mSmallCircleRadius, this.mPaint);//每个位置画一个小圆 颜色不一样
            }

        }
        this.mPaint.setColor(this.mCircleColor[1]);
       //在mNewProgress的地方绘制一个颜色比较浅的大圆，再绘制一个颜色比较深的大圆  
        canvas.drawCircle(this.mSpace + this.mSegmentLength * this.mNewProgress, this.mSpace + this.mPaddingTop, this.mBigCircleOuterRadius, this.mPaint);
        this.mPaint.setColor(this.mCircleColor[0]);
        canvas.drawCircle(this.mSpace + this.mSegmentLength * this.mNewProgress, this.mSpace + this.mPaddingTop, this.mBigCircleInnerRadius, this.mPaint);
      //通过这样的方式，所有我们需要绘制的内容已经绘制完毕

前面已经做到了根据当前进度分别绘制不同的内容到canvas上。
接下来需要响应用户的滑动手势，根据手势滑动的地方判断当前进度值。

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);
        int x = (int) event.getX();
        //滑动事件开始的时候，传递x的坐标值，后面的notifydatachanged方法根据该值判断是否滑动到了临界点，如果到了，给外部的监听事件发通知。
        notifyDataChanged(x);
        return true;

    }
   
    //这里根据x值判断当前滑动到了哪个点，更新mNewProgress的值,同时通知view进行重绘（这里应该保留以前的值，避免每次都重绘）
    private void notifyDataChanged(int x) {
        this.mNewProgress = (this.mSegmentLength / 3 + x - mSpace) / this.mSegmentLength;
        if ((this.mListener != null)) {
            this.mListener.notifyProgressChanged(this.mNewProgress);
        }
        invalidate();
    }

public interface ProgressListener {
        void notifyProgressChanged(int progress);
    }

这里就将seekbar的坐标点确定、进度条绘制、响应touch事件完成，并完成了事件改变的通知。