一个仪表盘自定义控件

 最近开发中设计给出了一个类似于仪表盘的控件，虽然可以用多张图代替，但是还是写了一个类似的自定义控件，成果如下图：

1、首先把原点设置在圆心

//把方框平移到正中间 canvas.translate(dx, dy); canvas.save(); canvasR = Math.min(getWidth(), getHeight()) / 2; markWidth = canvasR / 20; tableWidth = canvasR / 10; mPaint.setStyle(Paint.Style.STROKE);

2、从外围开始描绘控件

//填写文字刻度 mPaint.setTextSize(outTextSize); int count = 0; while (count < mMaxCount) { //填写外围文字 Rect bounds = new Rect(); String text = 100 / (mMaxCount - 1) * count + ""; mPaint.getTextBounds(text, 0, text.length(), bounds); float offSet = (bounds.bottom - bounds.top); //角度 float angle = startAngle + sweepAngle / (mMaxCount - 1) * count; textWidth = offSet + 3;//3间距显得好看点 //半径 float r = canvasR - textWidth; canvas.rotate(90 + angle, getmX(r, angle), getmY(r, angle)); canvas.drawText(text, getmX(r, angle), getmY(r, angle), mPaint); canvas.rotate(-90 - angle, getmX(r, angle), getmY(r, angle)); //填写大刻度 canvas.drawLine(getmX(r - 3, angle), getmY(r - 3, angle), getmX(r - markWidth, angle), getmY(r - markWidth, angle), mPaint); int count0 = 1; //填写小刻度 while (count > 0 && count0 < mMinCount) { //角度 float angle0 = angle - sweepAngle / (mMaxCount - 1) + sweepAngle / (mMaxCount - 1) * count0 / mMinCount; canvas.drawLine(getmX(r - markWidth / 2, angle0), getmY(r - markWidth / 2, angle0), getmX(r - markWidth, angle0), getmY(r - markWidth, angle0), mPaint); count0++; } count++; } //刻度下面弧线 float markR = canvasR - textWidth - markWidth; RectF markRectf = new RectF(-markR, -markR, markR, markR); mPaint.setStyle(Paint.Style.STROKE); canvas.drawArc(markRectf, startAngle, sweepAngle, false, mPaint); float tableR = markR - canvasR / 40 - tableWidth / 2; RectF mTableRectF = new RectF(-tableR, -tableR, tableR, tableR); //进度条底部 Path tablePath = new Path(); tablePath.addArc(mTableRectF, startAngle - 90, sweepAngle); //计算路径的长度 PathMeasure pathMeasure = new PathMeasure(tablePath, false); float length = pathMeasure.getLength(); float step = length / 21; DashPathEffect dashPathEffect = new DashPathEffect(new float[]{step * 9 / 10, step / 10}, 0); mPaint.setPathEffect(dashPathEffect); mPaint.setStrokeWidth(tableWidth); canvas.rotate(90); canvas.drawPath(tablePath, mPaint); canvas.rotate(-90); //进度条 Path progressPath = new Path(); progressPath.addArc(mTableRectF, startAngle - 90, sweepAngle * progress / 100); SweepGradient mColorShader = new SweepGradient(0, 0, SWEEP_GRADIENT_COLORS, null); mPaint.setShader(mColorShader); canvas.rotate(90); canvas.drawPath(progressPath, mPaint); canvas.rotate(-90); //画带阴影的圆 float circleR = tableR - canvasR / 40 - tableWidth / 2; initPaint(); canvas.drawCircle(-canvasR / 160, canvasR / 160, circleR, mPaint); mPaint.setColor(Color.WHITE); canvas.drawCircle(0, 0, circleR, mPaint); mPaint.setColor(Color.parseColor("#cccccc")); mPaint.setStyle(Paint.Style.STROKE); canvas.drawCircle(0, 0, circleR, mPaint); //画内圆 mPaint.setStyle(Paint.Style.FILL); mPaint.setColor(Color.parseColor("#fafafa")); canvas.drawCircle(0, 0, circleR * 2 / 5, mPaint); mPaint.setStyle(Paint.Style.STROKE); mPaint.setColor(Color.parseColor("#dddddd")); canvas.drawCircle(0, 0, circleR * 2 / 5, mPaint); //画进度小圆点 mPaint.setColor(Color.parseColor("#FF6610")); mPaint.setStyle(Paint.Style.FILL); canvas.drawCircle(getmX(circleR - canvasR / 20, startAngle + sweepAngle * progress / 100) , getmY(circleR - canvasR / 20, startAngle + sweepAngle * progress / 100), canvasR / 40, mPaint); //画中间字符 Rect bounds = new Rect(); String text = progress + "%"; mPaint.setTextSize(proTextSize); mPaint.getTextBounds(text, 0, text.length(), bounds); float offSet = (bounds.bottom - bounds.top); Rect bounds2 = new Rect(); String text2 = decText; mPaint.setTextSize(decTextSize); mPaint.setColor(Color.parseColor("#cccccc")); mPaint.getTextBounds(text, 0, text.length(), bounds2); float offSet2 = (bounds2.bottom - bounds2.top); canvas.drawText(text2, 0, (offSet2 + offSet + 3) / 2, mPaint); mPaint.setColor(Color.parseColor("#FF6610")); mPaint.setTextSize(proTextSize); canvas.drawText(text, 0, (offSet2 + offSet + 3) / 2 - offSet2 - 3, mPaint);

求x，y坐标方法

private float getmX(float r, float angle) { return (float) Math.cos(angle * Math.PI / 180) * r; } private float getmY(float r, float angle) { return (float) Math.sin(angle * Math.PI / 180) * r; }

源码：https://download.csdn.net/download/qq_40667603/11945307