一个双曲线实时温度界面的自定义View

2024-02-09 20:38
文章标签 自定义 界面 实时 view 温度 双曲线

本文主要是介绍一个双曲线实时温度界面的自定义View，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.功能说明

曲线1为实际温度，曲线2为预测温度，实现2条曲线同时绘制

1.1 下载

https://github.com/sufadi/CustomTemperatureUI

Eclipse开发环境

apk 在CustomTemperatureUI\bin\CustomTemperatureUI.apk

1.2 博客

https://blog.csdn.net/su749520

或者本文

1.3 UI 效果

这里写图片描述

2. 自定义View的实现介绍

1.1 简单介绍

继承View并重写onDraw实现坐标轴和曲线的绘制

package com.su.custom.temperature.view;public class CurveChartView extends View {@Overrideprotected void onDraw(Canvas canvas) {
1.2 标题的绘制

这里主要获取文本的宽度和高度，进行drawText的居中置顶显示

    private void drawTitle(Canvas canvas, Paint paint) {String result = "温度变化与预测";float width = paint.measureText(result);FontMetrics fontMetrics = paint.getFontMetrics();float top = Math.abs(fontMetrics.top);canvas.drawText(result, (this.getWidth() - width) / 2, top, paint);}
1.3 实时数据的绘制

通过获取文本的宽度，实现文本drawText的右边对齐和完整显示

    private void drawCurrentData(Canvas canvas, Paint paint) {String result = String.format("当前值: %.1f °C %d s后：%.1f °C", realValue, stepValue, predictValue);float width = paint.measureText(result);canvas.drawText(result, this.getWidth() - (width + 20), yPoint - (Y_SIZE) * yScale, paint);}
1.4 坐标轴绘制

这里主要绘制X和Y的轴边和对应的箭头

    /*** 绘制坐标轴*/private void drawAxesLine(Canvas canvas, Paint paint) {// X 的坐标轴边canvas.drawLine(xPoint, yPoint, this.getWidth() - margin / 6, yPoint, paint);// X 的箭头canvas.drawLine(this.getWidth() - margin / 6, yPoint, this.getWidth() - margin / 2, yPoint - margin / 3, paint);canvas.drawLine(this.getWidth() - margin / 6, yPoint, this.getWidth() - margin / 2, yPoint + margin / 3, paint);// Y 的坐标轴边canvas.drawLine(xPoint, yPoint, xPoint, margin / 6, paint);// Y 的箭头canvas.drawLine(xPoint, margin / 6, xPoint - margin / 3, margin / 2, paint);canvas.drawLine(xPoint, margin / 6, xPoint + margin / 3, margin / 2, paint);}
1.5 绘制网格线

按客户要求定制显示网格线，即形成x,y的网格线

    /*** 绘制表格*/private void drawTable(Canvas canvas, Paint paint) {Path path = new Path();// 横向线for (int i = 0; (yPoint - i * yScale) >= margin; i++) {switch (i + Y_START) {case 19:case 24:case 29:case 34:case 39:case 44:case 49:case 54:case 59:int startX = xPoint;int startY = yPoint - i * yScale;int stopX = xPoint + (xLabel.length - 1) * xScale;path.moveTo(startX, startY);path.lineTo(stopX, startY);canvas.drawPath(path, paint);break;default:break;}}// 纵向线if (showXTable) {for (int i = 1; i * xScale <= (this.getWidth() - margin); i++) {int startX = xPoint + i * xScale;int startY = yPoint;int stopY = yPoint - (yLabel.length - 1) * yScale;path.moveTo(startX, startY);path.lineTo(startX, stopY);canvas.drawPath(path, paint);}}}
1.6 坐标轴添加文本标签

根据上面的绘制网格线进行刻度划分，并客制化显示内容

    /*** 绘制刻度*/private void drawCoordinate(Canvas canvas, Paint paint) {// X轴坐标for (int i = 0; i <= (xLabel.length - 1); i++) {paint.setTextAlign(Paint.Align.CENTER);int startX = xPoint + i * xScale;canvas.drawText(xLabel[i], startX, this.getHeight() - margin / 6, paint);}// Y轴坐标for (int i = 0; i <= (yLabel.length - 1); i++) {paint.setTextAlign(Paint.Align.LEFT);int startY = yPoint - i * yScale;int offsetX;switch (yLabel[i].length()) {case 1:offsetX = 28;break;case 2:offsetX = 20;break;case 3:offsetX = 12;break;case 4:offsetX = 5;break;default:offsetX = 0;break;}int offsetY;if (i == 0) {offsetY = 0;} else {offsetY = margin / 5;}// x默认是字符串的左边在屏幕的位置，y默认是字符串是字符串的baseline在屏幕上的位置canvas.drawText(yLabel[i], margin / 4 + offsetX, startY + offsetY, paint);}}
1.7 绘制曲线

主要通过path.moveTo和path.lineTo进行坐标位置的控制，最后canvas.drawPath实现曲线的绘制

    /*** 绘制曲线*/private void drawCurve(Canvas canvas, Paint paint, List<Float> data, int color) {paint.setColor(mContext.getResources().getColor(color));paint.setAntiAlias(true);// 抗锯齿Path path = new Path();boolean isFist = true;float lastX = 0f;float lastY = 0f;for (int i = 0; i < data.size(); i++) {float y = toY(data.get(i));float x = xPoint + i * xScale;if (y == Y_START) {// do nothing} else {if (isFist) {path.moveTo(x, y);Log.d(TAG, "moveTo x = " + x + ", y = " + y);isFist = false;} else {path.lineTo(x, y);Log.d(TAG, "lineTo x = " + x + ", y = " + y);}lastX = x;lastY = y;}}if (lastX != 0f && lastY != 0f) {canvas.drawCircle(lastX, lastY, 2, paint);}canvas.drawPath(path, paint);}

3. 调用实现

3.1 添加一条曲线

由于要让数据实现实时更新效果，且realDataSource数据如果与容器大小相等，则舍去最早数据，新增最新数据，达到数据的实时更新

但是客户要求坐标的起点是不是坐标轴原点，故需要realDatas进行坐标位置的偏移转换

private void addRealDataLine() {Log.d(TAG, "X_START = " + CurveChartView.X_START);int size = realDataSource.size();float value = getRandomValue();if (size > CurveChartView.X_START) {realDataSource.remove(0);}realDataSource.add(value);int j = 0;for (int i = realDataSource.size() - 1; i >= 0; i--) {int index = CurveChartView.X_START - j;j++;realDatas.set(index, realDataSource.get(i));Log.d(TAG, "realDatas:" + i + ", index = " + index + ", value = " + realDataSource.get(i));}curver_chart_view.updateReal(value);curver_chart_view.updateRealData(realDatas);}
3.2 清除所有数据
    private void clearData() {reset();curver_chart_view.clearData();}private void reset() {if (realDataSource != null) {realDataSource.clear();}if (realDatas != null) {realDatas.clear();}for (int i = 0; i < CurveChartView.X_SIZE; i++) {realDatas.add((float) CurveChartView.Y_START);}if (predictDatasSource != null) {predictDatasSource.clear();}if (predictDatas != null) {predictDatas.clear();}for (int i = 0; i < CurveChartView.X_SIZE; i++) {predictDatas.add((float) CurveChartView.Y_START);}}

4. 项目结语

本项目主要参考
https://blog.csdn.net/carson_ho/article/details/62037696

最开始是使用MPandchart的开源库实现曲线列表，但是发现很多客制化需求很难修改，做完这个小demo，深刻发觉，开源库是拿来参考的，如果是自己的产品尽量使用自己封装的方法和自定义，这样修改起来得心应手。

这篇关于一个双曲线实时温度界面的自定义View的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/695234。

相关文章

Spring Security自定义身份认证的实现方法

Spring Security自定义身份认证的实现方法

《SpringSecurity自定义身份认证的实现方法》：本文主要介绍SpringSecurity自定义身份认证的实现方法,下面对SpringSecurity的这三种自定义身份认证进行详细讲解,... 目录1.内存身份认证（1）创建配置类（2）验证内存身份认证2.JDBC身份认证（1）数据准备 （2）配置依
阅读更多...
使用Sentinel自定义返回和实现区分来源方式

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》：本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定
阅读更多...
如何自定义Nginx JSON日志格式配置

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志？配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各
阅读更多...
Android自定义Scrollbar的两种实现方式

Android自定义Scrollbar的两种实现方式

《Android自定义Scrollbar的两种实现方式》本文介绍两种实现自定义滚动条的方法,分别通过ItemDecoration方案和独立View方案实现滚动条定制化,文章通过代码示例讲解的非常详细,... 目录方案一：ItemDecoration实现（推荐用于RecyclerView）实现原理完整代码实现
阅读更多...
基于Spring实现自定义错误信息返回详解

基于Spring实现自定义错误信息返回详解

《基于Spring实现自定义错误信息返回详解》这篇文章主要为大家详细介绍了如何基于Spring实现自定义错误信息返回效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录背景目标实现产出背景Spring 提供了 @RestConChina编程trollerAdvice 用来实现 HTT
阅读更多...
SpringSecurity 认证、注销、权限控制功能(注销、记住密码、自定义登入页)

SpringSecurity 认证、注销、权限控制功能(注销、记住密码、自定义登入页)

《SpringSecurity认证、注销、权限控制功能(注销、记住密码、自定义登入页)》SpringSecurity是一个强大的Java框架,用于保护应用程序的安全性,它提供了一套全面的安全解决方案... 目录简介认识Spring Security“认证”（Authentication）“授权” （Auth
阅读更多...
SpringBoot自定义注解如何解决公共字段填充问题

SpringBoot自定义注解如何解决公共字段填充问题

《SpringBoot自定义注解如何解决公共字段填充问题》本文介绍了在系统开发中,如何使用AOP切面编程实现公共字段自动填充的功能,从而简化代码,通过自定义注解和切面类,可以统一处理创建时间和修改时间... 目录1.1 问题分析1.2 实现思路1.3 代码开发1.3.1 步骤一1.3.2 步骤二1.3.3
阅读更多...
dubbo3 filter(过滤器)如何自定义过滤器

dubbo3 filter(过滤器)如何自定义过滤器

《dubbo3filter(过滤器)如何自定义过滤器》dubbo3filter（过滤器）类似于javaweb中的filter和springmvc中的intercaptor,用于在请求发送前或到达前进... 目录dubbo3 filter（过滤器）简介dubbo 过滤器运行时机自定义 filter第一种 @A
阅读更多...
CSS自定义浏览器滚动条样式完整代码

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》：本文主要介绍了如何使用CSS自定义浏览器滚动条的样式，包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式，并提供了完整的CSS代码示例，通过这些技巧，你可以为你的网站添加个性化的滚动条样式，从而提升用户体验，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
Python中的可视化设计与UI界面实现

Python中的可视化设计与UI界面实现

《Python中的可视化设计与UI界面实现》本文介绍了如何使用Python创建用户界面（UI）,包括使用Tkinter、PyQt、Kivy等库进行基本窗口、动态图表和动画效果的实现,通过示例代码,展示... 目录从像素到界面：python带你玩转UI设计示例：使用Tkinter创建一个简单的窗口绘图魔法：用
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2