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。

相关文章

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

《Android悬浮窗开发示例((动态权限请求|前台服务和通知|悬浮窗创建)》本文介绍了Android悬浮窗的实现效果,包括动态权限请求、前台服务和通知的使用,悬浮窗权限需要动态申请并引导... 目录一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后
阅读更多...
Android里面的Service种类以及启动方式

Android里面的Service种类以及启动方式

《Android里面的Service种类以及启动方式》Android中的Service分为前台服务和后台服务,前台服务需要亮身份牌并显示通知,后台服务则有启动方式选择,包括startService和b... 目录一句话总结：一、Service 的两种类型：1. 前台服务（必须亮身份牌）2. 后台服务（偷偷干
阅读更多...
CSS自定义浏览器滚动条样式完整代码

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

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

Android kotlin语言实现删除文件的解决方案

《Androidkotlin语言实现删除文件的解决方案》：本文主要介绍Androidkotlin语言实现删除文件的解决方案,在项目开发过程中,尤其是需要跨平台协作的项目,那么删除用户指定的文件的... 目录一、前言二、适用环境三、模板内容1.权限申请2.Activity中的模板一、前言在项目开发过程中，尤
阅读更多...
Android数据库Room的实际使用过程总结

Android数据库Room的实际使用过程总结

《Android数据库Room的实际使用过程总结》这篇文章主要给大家介绍了关于Android数据库Room的实际使用过程,详细介绍了如何创建实体类、数据访问对象（DAO）和数据库抽象类,需要的朋友可以... 目录前言一、Room的基本使用1.项目配置2.创建实体类（Entity）3.创建数据访问对象（DAO
阅读更多...
SpringBoot 自定义消息转换器使用详解

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

《SpringBoot自定义消息转换器使用详解》本文详细介绍了SpringBoot消息转换器的知识,并通过案例操作演示了如何进行自定义消息转换器的定制开发和使用,感兴趣的朋友一起看看吧... 目录一、前言二、SpringBoot 内容协商介绍2.1 什么是内容协商2.2 内容协商机制深入理解2.2.1 内容
阅读更多...
Android WebView的加载超时处理方案

Android WebView的加载超时处理方案

《AndroidWebView的加载超时处理方案》在Android开发中,WebView是一个常用的组件,用于在应用中嵌入网页,然而,当网络状况不佳或页面加载过慢时,用户可能会遇到加载超时的问题,本... 目录引言一、WebView加载超时的原因二、加载超时处理方案1. 使用Handler和Timer进行超
阅读更多...
【前端学习】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影
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2