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 画外围湿度,左边和右边的小圆点

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

    /**
     * 左边右边分别画一个小圆点
     *
     * @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();
    }

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android仪表盘控件是一种常用于显示和控制数据的UI元素。它可以在移动设备的屏幕上呈现出类似于汽车仪表盘的视图,用于展示各种指标、数据和信息。Android提供了多种方式来实现仪表盘控件,开发者可以根据需求选择合适的控件来构建自定义的仪表盘。 常见的Android仪表盘控件包括进度条、圆形进度条等。进度条可用于表示某项任务的进度,用户可以通过触摸或拖动进度条来控制任务的进行。圆形进度条则更加直观地展示了进度的百分比,适用于较为复杂的进度控制场景。 仪表盘控件还可以用于显示各种指标和数据,比如速度、温度、电量等。开发者可以根据具体需求绘制仪表盘刻度、指针和标签,通过改变刻度和指针的位置来展示相应的数值。这些仪表盘控件可以帮助用户更直观地了解数据的变化,提供更好的用户交互体验。 除了上述基本功能,Android仪表盘控件还可以通过添加动画效果和自定义样式来提升用户体验。开发者可以为仪表盘控件添加缓慢的指针移动效果或渐变的色彩变化,增加仪表盘的视觉吸引力。同时,也可以根据应用的需求自定义仪表盘的外观,使其更加符合应用的整体风格。 总之,Android仪表盘控件是一种非常有用和常见的UI元素,可以用于展示和控制各种指标、数据和信息。开发者可以根据具体需求选择适合的控件,并通过添加动画和自定义样式来提升用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值