android自定义刻度盘 表盘 速度表

2023-11-05 12:10
文章标签 android 自定义 表盘 速度表 刻度盘

本文主要是介绍android自定义刻度盘 表盘 速度表，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

android自定义刻度盘 表盘 速度表

效果图
这里写图片描述
这里写图片描述
直接在xml文件中添加即可，在代码中调用setProgress(int) 即可。代码注释写的很清楚，有兴趣的随便改改。

InstrumentView.java

package com.xk.testdemo.view;import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;import com.xk.testdemo.config.ConfigColor;import static android.R.attr.angle;
import static android.R.attr.baseline;
import static android.R.attr.dial;
import static android.R.attr.end;
import static android.R.attr.path;
import static android.R.attr.radius;
import static android.R.attr.width;
import static android.R.attr.x;
import static android.R.attr.y;/*** Created by xuekai on 2016/10/26.*/public class InstrumentView extends View {private String color_outcircle = "#DEDEDE";private String color_bg_outcircle = "#2690F8";private String color_bg_incircle = "#58ADE4";private String color_progress = "#87CEEB";private String color_smart_circle = "#C2B9B0";private String color_indicator_left = "#E1DCD6";private String color_indicator_right = "#F4EFE9";/*** 当前进度*/private int progress = 50;/*** 要画的内容的实际宽度*/private int contentWidth;/*** view的实际宽度*/private int viewWidth;/*** view的实际高度*/private int viewHeight;/*** 外环线的宽度*/private int outCircleWidth = 1;/*** 外环的半径*/private int outCircleRadius = 0;/*** 内环的半径*/private int inCircleRedius = 0;/*** 内环与外环的距离*/private int outAndInDistance = 0;/*** 内环的宽度*/private int inCircleWidth = 0;/*** 刻度盘距离它外面的圆的距离*/private int dialOutCircleDistance = 0;/*** 内容中心的坐标*/private int[] centerPoint = new int[2];/*** 刻度线的数量*/private int dialCount = 0;/*** 每隔几次出现一个长线*/private int dialPer = 0;/*** 长线的长度*/private int dialLongLength = 0;/*** 短线的长度*/private int dialShortLength = 0;/*** 刻度线距离圆心最远的距离*/private int dialRadius = 0;/*** 圆弧开始的角度*/private int startAngle = 0;/*** 圆弧划过的角度*/private int allAngle = 0;private Paint mPaint;/*** 刻度盘上数字的数量*/private int figureCount = 6;public InstrumentView(Context context) {this(context, null);}public InstrumentView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public InstrumentView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}private void init() {mPaint = new Paint();mPaint.setStyle(Paint.Style.STROKE);mPaint.setAntiAlias(true);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);initValues();}/*** 初始化尺寸*/private void initValues() {viewWidth = getMeasuredWidth();viewHeight = getMeasuredHeight();contentWidth = viewWidth > viewHeight ? viewHeight : viewWidth;outCircleRadius = contentWidth / 2 - outCircleWidth;outAndInDistance = (int) (contentWidth / 26.5);inCircleWidth = (int) (contentWidth / 18.7);centerPoint[0] = viewWidth / 2;centerPoint[1] = viewHeight / 2;inCircleRedius = outCircleRadius - outAndInDistance - inCircleWidth / 2;startAngle = 150;allAngle = 240;dialOutCircleDistance = inCircleWidth;dialCount = 50;dialPer = 5;dialLongLength = (int) (dialOutCircleDistance / 1.2);dialShortLength = (int) (dialLongLength / 1.8);dialRadius = inCircleRedius - dialOutCircleDistance;}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);drawStatic(canvas);drawDynamic(canvas);}/*** 绘制静态的部分** @param canvas*/private void drawStatic(Canvas canvas) {drawOutCircle(canvas);drawCircleWithRound(startAngle, allAngle, inCircleWidth, inCircleRedius, color_outcircle, canvas);drawDial(startAngle, allAngle, dialCount, dialPer, dialLongLength, dialShortLength, dialRadius, canvas);drawBackGround(canvas);drawFigure(canvas, figureCount);}private void drawFigure(Canvas canvas, int count) {int figure = 0;int angle;for (int i = 0; i < count; i++) {figure = (int) (100 / (1f * count-1) * i);angle = (int) ((allAngle) / ((count-1) * 1f) * i) + startAngle;int[] pointFromAngleAndRadius = getPointFromAngleAndRadius(angle, dialRadius - dialLongLength * 2 );mPaint.setTextSize(15);mPaint.setTextAlign(Paint.Align.CENTER);canvas.save();canvas.rotate(angle+90,pointFromAngleAndRadius[0],pointFromAngleAndRadius[1]);canvas.drawText(figure+"%",pointFromAngleAndRadius[0],pointFromAngleAndRadius[1],mPaint);canvas.restore();}}/*** 画内层背景** @param canvas*/private void drawBackGround(Canvas canvas) {mPaint.setColor(Color.parseColor(color_bg_outcircle));mPaint.setStyle(Paint.Style.STROKE);mPaint.setStrokeWidth(outCircleRadius / 3 / 2);canvas.drawCircle(centerPoint[0], centerPoint[1], outCircleRadius / 3, mPaint);mPaint.setColor(Color.parseColor(color_bg_incircle));mPaint.setStyle(Paint.Style.FILL);canvas.drawCircle(centerPoint[0], centerPoint[1], (outCircleRadius / 3f / 2), mPaint);}/*** 画刻度盘** @param startAngle  开始画的角度* @param allAngle    总共划过的角度* @param dialCount   总共的线的数量* @param per         每隔几个出现一次长线* @param longLength  长仙女的长度* @param shortLength 短线的长度* @param radius      距离圆心最远的地方的半径*/private void drawDial(int startAngle, int allAngle, int dialCount, int per, int longLength, int shortLength, int radius, Canvas canvas) {int length;int angle;for (int i = 0; i <= dialCount; i++) {angle = (int) ((allAngle) / (dialCount * 1f) * i) + startAngle;if (i % 5 == 0) {length = longLength;} else {length = shortLength;}drawSingleDial(angle, length, radius, canvas);}}/*** 画刻度中的一条线** @param angle  所处的角度* @param length 线的长度* @param radius 距离圆心最远的地方的半径*/private void drawSingleDial(int angle, int length, int radius, Canvas canvas) {int[] startP = getPointFromAngleAndRadius(angle, radius);int[] endP = getPointFromAngleAndRadius(angle, radius - length);canvas.drawLine(startP[0], startP[1], endP[0], endP[1], mPaint);}/*** 画最外层的圆** @param canvas*/private void drawOutCircle(Canvas canvas) {mPaint.setStrokeWidth(outCircleWidth);mPaint.setStyle(Paint.Style.STROKE);mPaint.setColor(Color.parseColor(color_outcircle));canvas.drawCircle(centerPoint[0], centerPoint[1], outCircleRadius, mPaint);}/*** 绘制动态的部分** @param canvas*/private void drawDynamic(Canvas canvas) {drawProgress(progress, canvas);drawIndicator(progress, canvas);drawCurrentProgressTv(progress, canvas);}/*** 绘制当前进度是文字** @param progress* @param canvas*/private void drawCurrentProgressTv(int progress, Canvas canvas) {
//        canvas.drawText("当前进度："+progress+"%",);mPaint.setTextSize(25);mPaint.setTextAlign(Paint.Align.CENTER);Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();float baseLine1 = centerPoint[1] + (outCircleRadius / 20f * 11 - fontMetrics.top - fontMetrics.bottom);canvas.drawText("当前进度", centerPoint[0], baseLine1, mPaint);
//drawText的第二个参数的值=要让文字的中心放在哪-（fontMetrics.top+fontMetrics.bottom）/2
//此时求出来的baseline可以使文字竖直居中float baseLine2 = outCircleRadius / 20f * 11 - 3 * (fontMetrics.bottom + fontMetrics.top) + centerPoint[1];canvas.drawText(progress + "%", centerPoint[0], baseLine2, mPaint);}/*** 画指针以及他的背景** @param progress* @param canvas*/private void drawIndicator(int progress, Canvas canvas) {drawPointer(canvas);drawIndicatorBg(canvas);}/*** 指针的最远处的半径和刻度线的一样*/private void drawPointer(Canvas canvas) {RectF rectF = new RectF(centerPoint[0] - (int) (outCircleRadius / 3f / 2 / 2),centerPoint[1] - (int) (outCircleRadius / 3f / 2 / 2), centerPoint[0] + (int) (outCircleRadius / 3f / 2 / 2), centerPoint[1] + (int) (outCircleRadius / 3f / 2 / 2));int angle = (int) ((allAngle) / (100 * 1f) * progress) + startAngle;//指针的定点坐标int[] peakPoint = getPointFromAngleAndRadius(angle, dialRadius);//顶点朝上，左侧的底部点的坐标int[] bottomLeft = getPointFromAngleAndRadius(angle - 90, (int) (outCircleRadius / 3f / 2 / 2));//顶点朝上，右侧的底部点的坐标int[] bottomRight = getPointFromAngleAndRadius(angle + 90, (int) (outCircleRadius / 3f / 2 / 2));Path path = new Path();mPaint.setColor(Color.parseColor(color_indicator_left));path.moveTo(centerPoint[0], centerPoint[1]);path.lineTo(peakPoint[0], peakPoint[1]);path.lineTo(bottomLeft[0], bottomLeft[1]);path.close();canvas.drawPath(path, mPaint);canvas.drawArc(rectF, angle - 180, 100, true, mPaint);Log.e("InstrumentView", "drawPointer" + angle);mPaint.setColor(Color.parseColor(color_indicator_right));path.reset();path.moveTo(centerPoint[0], centerPoint[1]);path.lineTo(peakPoint[0], peakPoint[1]);path.lineTo(bottomRight[0], bottomRight[1]);path.close();canvas.drawPath(path, mPaint);canvas.drawArc(rectF, angle + 80, 100, true, mPaint);}private void drawIndicatorBg(Canvas canvas) {mPaint.setColor(Color.parseColor(color_smart_circle));mPaint.setStyle(Paint.Style.FILL);canvas.drawCircle(centerPoint[0], centerPoint[1], (outCircleRadius / 3f / 2 / 4), mPaint);}/*** 根据进度画进度条** @param progress 最大进度为100.最小为0*/private void drawProgress(int progress, Canvas canvas) {float ratio = progress / 100f;int angle = (int) (allAngle * ratio);drawCircleWithRound(startAngle, angle, inCircleWidth, inCircleRedius, color_progress, canvas);}public int getProgress() {return progress;}public void setProgress(int progress) {this.progress = progress;invalidate();}/*** 画一个两端为圆弧的圆形曲线** @param startAngle 曲线开始的角度* @param allAngle   曲线走过的角度* @param radius     曲线的半径* @param width      曲线的厚度*/private void drawCircleWithRound(int startAngle, int allAngle, int width, int radius, String color, Canvas canvas) {mPaint.setStrokeWidth(width);mPaint.setStyle(Paint.Style.STROKE);mPaint.setColor(Color.parseColor(color));RectF rectF = new RectF(centerPoint[0] - radius, centerPoint[1] - radius, centerPoint[0] + radius, centerPoint[1] + radius);canvas.drawArc(rectF, startAngle, allAngle, false, mPaint);drawArcRoune(radius, startAngle, width, canvas);drawArcRoune(radius, startAngle + allAngle, width, canvas);}/*** 绘制圆弧两端的圆** @param radius 圆弧的半径* @param angle  所处于圆弧的多少度的位置* @param width  圆弧的宽度*/private void drawArcRoune(int radius, int angle, int width, Canvas canvas) {int[] point = getPointFromAngleAndRadius(angle, radius);mPaint.setStrokeWidth(0);mPaint.setStyle(Paint.Style.FILL);mPaint.setStyle(Paint.Style.FILL);canvas.drawCircle(point[0], point[1], width / 2, mPaint);}/*** 根据角度和半径，求一个点的坐标** @param angle* @param radius* @return*/private int[] getPointFromAngleAndRadius(int angle, int radius) {double x = radius * Math.cos(angle * Math.PI / 180) + centerPoint[0];double y = radius * Math.sin(angle * Math.PI / 180) + centerPoint[1];return new int[]{(int) x, (int) y};}}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context="com.xk.testdemo.MainActivity"><com.xk.testdemo.view.InstrumentView
        android:layout_width="wrap_content"android:layout_height="500px"android:layout_alignParentTop="true"android:layout_alignParentLeft="true"android:layout_alignParentStart="true"android:id="@+id/instrumentView" />
<SeekBar
    android:layout_alignParentBottom="true"android:layout_width="match_parent"android:layout_height="wrap_content"android:id="@+id/sb"/></RelativeLayout>

MainActivity.java

package com.xk.testdemo;import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.SeekBar;import com.xk.testdemo.view.IndicatorContainer;
import com.xk.testdemo.view.InstrumentView;public class MainActivity extends AppCompatActivity {private IndicatorContainer myView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);final InstrumentView viewById = (InstrumentView) findViewById(R.id.instrumentView);SeekBar viewById1 = (SeekBar) findViewById(R.id.sb);viewById1.setMax(100);viewById1.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {@Overridepublic void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {viewById.setProgress(progress);}@Overridepublic void onStartTrackingTouch(SeekBar seekBar) {}@Overridepublic void onStopTrackingTouch(SeekBar seekBar) {}});}
}

这篇关于android自定义刻度盘 表盘 速度表的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


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

相关文章

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

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

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候，不知道如何选的好，本文针对常用的方案，做个大概的说明： 1. 使用VLC for Android VLC Media Player（VLC多媒体播放器），最初命名为VideoLAN客户端，是VideoLAN品牌产品，是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式，并支持DVD影音光盘，VCD影
阅读更多...
自定义类型：结构体(续)

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

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

android-opencv-jni

//------------------start opencv--------------------@Override public void onResume(){ super.onResume(); //通过OpenCV引擎服务加载并初始化OpenCV类库，所谓OpenCV引擎服务即是 //OpenCV_2.4.3.2_Manager_2.4_*.apk程序包，存
阅读更多...
从状态管理到性能优化：全面解析 Android Compose

从状态管理到性能优化：全面解析 Android Compose

文章目录 引言一、Android Compose基本概念1.1 什么是Android Compose?1.2 Compose的优势1.3 如何在项目中使用Compose 二、Compose中的状态管理2.1 状态管理的重要性2.2 Compose中的状态和数据流2.3 使用State和MutableState处理状态2.4 通过ViewModel进行状态管理 三、Compose中的列表和滚动
阅读更多...
Spring 源码解读：自定义实现Bean定义的注册与解析

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

引言 在Spring框架中，Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义，Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制，帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry，以全面掌握Bean注册和解析的核心原理。
阅读更多...
Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中，在进行一些平板等默认横屏的设备开发的过程中，需要在进入camera2的 时候，默认预览图像也是需要横屏显示的，在上一篇已经实现了横屏预览功能，然后发现横屏预览后，拍照保存的图片 依然是竖屏的，所以说同样需要将图片也保存为横屏图标了，所以就需要看下mtk的camera2的相关横屏保存图片功能， 如何实现实现横屏保存图片功能 如图所示: 2.mtk
阅读更多...
android应用中res目录说明

android应用中res目录说明

Android应用的res目录是一个特殊的项目，该项目里存放了Android应用所用的全部资源，包括图片、字符串、颜色、尺寸、样式等，类似于web开发中的public目录，js、css、image、style。。。。 Android按照约定，将不同的资源放在不同的文件夹中，这样可以方便的让AAPT(即Android Asset Packaging Tool , 在SDK的build-tools目
阅读更多...
Android fill_parent、match_parent、wrap_content三者的作用及区别

Android fill_parent、match_parent、wrap_content三者的作用及区别

这三个属性都是用来适应视图的水平或者垂直大小，以视图的内容或尺寸为基础的布局，比精确的指定视图的范围更加方便。 1、fill_parent 设置一个视图的布局为fill_parent将强制性的使视图扩展至它父元素的大小 2、match_parent 和fill_parent一样，从字面上的意思match_parent更贴切一些，于是从2.2开始，两个属性都可以使用，但2.3版本以后的建议使
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2