一个双曲线实时温度界面的自定义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。

相关文章

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

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

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

Python中构建终端应用界面利器Blessed模块的使用

《Python中构建终端应用界面利器Blessed模块的使用》Blessed库作为一个轻量级且功能强大的解决方案,开始在开发者中赢得口碑,今天,我们就一起来探索一下它是如何让终端UI开发变得轻松而高... 目录一、安装与配置：简单、快速、无障碍二、基本功能：从彩色文本到动态交互1. 显示基本内容2. 创建链
阅读更多...
SpringBoot 自定义消息转换器使用详解

SpringBoot 自定义消息转换器使用详解

《SpringBoot自定义消息转换器使用详解》本文详细介绍了SpringBoot消息转换器的知识,并通过案例操作演示了如何进行自定义消息转换器的定制开发和使用,感兴趣的朋友一起看看吧... 目录一、前言二、SpringBoot 内容协商介绍2.1 什么是内容协商2.2 内容协商机制深入理解2.2.1 内容
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
自定义类型：结构体(续)

自定义类型：结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐？ 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识，并举出了两个例子，我们再举出两个例子继续说明： struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s
阅读更多...
Spring 源码解读：自定义实现Bean定义的注册与解析

Spring 源码解读：自定义实现Bean定义的注册与解析

引言 在Spring框架中，Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义，Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制，帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry，以全面掌握Bean注册和解析的核心原理。
阅读更多...
Oracle type （自定义类型的使用）

Oracle type （自定义类型的使用）

oracle - type   type定义： oracle中自定义数据类型 oracle中有基本的数据类型，如number，varchar2，date，numeric，float....但有时候我们需要特殊的格式， 如将name定义为（firstname,lastname）的形式，我们想把这个作为一个表的一列看待，这时候就要我们自己定义一个数据类型 格式 ：create or repla
阅读更多...
MVC（Model-View-Controller）和MVVM（Model-View-ViewModel）

MVC（Model-View-Controller）和MVVM（Model-View-ViewModel）

1、MVC MVC（Model-View-Controller） 是一种常用的架构模式，用于分离应用程序的逻辑、数据和展示。它通过三个核心组件（模型、视图和控制器）将应用程序的业务逻辑与用户界面隔离，促进代码的可维护性、可扩展性和模块化。在 MVC 模式中，各组件可以与多种设计模式结合使用，以增强灵活性和可维护性。以下是 MVC 各组件与常见设计模式的关系和作用： 1. Model（模型）
阅读更多...
HTML5自定义属性对象Dataset

HTML5自定义属性对象Dataset

原文转自HTML5自定义属性对象Dataset简介 一、html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征、窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍，就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放，例如我们要在一个文字按钮上存放相对应的id： <a href="javascript:" d
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2