Android自定义View之仪表盘

一.先上图

image.png

二.思路

总体分三步走
1.画圆弧
2.画刻度
3.画指针

三.细节

第一.画圆弧，这里使用了canvas.drawArc()的Api，参数1为圆弧所在的矩形区域或者是左上右下四点的坐标，参数2为起始角度值，参数3为圆弧所扫过的角度值，参数5是个画笔，参数4,useCenter的官方注释为:If true, include the center of the oval in the arc, and close it if it is being stroked. This will draw a wedge,我们此处用了false，如果改为true，那么画出来的会是这样的效果：

image.png

第二.画刻度，这里使用了给paint.setPathEffect(new PathDashPathEffect())这个Api，可以实现paint的虚线效果:
参数1是对应的path，也就是我们的圆弧，参数2是刻度之间的距离，参数3是第一个刻度距起点的距离，参数4是顺时针/逆时针等绘画规则
public PathDashPathEffect(Path shape, float advance, float phase,
Style style) {
}
这里需要注意的有2点:
1.圆弧总长度的计算，使用了PathMeasure.getLength(path)这个api，它可以准确结算出传入的path的长度
2.作为参数传入PathDashPathEffect中的path，则同样需要传入一个矩形区域来规定刻度的绘画位置，由于每一个刻度都是垂直于改点的切线，所以，若顺时针绘画刻度，则刻度的左上都应该是0，0，右是线的宽度，下是线的长度，具体图示如下:

image.png

刻度的绘画同样可以使用canvas的rotate配合save，restore来实现
第三.画指针

指针的绘画主要注意以表盘中心为参考的0，0点，然后指定指针长度后，通过sin和cos计算指针终点的x,y坐标，
这里要提一句的就是:
钝角的cos与其补角的cos互为相反数,钝角的sin与其补角sin相等

四,整个代码如下：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathDashPathEffect;
import android.graphics.PathMeasure;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
 * 仪表盘
 */
public class DashBoard extends View {
    private static final int ANGLE_BOTTOM = 120;
    private static final int RADIUS = (int) Utils.dp2px(120);
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    RectF rectF;
    private Path dashPath = new Path();
    private PathDashPathEffect pathEffect;
    private static final int NEEDLE_LENGTH = (int) Utils.dp2px(100);

    public DashBoard(Context context) {
        this(context, null);
    }

    public DashBoard(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public DashBoard(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(Utils.dp2px(2));

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        rectF = new RectF();
        rectF.set(getWidth() / 2 - RADIUS, getHeight() / 2 - RADIUS, getWidth() / 2 + RADIUS, getHeight() / 2 + RADIUS);

        PathMeasure pathMeasure = new PathMeasure();
        Path lengthPath = new Path();
        lengthPath.addArc(rectF, 90 + ANGLE_BOTTOM / 2, 360 - ANGLE_BOTTOM);
        pathMeasure.setPath(lengthPath, false);
        float length = pathMeasure.getLength();
        dashPath.addRect(0, 0, Utils.dp2px(2), Utils.dp2px(15), Path.Direction.CW);
        //这里的间距(advance)的计算需要注意2点
        //1.需要减去一个分割线的宽度，以免刻度画到圆弧的外面
        //2.由于dash是重新画的，与之前的圆弧无关，所以这里只需要减去一个分割线的宽度即可，而不是减去分割线的count*宽度的总和
        pathEffect = new PathDashPathEffect(dashPath, (length - Utils.dp2px(2)) / 20, 0, PathDashPathEffect.Style.ROTATE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //第一步，先画圆弧
        canvas.drawArc(rectF, 90 + ANGLE_BOTTOM / 2, 360 - ANGLE_BOTTOM, true, paint);
        //第二步，画圆弧上面的刻度
        //设置画笔为虚线模式
        paint.setPathEffect(pathEffect);
        canvas.drawArc(rectF, 90 + ANGLE_BOTTOM / 2, 360 - ANGLE_BOTTOM, false, paint);
        paint.setPathEffect(null);
        //第三步，画指针
        paint.setColor(Color.BLACK);
        canvas.drawPoint(getWidth() / 2, getHeight() / 2, paint);
        float angle = getAngle(currentIndex);
        double radians = Math.toRadians(angle);
        //钝角的cos与其补角的cos互为相反数
        float stopX = (float) (getWidth() / 2 - (NEEDLE_LENGTH * -Math.cos(radians)));
        //钝角的sin与其补角sin相等
        float stopY = (float) (getHeight() / 2 + NEEDLE_LENGTH * Math.sin(radians));
        canvas.drawLine(getWidth() / 2, getHeight() / 2, stopX, stopY, paint);
    }

    float getAngle(int index) {
        float v = (360 - ANGLE_BOTTOM) / 20 * index;
        return (90 + (float) ANGLE_BOTTOM / 2 + v);
    }

    private int currentIndex = 0;

    /**
     * 实现指针自动走的功能
     *
     * @param index
     */
    public void setAngleIndex(int index) {
        this.currentIndex = index;
        invalidate();
    }
}