这次来弄的是自定义view的滑动进度条,继承于AppCompatSeekBar的基础上进行二次开发。先看效果图
test.gif
做到以上的效果图,就可以知道,两个模式,1:就是常用的seekbar模式,然后只不过安装自己的要求改了下滑动块而已,不多说,2:就是带有刻度点的seekbar模式,并且带有粘性数值处理,实现滑到刻度周边滑块自动吸引过去的效果。
重点说下第二种模式的,拆分下工作点:因为继承的是SeekBar,所以线和滑块我们就不用再处理了,只需要通过代码块去控制线的颜色和滑动块的背景就OK,还有就是根据数值在线上绘制相应的点。说白了就是重要点。
首先,定义相应的自定义属性,额,没办法,上头要求,所以规范点
新建一个bar_attrs.xml文件
然后就是代码中取得相应的属性值和设置默认值
TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.SegmentBar);
maxLength = typedArray.getInteger(R.styleable.SegmentBar_max_length,100);
node = typedArray.getInteger(R.styleable.SegmentBar_node,0);
blockBg = typedArray.getResourceId(R.styleable.SegmentBar_block_bg,R.drawable.bar_back);
spotColor = typedArray.getResourceId(R.styleable.SegmentBar_spot_color,R.color.bar_point);
type = typedArray.getInteger(R.styleable.SegmentBar_bar_type,0);
lineColor = typedArray.getResourceId(R.styleable.SegmentBar_line_color,R.color.bar_line);
lineBg = typedArray.getResourceId(R.styleable.SegmentBar_line_bg,R.color.bar_line_bg);
checkItem = typedArray.getInteger(R.styleable.SegmentBar_check_item,1);
spotSize = typedArray.getInteger(R.styleable.SegmentBar_spot_size,15);
lineColor = ContextCompat.getColor(getContext(),lineColor);
lineBg = ContextCompat.getColor(getContext(),lineBg);
spotColor = ContextCompat.getColor(getContext(),spotColor);
typedArray.recycle();
initColor();
然后修改seekbar的线的颜色和滑动块的属性,通过代码定义一个Drawable属性来进行处理
public void initColor(){
this.setMax(maxLength);
this.setProgressDrawable(ContextCompat.getDrawable(getContext(),
R.drawable.bar_background));
/*Drawable thumbDraw = zoomDrawable(),2,2);*/
this.setThumb(ContextCompat.getDrawable(getContext(),
blockBg));
Rect bounds = this.getProgressDrawable().getBounds();
Drawable[] drawables = new Drawable[3];
drawables[0] = new PaintDrawable(lineBg);
drawables[2] = new ClipDrawable(new PaintDrawable(lineColor),Gravity.LEFT,ClipDrawable.HORIZONTAL);
drawables[1] = new ClipDrawable(new PaintDrawable(lineBg),Gravity.LEFT,ClipDrawable.HORIZONTAL);
LayerDrawable layerDrawable1 = new LayerDrawable(drawables);
this.setProgressDrawable(layerDrawable1);
this.getProgressDrawable().setBounds(bounds);
if (type == DEFAULT){
this.setProgress(getProgress()-1);
this.setProgress(getProgress());
}else {
int tmp = maxLength / (node+1);
int pro = checkItem * tmp;
if (checkItem == 0){
this.setProgress(1);
this.setProgress(0);
}else if (checkItem == node){
this.setProgress(maxLength-1);
this.setProgress(maxLength);
}else {
this.setProgress(pro-1);
this.setProgress(pro);
}
}
invalidate();
}
然后就是在onDraw里面绘制点
绘制点之前,需要获取几个数据点,1、seekbar的线的x,y轴,和点的xy轴。
线xy轴可以就是view的高度的对半点就是y轴的点,x轴的起始点一般就是0和view的宽度
至于点的话,可以通过线的长度/点的数量(得到平均刻度值)然后乘以相应的点的位置数量值就是得到了各个点的相应的x轴坐标,拿到了相应的xy轴,就可以绘制相应的点了
/**
* 在刻度模式下,进行绘制刻度点
* @param canvas
*/
@Override
protecte