Android 双刻度仪表盘

1、需求

这次要实现一个显示温湿度的view.开始打算用两个仪表盘来显示.原因是这个已经有很多轮子了(偷懒ing)。后来一想，已经有那么多轮子了，还是自己写一个吧，顺便复习一下自定义view的相关用法。

2、效果

最后实现的效果就是这个样子了。

3、实现前的分析和思路

想要用同一个控件同事显示两个进度值，这里用指针就指向数值就不太合适了，还是用两个嵌套在一起的仪表盘比较好。那么要先做什么，再做什么呢？我从两个仪表盘开始，从仪表盘向两边辐射去画图。

• 1、画内部温度的仪表盘；
• 2、画温度里边的刻度数值；
• 3、画外部湿度的仪表盘；
• 4、这里要在湿度仪表盘的左右两边画一个小圆，这样边上才不会是平的；
• 5、画仪表盘上的小圆形代表当前值
• 6、画湿度仪表盘外边的刻度值
• 7、画底部的描述
  思路分析到这里，然后去动手一步一步实现吧。

4、实现

4.1 提前装备

这里初始化一些变量，以及画笔颜色等等

**
     * 控件宽
     */
    private int mWidth;
    /**
     * 控件高
     */
    private int mHeight;
    private String mTempTitle = "温度(℃)";
    private String mHumTitle = "湿度(%)";
    /**
     * 刻度高 短针
     */
    private int mScaleHeight = dp2px(10);
    /**
     * 刻度高 长针
     */
    private int mScaleHeight1 = dp2px(15);
    /**
     * 刻度盘/
     */
    private Paint mDialPaint;
    /**
     * 文本画笔
     */
    private Paint mTitlePaint;
    /**
     * 画湿度圆环的画笔
     */
    private Paint mHumCirclePaint;
    /**
     * 当前湿度值的小圆点
     */
    private Paint mHumValueCirclePaint;
    /**
     * 湿度圆环左边和右边的小圆点画笔
     */
    private Paint mHumLeftCirclePaint;
    private Paint mHumRightCirclePaint;

    /**
     * 当前温度
     */
    private int mTemperature = 15;
    //
    /**
     * 最低温度
     */
    private int mMinTemp = -30;
    /**
     * 最高温度
     */
    private int mMaxTemp = 50;
    /**
     * 当前湿度
     */
    private int mHumidity = 100;
    /**
     * 最低湿度
     */
    private int mMinHum = 0;
    /**
     * 最高湿度
     */
    private int mMaxHum = 100;
    /**
     * 温度每份的角度
     */
    private float mAngleOneTem = (float) 270 / (mMaxTemp - mMinTemp);
    /**
     * 湿度每份的角度
     */
    private float mAngleOneHum = (float) 270 / (mMaxHum - mMinHum);

    /**
     * 温度，刻度的半径
     */
    private int mTemDialRadius;
    /**
     * 湿度，内圈半径
     */
    private int mHumInSideRadius;
    /**
     * 湿度，圆环宽度
     */
    private int mHumCriWidth = dp2px(15);

    /**
     * 刻度和文字颜色
     */
    private String mTextColor = "#666666";
    /**
     * 未达到的温度
     */
    private String mDialBackGroundColor = "#666666";
    /**
     * 已经达到的温度
     */
    private String mDialForegroundColor = "#1FC8A2";
    /**
     * 湿度圆环背景色
     */
    private String mHumCriBackground = "#666666";
    /**
     * 湿度圆环前景色
     */
    private String mHumCriForeground = "#1FC8A2";
    /**
     * 当前湿度的小圆点颜色
     */
    private String mHumCriValue = "#eeeeee";
    /**
     * 当前湿度的小圆点的背景色
     */
    private String mHumCriValueBackGround = "#30333333";

    ......


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // 控件宽、高
        mWidth = mHeight = Math.min(h, w);
        // 温度，刻度的半径
        mTemDialRadius = mWidth / 2 - dp2px(70);
        // 湿度，内圈半径=刻度的内圈+最长刻度+15像素
        mHumInSideRadius = mTemDialRadius + mScaleHeight1 + dp2px(15);
    }

   ......

4.2 要去画了

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //画温度刻度盘和内的刻度
        drawTempDial(canvas);
        //画湿度圆弧
        drawHumArc(canvas);
        //画左边和左边的小圆点
        drwaHumArcLeftAndRight(canvas);
        //当前湿度值
        drawHumValueArc(canvas);
        //湿度外边的刻度
        drawHumText(canvas);
        //画温湿度标题文字
        drawTemText(canvas);
    }

4.3 画温度刻度盘和圈内文字

这里去遍历一次就好了，有些人先遍历去画底部的背景，然后又遍历画前景，又遍历一次画刻度。这就造成了资源的浪费。

   /**
     * 画温度刻度 和温度内圈文字
     */
    private void drawTempDial(Canvas canvas) {
        canvas.save();
        canvas.translate(getWidth() / 2, getHeight() / 2);
        // 顺时针旋转135度
        canvas.rotate(-135);
        for (int i = mMinTemp; i <= mMaxTemp; i++) {
            if (i <= mTemperature) {
                mDialPaint.setColor(Color.parseColor(mDialForegroundColor));
            } else {
                mDialPaint.setColor(Color.parseColor(mDialBackGroundColor));
            }
            if (i % 5 == 0) {
                //从刻度的内圈开始，往外画
                canvas.drawLine(0, -mTemDialRadius, 0, -mTemDialRadius - mScaleHeight1, mDialPaint);
                if (i % 10 == 0) {
                    float tempWidth = mDialPaint.measureText(i + "");
                    canvas.drawText(i + "", 0 - tempWidth / 2, -mTemDialRadius + dp2px(20), mTitlePaint);
                }
            } else {
                canvas.drawLine(0, -mTemDialRadius, 0, -mTemDialRadius - mScaleHeight, mDialPaint);
            }
            canvas.rotate(mAngleOneTem);
        }
        canvas.restore();
    }

4.4 画外围湿度，代表当前值的小圆点

这里呢，想去画一个阴影的背景，半径比前边的大一点点，然后在画一个前边的小白圆圈。这样有一点小阴影更漂亮。

    /**
     * 画当前湿度值的小圆点
     */
    private void drawHumValueArc(Canvas canvas) {
        canvas.save();
        canvas.translate(getWidth() / 2, getHeight() / 2);
        //旋转到0，再旋转到当前湿度值
        canvas.rotate(-135 + mAngleOneHum * mHumidity);
        //画背景
        mHumValueCirclePaint.setColor(Color.parseColor(mHumCriValueBackGround));
        canvas.drawCircle(0, -mHumInSideRadius, (mHumCriWidth + dp2px(10)) / 2, mHumValueCirclePaint);
        //画前景
        mHumValueCirclePaint.setColor(Color.parseColor(mHumCriValue));
        canvas.drawCircle(0, -mHumInSideRadius, (mHumCriWidth + dp2px(7)) / 2, mHumValueCirclePaint);
        canvas.restore();
    }

4.5 画外围湿度，左边和右边的小圆点

先看看没有小圆点的效果

这样两边是平的，没有突出的效果，比较丑。在两边都画一个和圆环宽度一样宽的小圆圈，就有了突出的效果了。

    /**
     * 左边右边分别画一个小圆点
     *
     * @param canvas
     */
    private void drwaHumArcLeftAndRight(Canvas canvas) {
        canvas.save();
        canvas.translate(getWidth() / 2, getHeight() / 2);
        //旋转到0
        canvas.rotate(-135);
        canvas.drawCircle(0, -mHumInSideRadius, mHumCriWidth / 2, mHumLeftCirclePaint);
        canvas.rotate(270);
        canvas.drawCircle(0, -mHumInSideRadius, mHumCriWidth / 2, mHumRightCirclePaint);
        canvas.restore();
    }

后边的方法就不一一罗列出来了，可以去看一下源码。
传送门