android系统提供的原生seekbar使用起来并不是那么好，例如可拖拽区域很小、没有刻度。
最近项目里面设计提供了的设计图就有一个seekbar，seekbar上有刻度，当手指移动到刻度附近时，刻度条就会移动到指定的刻度附近。，同时，会有一个回调通知进度的改变。
接到这个需求后，在github上找了一圈，发现现有的seekbar提供的功能太多，与需求不符合，故自己写了一个。
screenshot.png
项目地址：scaleseekbar
首先看在布局文件里面怎么使用：
<com.cheng.scaleseekbar.ScaleSeekBar
android:layout_width="match_parent"
android:layout_height="40dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:id="@+id/seek_bar"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
app:layout_constraintTop_toBottomOf="@+id/text"
tools:layout_editor_absoluteX="8dp"/>
由于进度条需要一定的宽度来展示，在这里直接写死了高度和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事件完成，并完成了事件改变的通知。
网友评论