由于公司需要一个带刻度的进度条样式、网上找了一圈,有些是加个刻度的背景图片,这样对于我的项目来说,不合适,因为刻度需要动态去改变,所以换背景图片的方案肯定是不行的,唯一的办法就是自己绘制一个进度条,进度条的绘制相对来说是比较简单的。我自己对自定义控件这一块也不是很了解,全当学习一下吧,写这篇博客也是记录一下,如果有人也有这样样式的进度条需求,也可以直接拿过去用,比较自己也用过很多大神的东西。
,,,,开始就先上图吧
样式就是上图这样了,由于是通过帆布绘制的,所以想要的样式都可以自己去绘制,我这边就搞一个简单的就行了。
首先得继承视图,由于这个控件比较简单,我就没有搞那种在布局文件中设值的属性了,继承之后第一步,需要测量布的局,得到画布的大小,这个值其实就是我们在布局文件中设置的控件的宽高只,
@Override
保护空白>
@Override
保护空白>
私人空间initPaint () {//画进度条静态空心背景
paintProgressBackground=new油漆();
paintProgressBackground.setAntiAlias(真正的);
paintProgressBackground.setStyle (Paint.Style.STROKE);
paintProgressBackground.setColor (getresource () .getColor (R.color.progressborder));
paintProgressBackground.setDither(真正的);//画进度的画笔,实心
paintProgress=new油漆();
paintProgress.setAntiAlias(真正的);
paintProgress.setStyle (Paint.Style.FILL);
paintProgress.setColor (getresource () .getColor (R.color.progressfill));
paintProgress.setDither(真正的);//画刻度的画笔
paintNum=new油漆();
paintNum.setAntiAlias(真正的);
paintNum.setColor (getresource () .getColor (R.color.progresstext));
paintNum.setStrokeWidth (2);
paintNum.setStyle (Paint.Style.FILL);
paintNum.setDither(真正的);//画刻度数值的画笔
paintTikeStr=new油漆();
paintTikeStr.setAntiAlias(真正的);
paintTikeStr.setStyle (Paint.Style.FILL);
paintTikeStr.setTextAlign (Paint.Align.LEFT);
paintTikeStr.setColor (getresource () .getColor (R.color.progresstext));
paintTikeStr.setTextSize (16);//画数值的画笔
paintText=new油漆();
paintText.setAntiAlias(真正的);
paintText.setColor (getresource () .getColor (R.color.progresstext));
paintText.setStrokeWidth (1);
paintText.setStyle (Paint.Style.FILL);//实心画笔
paintText.setDither(真正的);
}
接下来就是onDraw方法进行绘制了,用帆布绘制,绘制的起点是你画布的左上角,横向为x,纵向为y,所以绘制的时候只要确定好x, y的坐标,那就好画了。
@Override
保护空白>/* *
*绘制刻度和刻度下的数字
* @param帆布
* @param百分比
*/私人空间drawScale(帆布画布,浮动百分比){
浮动跨度=progressWidth/8 f;
for (int i=0; i<9;我+ +){
canvas.save ();//记录画布状态
画布。翻译(跨度*我+ leftPadding, 0);
numY canvas.drawLine (0, 0, numY + 10, paintNum);
字符串文字=String.valueOf (tikeStrArray[我]);
油漆。FontMetricsInt fontMetrics=paintTikeStr.getFontMetricsInt ();
浮动基准=((numY + 20) + (fontMetrics。底- fontMetrics.top)/2);
画布。drawText(文本、-getTextViewLength (paintTikeStr、文本)/2,基线,paintTikeStr);
canvas.restore ();
}
}
跟其他进度条不同的是,带刻度的最重要是怎么绘制刻度了,我这边默认总共9个刻度,可以自行修改,怎么画出刻度线,重要的就是通过画布的平移,翻译来实现,x为每次绘制的位置,画一条就会平移一段距离再画一条,原理就是这样.numY的参数其实就是与画布顶点的距离,由于我的进度条设置的是30的高度,刻度要紧挨着进度底部,所以开始画的y坐标也是30 + 10是绘制刻度线的长度,所以刻度线长度就是10。刻度下的文字,也是获取文字的宽度,取中心位置。
私人浮动getTextViewLength(油漆涂料,字符串文本){
如果(TextUtils.isEmpty(文本))返回0;
浮动textLength=paint.measureText(文本);
返回textLength;
}
接下来就是绘制右边显示当前数组的文字了,只要确定好位置,就很简单了。
*绘制显示的数的值
* @param帆布
* @param百分比
*/私人空间drawText(帆布画布,浮动百分比){
如果(TextUtils.isEmpty(单位))返回;
浮动长度;
paintText.setTextSize (16);
数值=StringUtil。floatFormat (startNum + (maxNum - startNum) *百分比)+单位;
长度=paintText.measureText(数值);
画布。drawText(数值、progressWidth + leftPadding + textSpan,长度/2,paintText);
}
