自定义View实战：汽车速度仪表盘

 

是不是很酷炫?

 

看起来觉得有点复杂？  其实不难 ， 实现起来很容易。绘制逻辑如下：

 

1. 绘制一个实心的圆做仪表盘背景：

mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(0xFF343434);
canvas.drawCircle(pointX, pointY, raduis, mPaint);

2. 绘制外面的两个圆环 和 里面的 两个圆环：

//外圈2个圆
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(0xBF3F6AB5);
mPaint.setStrokeWidth(4 * mDensityDpi);
canvas.drawCircle(pointX, pointY, raduis, mPaint);
mPaint.setStrokeWidth(3 * mDensityDpi);
canvas.drawCircle(pointX, pointY, raduis - 10 * mDensityDpi, mPaint);
//内圈2个圆
mPaint.setStrokeWidth(5 * mDensityDpi);
mPaint.setColor(0xE73F51B5);
canvas.drawCircle(pointX, pointY, raduis / 2, mPaint);
mPaint.setColor(0x7E3F51B5);
canvas.drawCircle(pointX, pointY, raduis / 2 + 5 * mDensityDpi, mPaint);
mPaint.setStrokeWidth(3 * mDensityDpi);

3. 绘制仪表盘的刻度：

/**
 * 绘制刻度
 */
private void drawScale(Canvas canvas) {
    for (int i = 0; i < 60; i++) {
        if (i % 6 == 0) {
            canvas.drawLine(pointX - raduis + 10 * mDensityDpi, pointY, pointX - raduis + 50 * mDensityDpi, pointY, mPaint);
        } else {
            canvas.drawLine(pointX - raduis + 10 * mDensityDpi, pointY, pointX - raduis + 30 * mDensityDpi, pointY, mPaint);
        }
        canvas.rotate(6, pointX, pointY);
    }
}

4. 绘制 “仪表盘的速度标识 、中间的速度与单位”文字：

/**
 * 绘制速度标识文字
 */
private void drawText(Canvas canvas, int value) {
    String TEXT = String.valueOf(value);
    switch (value) {
        case 0:
            // 计算Baseline绘制的起点X轴坐标
            baseX = (int) (pointX - sRaduis * Math.cos(Math.PI / 5) + textPaint.measureText(TEXT) / 2 + textScale / 2);
            // 计算Baseline绘制的Y坐标
            baseY = (int) (pointY + sRaduis * Math.sin(Math.PI / 5) + textScale / 2);
            break;
        case 30:
            baseX = (int) (pointX - raduis + 50 + textPaint.measureText(TEXT) / 2);
            baseY = (int) (pointY + textScale);
            break;
        case 60:
            baseX = (int) (pointX - sRaduis * Math.cos(Math.PI / 5) + textScale);
            baseY = (int) (pointY - sRaduis * Math.sin(Math.PI / 5) + textScale * 2);
            break;
        case 90:
            baseX = (int) (pointX - sRaduis * Math.cos(2 * Math.PI / 5) - textScale / 2);
            baseY = (int) (pointY - sRaduis * Math.sin(2 * Math.PI / 5) + 2 * textScale);
            break;
        case 120:
            baseX = (int) (pointX + sRaduis * Math.sin(Math.PI / 10) - textPaint.measureText(TEXT) / 2);
            baseY = (int) (pointY - sRaduis * Math.cos(Math.PI / 10) + 2 * textScale);
            break;
        case 150:
            baseX = (int) (pointX + sRaduis * Math.cos(Math.PI / 5) - textPaint.measureText(TEXT) - textScale / 2);
            baseY = (int) (pointY - sRaduis * Math.sin(Math.PI / 5) + textScale * 2);
            break;
        case 180:
            baseX = (int) (pointX + sRaduis - textPaint.measureText(TEXT) - textScale / 2);
            baseY = (int) (pointY + textScale);
            break;
        case 210:
            baseX = (int) (pointX + sRaduis * Math.cos(Math.PI / 5) - textPaint.measureText(TEXT) - textScale / 2);
            baseY = (int) (pointY + sRaduis * Math.sin(Math.PI / 5) - textScale / 2);
            break;
        }
    canvas.drawText(TEXT, baseX, baseY, textPaint);
}
    
/**
 * 绘制中间内容
 */
private void drawCenter(Canvas canvas) {
    //速度
    textPaint.setTextSize(60);
    float tw = textPaint.measureText(String.valueOf(speed));
    baseX = (int) (pointX - tw / 2);
    baseY = (int) (pointY + Math.abs(textPaint.descent() + textPaint.ascent()) / 4);
    canvas.drawText(String.valueOf(speed), baseX, baseY, textPaint);
    //单位
    textPaint.setTextSize(20);
    tw = textPaint.measureText("km/h");
    baseX = (int) (pointX - tw / 2);
    baseY = (int) (pointY + raduis / 4 + Math.abs(textPaint.descent() + textPaint.ascent()) / 4);
    canvas.drawText("km/h", baseX, baseY, textPaint);
}

5. 绘制速度范围的扇形区域：

/**
 * 绘制速度区域扇形
 */
private void drawSpeedArea(Canvas canvas) {
    int degree;
    if (speed < 210) {
        degree = speed * 36 / 30;
    } else {
        degree = 210 * 36 / 30;
    }
    canvas.drawArc(speedRectF, 144, degree, true, speedAreaPaint);
    //不显示中间的内圈的扇形区域
    mPaint.setColor(0xFF343434);
    mPaint.setStyle(Paint.Style.FILL);
    canvas.drawArc(speedRectFInner, 144, degree, true, mPaint);
    mPaint.setStyle(Paint.Style.STROKE);
}

6. 实现点击让 速度动起来。实现runnable 接口：

@Override
public void run() {
    int speedChange;
    while (start) {
        switch (type) {
            case 1://油门
                speedChange = 3;
                break;
            case 2://刹车
                speedChange = -5;
                break;
            case 3://手刹
                speed = 0;
            default:
                speedChange = -1;
                break;
        }
        speed += speedChange;
        if (speed < 1) {
            speed = 0;
        }
        try {
            Thread.sleep(50);
            setSpeed(speed);
        } catch (InterruptedException e) {
            e.printStackTrace();
            break;
        }
    }
}

7. 在activity中启动线程，设置监听：

//设置监听
speedUp.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //按下的时候加速
                speedControlView.setType(1);
                break;
            case MotionEvent.ACTION_UP:
                //松开做自然减速
                speedControlView.setType(0);
                break;
        }
        return true;
    }
});

speedDown.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //按下的时候减速
                speedControlView.setType(2);
                break;
            case MotionEvent.ACTION_UP:
                //松开做自然减速
                speedControlView.setType(0);
                break;
        }
        return true;
    }
});

shutDown.setOnTouchListener(new View.OnTouchListener() {
    @Override    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //按下的时候拉手刹
                speedControlView.setType(3);
                break;
            case MotionEvent.ACTION_UP:
                //松开做自然减速
                speedControlView.setType(0);
                break;
            }
        return true;
    }
});

@Override
protected void onResume() {
    super.onResume();
    if (speedControlView != null) {
        speedControlView.setSpeed(0);
        speedControlView.setStart(true);
    }
    new Thread(speedControlView).start();
}

搞定！看，是不是很简单。

转载于:https://my.oschina.net/JiangTun/blog/915294