Android 自定义控件之仪表盘

核心代码

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //圆心坐标
    centerX = getPivotX();
    centerY = getPivotY();
    //半径
    radius = getWidth() > getHeight() ? (float) getHeight() / 2 - 8 : (float) getWidth() / 2 - 8;
    //绘制圆
    paint.setColor(Color.BLACK);
    paint.setStyle(Paint.Style.STROKE);//画笔属性是空心圆
    paint.setStrokeWidth(4);//设置画笔粗细
    canvas.drawCircle(centerX, centerY, radius, paint);
    //绘制中心黑点
    paint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(centerX, centerY, radius / 20, paint);//绘制中心点
    //绘制盘表上的字体
    paint.setTextSize(48);
    paint.setStrokeWidth(1);//设置画笔粗细
    canvas.drawText(text, centerX - (float) getTextWidth(paint, text) / 2, centerY + radius / 5, paint);

    //绘制刻度线
    for (int i = 0; i <= 100; i++) {
        //刻度3.3度,+90是要从第三象限开始画
        startC = (float) 3.3 * i + 90;
        //判断角的大小处于第几象限
        int sth = 1;
        if (startC % 360 > 180 && startC % 360 < 360) {
            sth = -1;
        }
        //终点坐标
        float lineToX = (float) (centerX + Math.cos(Math.toRadians(-startC)) * (radius - radius / 20));//利用数学cos求x坐标
        float lineToY = (float) (centerY + sth * Math.abs(Math.sin(Math.toRadians(-startC))) * (radius - radius / 20));//sin函数求y坐标
        //开始坐标
        float startX;
        float startY;
        if (i % 10 == 0) {
            startX = lineToX - (float) (Math.cos(Math.toRadians(-startC)) * (radius / 4));
            startY = lineToY - (float) (sth * Math.abs(Math.sin(Math.toRadians(-startC))) * (radius / 4));
            //绘制刻度线上的字体
            paint.setTextSize(32);
            paint.setStrokeWidth(1);//设置画笔粗细
            //刻度线上的字体坐标
            float textX = lineToX - (float) (Math.cos(Math.toRadians(-startC)) * (radius / 3));//设置字体的位置
            float textY = lineToY - (float) (sth * Math.abs(Math.sin(Math.toRadians(-startC))) * (radius / 3));//设置字体的位置
            canvas.drawText(String.valueOf(i), textX - radius / 20, textY + radius / 20, paint);
        } else {
            startX = lineToX - (float) (Math.cos(Math.toRadians(-startC)) * (radius / 5));
            startY = lineToY - (float) (sth * Math.abs(Math.sin(Math.toRadians(-startC))) * (radius / 5));
        }
        //红色区域
        if (i == 90) {
            initRectF();
            paint.setStyle(Paint.Style.STROKE);//画笔属性是空心圆
            paint.setColor(Color.RED);
            paint.setStrokeWidth(radius / 5);
            canvas.drawArc(rectF, startC, 33, false, paint);
        }
        //绘制刻度
        paint.setStyle(Paint.Style.FILL);//画笔实心
        paint.setColor(Color.BLACK);
        paint.setStrokeWidth(4);//设置画笔粗细
        canvas.drawLine(startX, startY, lineToX, lineToY, paint);

    }

    //绘制指针
    paint.setColor(Color.BLACK);
   /* canvas.restore();
    canvas.save();
    canvas.translate(canvas.getWidth()/2, r);*/
    //根据参数得到旋转角度
    canvas.rotate(changeRadius, centerX, centerY);
    //绘制三角形形成指针
    Path path = new Path();
    path.moveTo(centerX - radius / 40, centerY);
    path.lineTo(centerX + radius / 40, centerY);
    path.lineTo(centerX, centerY + radius / 4 * 3);
    path.lineTo(centerX - radius / 40, centerY);
    path.close();
    canvas.drawPath(path, paint);
}

 

指针摆动动画

public void setRadius(float radius) {
    this.oldRadius = this.per;
    this.per = radius * (float) 3.3;
    ValueAnimator va = ValueAnimator.ofFloat(oldRadius, per);
    va.setDuration(1000);
    va.setInterpolator(new OvershootInterpolator());
    va.addUpdateListener(animation -> {
        changeRadius = (float) animation.getAnimatedValue();
        invalidate();
    });
    va.start();
}

效果图