android 带刻度的滑动条_Android实现底部带刻度的进度条样式

由于公司需要一个带刻度的进度条样式，网上找了一圈，有些是加个刻度的背景图片，这样对于我的项目来说，不合适，因为刻度需要动态去改变，所以换背景图片的方案肯定是不行的，唯一的办法就是自己绘制一个进度条，进度条的绘制相对来说是比较简单的。我自己对自定义控件这一块也不是很了解，全当学习一下吧，写这篇博客也是记录一下，如果有人也有这样样式的进度条需求，也可以直接拿过去用，比较自己也用过很多大神的东西。

开始就先上图吧

样式就是上图这样了，由于是通过canvas绘制的，所以想要的样式都可以自己去绘制，我这边就搞一个简单的就行了。

首先得继承View，由于这个控件比较简单，我就没有搞那种在布局文件中设值的属性了，继承之后第一步，需要测量布局，得到画布的大小，这个值其实就是我们在布局文件中设置的控件的宽高。

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

int realWidth = startMeasure(widthMeasureSpec);

int realHeight = startMeasure(heightMeasureSpec);

setMeasuredDimension(realWidth, realHeight);

}

private int startMeasure(int msSpec) {

int result = 0;

int mode = MeasureSpec.getMode(msSpec);

int size = MeasureSpec.getSize(msSpec);

if (mode == MeasureSpec.EXACTLY) {

result = size;

} else {

result = PxUtils.dpToPx(400, mContext);

}

return result;

}

这边拿到画布的大小，设置进度条显示的宽度，我这边设置的为画布宽度的80%

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

mWidth = getWidth();

mHight = getHeight();

progressWidth = mWidth*0.8f;

}

然后就是初始化画笔了，具体我就不多赘述了，我使用了五个画笔，分别是进度条背景底框，进度，刻度绘制，刻度下的字，当前数值的文字具体看代码。

private void initPaint() {

//画进度条静态空心背景

paintProgressBackground = new Paint();

paintProgressBackground.setAntiAlias(true);

paintProgressBackground.setStyle(Paint.Style.STROKE);

paintProgressBackground.setColor(getResources().getColor(R.color.progressborder));

paintProgressBackground.setDither(true);

//画进度的画笔，实心

paintProgress = new Paint();

paintProgress.setAntiAlias(true);

paintProgress.setStyle(Paint.Style.FILL);

paintProgress.setColor(getResources().getColor(R.color.progressfill));

paintProgress.setDither(true);

//画刻度的画笔

paintNum = new Paint();

paintNum.setAntiAlias(true);

paintNum.setColor(getResources().getColor(R.color.progresstext));

paintNum.setStrokeWidth(2);

paintNum.setStyle(Paint.Style.FILL);

paintNum.setDither(true);

//画刻度数值的画笔

paintTikeStr = new Paint();

paintTikeStr.setAntiAlias(true);

paintTikeStr.setStyle(Paint.Style.FILL);

paintTikeStr.setTextAlign(Paint.Align.LEFT);

pai