Android 仿汽车表盘view

最新推荐文章于 2024-06-15 15:39:35 发布
最新推荐文章于 2024-06-15 15:39:35 发布
阅读量2k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Saturation/article/details/78272761
版权 
ackage com.wenyuan.netstation.soldier.ui;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.DashPathEffect;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.PathEffect;
import android.graphics.RadialGradient;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;

/**
 * Created by qinss on 2017/10/11 0011.
 */

public class MyView extends View {
    private final Context mContext;
    //开始重绘
    private boolean start = true;

    private int mSection = 10; // 值域（mMax-mMin）等分份数
    private int mPortion = 10; // 一个mSection等分份数
    private float TICK_SPLIT_DEFAULT_ANGLE = 2.4f;
    private int screenWidth;//屏幕宽
    private int screenHeight;//屏幕高
    private int mDensityDpi;//屏幕dpi
    private Paint mPaint;//画笔
    private int mStartAngle = 150; // 起始角度
    private int mStopAngle = 30; // 结束角度
    private float mSweepAngle = 240; // 绘制角度
    private int raduis;//半径
    private int pointX, pointY;//圆心
    private Paint textPaint;//文字画笔
    private Paint speedAreaPaint;//速度扇形画笔
    private RectF speedRectF;//速度外切矩形
    private RectF speedRectFInner;
    private int speed;//速度
    // 速度文字 绘制的XY坐标
    private int baseX;
    private int baseY;
    //速度控制模式  1 加速  2 减速  3 手刹
    private int type;
    private RectF speedScaleRectF;
    private Paint ciclePaint;
    private Shader mShader;
    private Paint scale;
    private Paint innerPaint;
    private Paint mPaint_2;
    private RectF speedRectFInner_2;

    public MyView(Context context) {
        this(context, null);
    }

    public MyView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext = context;

        //获取屏幕宽高 和 屏幕密度dpi
        DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
        screenWidth = displayMetrics.widthPixels;
        screenHeight = displayMetrics.heightPixels;
        mDensityDpi = displayMetrics.densityDpi / 320;
        //关闭硬件加速
        setLayerType(LAYER_TYPE_SOFTWARE, null);
        //设置抗锯齿
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setAntiAlias(true);
        //设置画笔样式
        mPaint.setStyle(Paint.Style.FILL);
        //画笔宽
        mPaint.setStrokeWidth(5 * mDensityDpi);

        //初始化 半径
        raduis = screenWidth / 3;
        //圆心
        pointX = pointY = screenWidth / 2;


        //设置抗锯齿
        textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        textPaint.setAntiAlias(true);
        //设置画笔颜色
        Shader textShader = new LinearGradient(pointX, pointY - raduis, pointX, pointY + raduis, new int[]{0xffffffff, 0x00ffffff, 0xffffffff}, null, Shader.TileMode.CLAMP);
        textPaint.setShader(textShader);

        // 获取字体并设置画笔字体
        Typeface typeface = Typeface.createFromAsset(mContext.getAssets(), "kt.ttf");
        textPaint.setTypeface(typeface);
        //设置抗锯齿
        speedAreaPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        speedAreaPaint.setAntiAlias(true);

        //设置画笔样式
        speedAreaPaint.setStrokeWidth(5 * mDensityDpi);
        speedAreaPaint.setStyle(Paint.Style.STROKE);


        // 设置速度范围扇形的渐变颜色
        mShader = new LinearGradient(pointX - raduis, pointY, pointX + raduis, pointY, new int[]{0xFF0000ff, 0xFF00ff00, 0xFFff0000}, null, Shader.TileMode.CLAMP);
        speedAreaPaint.setShader(mShader);
        //短刻度画笔
        scale = new Paint(Paint.ANTI_ALIAS_FLAG);
        scale.setAntiAlias(true);
        scale.setColor(0xBF3F6AB5);
        //设置画笔样式
        scale.setStyle(Paint.Style.FILL);
        //画笔宽
        scale.setStrokeWidth(5 * mDensityDpi);

        //运动的点
        ciclePaint = new Paint();
        ciclePaint.setAntiAlias(true);
        ciclePaint.setStrokeWidth(20 * mDensityDpi);
        ciclePaint.setStyle(Paint.Style.FILL);
        ciclePaint.setShader(mShader);


        innerPaint = new Paint();
        innerPaint.setAntiAlias(true);
        Shader innerShader = new RadialGradient(pointX, pointY, raduis, new int[]{0x00ffffff, 0x44ffffff}, null, Shader.TileMode.CLAMP);
        innerPaint.setShader(innerShader);

        //虚线画笔
        mPaint_2 = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint_2.setAntiAlias(true);
        //设置画笔样式
        mPaint_2.setStyle(Paint.Style.STROKE);
        //画笔宽
        mPaint_2.setColor(0xBF3F6AB5);
        mPaint_2.setStrokeWidth(25 * mDensityDpi);


        // 初始化速度范围的2个扇形外切矩形
        speedRectF = new RectF(pointX - raduis + 10 * mDensityDpi, pointY - raduis + 10 * mDensityDpi, pointX + raduis - 10 * mDensityDpi, pointY + raduis - 10 * mDensityDpi);
        //刻度扫描
        speedScaleRectF = new RectF(pointX - raduis + 70 * mDensityDpi, pointY - raduis + 70 * mDensityDpi, pointX + raduis - 70 * mDensityDpi, pointY + raduis - 70 * mDensityDpi);

        //内园外切矩形
        speedRectFInner = new RectF(pointX - raduis / 2, pointY - raduis / 2, pointX + raduis / 2, pointY + raduis / 2);
        //虚线弧外切矩形
        speedRectFInner_2 = new RectF(pointX - raduis + 115 * mDensityDpi, pointY - raduis + 115 * mDensityDpi, pointX + raduis - 115 * mDensityDpi, pointY + raduis - 115 * mDensityDpi);

    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
//        widthSize = heightSize > widthSize ? widthSize : heightSize;
//        heightSize = heightSize > widthSize ? widthSize : heightSize;
        setMeasuredDimension(widthSize, heightSize);
    }




    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(0x00000000);

        //绘制外层圆
        drawCicle(canvas);

        //绘制速度范围扇形区域
        drawSpeedArea(canvas);


        //变换画笔颜色 绘制刻度
        mPaint.setColor(0xBF3F6AB5);
        drawScale(canvas);

        //绘制中间文字内容
        drawCenter(canvas);

    }

    private void drawCenter(Canvas canvas) {
        //速度
        textPaint.setTextSize(250  * mDensityDpi);
        float tw = textPaint.measureText(String.valueOf(speed));
        baseX = (int) (pointX - tw / 2);
        baseY = (int) (pointY + Math.abs(textPaint.descent() + textPaint.ascent()) / 4);
        Shader textShader = new LinearGradient(baseX, baseY - raduis / 4, baseX, baseY, new int[]{0x55ffffff, 0xffffffff}, null, Shader.TileMode.MIRROR);
        textPaint.setShader(textShader);
        canvas.drawText(String.valueOf(speed), baseX, baseY, textPaint);
    }

    private void drawScale(Canvas canvas) {
        mPaint.setStrokeWidth(5 * mDensityDpi);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        canvas.drawLine(pointX, pointY - raduis + 40 * mDensityDpi, pointX, pointY - raduis + 80 * mDensityDpi, mPaint);
        /**
         * 画长刻度
         * 画好起始角度的一条刻度后通过canvas绕着原点旋转来画剩下的长刻度
         */
        //逆时针
        canvas.save();
        float degree = mSweepAngle / mSection;
        for (int i = 0; i < mSection / 2; i++) {
            canvas.rotate(-degree, pointX, pointY);
            canvas.drawLine(pointX, pointY - raduis + 40 * mDensityDpi, pointX, pointY - raduis + 80 * mDensityDpi, mPaint);
        }
        canvas.restore();
        //顺时针
        canvas.save();
        for (int i = 0; i < mSection / 2; i++) {
            canvas.rotate(degree, pointX, pointY);
            canvas.drawLine(pointX, pointY - raduis + 40 * mDensityDpi, pointX, pointY - raduis + 80 * mDensityDpi, mPaint);
        }
        canvas.restore();
        /**
         * 画短刻度
         * 同样采用canvas的旋转原理
         */
        //
        //        // 逆时针到开始处
        //        mPaint.setShader(null);
        //        canvas.save();
        //        float a = calculateRelativeAngleWithValue(speed);
        //        float b = mSweepAngle / 2f;
        //        degree = mSweepAngle / (mSection * mPortion);
        //        for (int i = 0; i < (mSection * mPortion) / 2 - 1; i++) {
        //            Integer integer = (Integer) mArgbEvaluator.evaluate(i * (degree + degree) / (240), 0xff0000ff, 0xffff0000);
        //                    canvas.rotate(-degree, pointX, pointY);
        //            b -= degree;
        //            mPaint.setColor(a>=b?integer:0xBF3F6AB5);
        //            canvas.drawLine(pointX, pointY - raduis + 60 * mDensityDpi, pointX, pointY - raduis + 80 * mDensityDpi, mPaint);
        //        }
        //        canvas.restore();
        //        //         顺时针到结尾处
        //        canvas.save();
        //        b = mSweepAngle / 2f;
        //        for (int i = 0; i < (mSection * mPortion) / 2 - 1; i++) {
        //            canvas.rotate(degree, pointX, pointY);
        //            Integer integer = (Integer) mArgbEvaluator.evaluate(i * (degree + degree) / (240), 0xff0000ff, 0xffff0000);
        //            b += degree;
        //            mPaint.setColor(a>=b?integer:0xBF3F6AB5);
        //            canvas.drawLine(pointX, pointY - raduis + 60 * mDensityDpi, pointX, pointY - raduis + 80 * mDensityDpi, mPaint);
        //        }
        //        canvas.restore();
        //        mPaint.setShader(null);

        mPaint_2.setShader(null);
        PathEffect effects = new DashPathEffect(new float[]{45, 20, 45, 20}, 0);
        mPaint_2.setPathEffect(effects);
        canvas.drawArc(speedRectFInner_2, mStartAngle-1, mSweepAngle, false, mPaint_2);

        //渐变的短刻度
        for (int i = 0; i < mSection * mPortion; i++) {
            float[] point = getCoordinatePoint(raduis - 80 * mDensityDpi, mStartAngle + TICK_SPLIT_DEFAULT_ANGLE * i);
            float[] point1 = getCoordinatePoint(raduis - 50 * mDensityDpi, mStartAngle + TICK_SPLIT_DEFAULT_ANGLE * i);
            if (speed > i) {
                scale.setShader(mShader);
            } else {
                scale.setShader(null);
            }
            canvas.drawLine(point[0], point[1], point1[0], point1[1], scale);
            mPaint_2.setPathEffect(effects);
            mPaint_2.setShader(mShader);
            canvas.drawArc(speedRectFInner_2, mStartAngle-1, speed*TICK_SPLIT_DEFAULT_ANGLE, false, mPaint_2);
        }



    }

    private void drawSpeedArea(Canvas canvas) {
        float degree;
        if (speed < mSweepAngle) {
            degree = speed * mSweepAngle / (mSection * mPortion);
        } else {
            degree = mStopAngle * 36 / 30;
        }
        canvas.drawArc(speedRectF, mStartAngle, degree, false, speedAreaPaint);
        speedAreaPaint.setStrokeWidth(20 * mDensityDpi);
        if (degree > 1) {
            //运动的的点变化
            float[] coordinatePoint = getCoordinatePoint(raduis - 10 * mDensityDpi, degree + 150);
            canvas.drawCircle(coordinatePoint[0], coordinatePoint[1], 12 * mDensityDpi, ciclePaint);
            //数值变化是起点变为起始色
            mPaint.setColor(0xFF0000ff);
            float[] point = getCoordinatePoint(raduis - 10 * mDensityDpi, mStartAngle + 1);
            mPaint.setStrokeWidth(1 * mDensityDpi);
            mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
            canvas.drawCircle(point[0], point[1], 15 * mDensityDpi, mPaint);
        }


    }

    /**
     * 绘制外层圆
     *
     * @param canvas
     */
    private void drawCicle(Canvas canvas) {
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setAlpha(80);
        mPaint.setStrokeWidth(16 * mDensityDpi);
        mPaint.setColor(0xff646464);
        //绘制外层圆
        canvas.drawArc(speedRectF, mStartAngle + 1, mSweepAngle - 2, false, mPaint);
        //起点
        float[] point = getCoordinatePoint(raduis - 10 * mDensityDpi, mStartAngle + 1);
        mPaint.setStrokeWidth(1 * mDensityDpi);
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        canvas.drawCircle(point[0], point[1], 15 * mDensityDpi, mPaint);
        //启始的大小
        textPaint.setTextSize(60  * mDensityDpi);
        canvas.drawText("0",point[0]-80*mDensityDpi,point[1]+20*mDensityDpi,textPaint);
        //尾点
        float[] point1 = getCoordinatePoint(raduis - 10 * mDensityDpi, mStartAngle + 240-1);
        mPaint.setStrokeWidth(1 * mDensityDpi);
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        canvas.drawCircle(point1[0], point1[1], 15 * mDensityDpi, mPaint);
        //尾部的大小
        textPaint.setTextSize(60  * mDensityDpi);
        canvas.drawText("90",point1[0]+50*mDensityDpi,point1[1]+10*mDensityDpi,textPaint);

        //内圈园
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(pointX, pointY, raduis - 150 * mDensityDpi, innerPaint);

        //画内圈园内刻度
        mPaint.setStrokeWidth(3 * mDensityDpi);
        for (int i = 0; i < 100; i++) {
            float[] point3 = getCoordinatePoint(raduis - 170 * mDensityDpi, (float) (mStartAngle + 3.6 * i));
            float[] point4 = getCoordinatePoint(raduis - 150 * mDensityDpi, (float) (mStartAngle + 3.6 * i));
            canvas.drawLine(point3[0], point3[1], point4[0], point4[1], mPaint);
        }


    }


    public void setStart(boolean start) {
        this.start = start;
    }

    // 设置速度 并重绘视图
    public void setSpeed(int speed) {
        this.speed = speed;
        postInvalidate();
    }

    //设置速度控制模式
    public void setType(int type) {
        this.type = type;
    }


    //将角度和半径转为点
    private float[] getCoordinatePoint(float radius, float angle) {
        float[] point = new float[2];

        double arcAngle = Math.toRadians(angle); //将角度转换为弧度
        if (angle < 90) {
            point[0] = (float) (pointX + Math.cos(arcAngle) * radius);
            point[1] = (float) (pointY + Math.sin(arcAngle) * radius);
        } else if (angle == 90) {
            point[0] = pointX;
            point[1] = pointY + radius;
        } else if (angle > 90 && angle < 180) {
            arcAngle = Math.PI * (180 - angle) / 180.0;
            point[0] = (float) (pointX - Math.cos(arcAngle) * radius);
            point[1] = (float) (pointY + Math.sin(arcAngle) * radius);
        } else if (angle == 180) {
            point[0] = pointX - radius;
            point[1] = pointY;
        } else if (angle > 180 && angle < 270) {
            arcAngle = Math.PI * (angle - 180) / 180.0;
            point[0] = (float) (pointX - Math.cos(arcAngle) * radius);
            point[1] = (float) (pointY - Math.sin(arcAngle) * radius);
        } else if (angle == 270) {
            point[0] = pointX;
            point[1] = pointY - radius;
        } else {
            arcAngle = Math.PI * (360 - angle) / 180.0;
            point[0] = (float) (pointX + Math.cos(arcAngle) * radius);
            point[1] = (float) (pointY - Math.sin(arcAngle) * radius);
        }
        return point;
    }
}
小小丶盘古
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android 自定义View 仪表盘
01-25
在Android开发中，自定义View是提升应用独特性和用户体验的重要手段。本文将深入探讨如何创建一个自定义的“仪表盘”View，以实现一个美观且功能丰富的界面元素。我们将覆盖以下知识点： 1. **自定义View的基本结构...
android自定义速度仪表盘,Android自定义仪表盘View
weixin_42423852的博客
05-25 449
Android自定义仪表盘View，仿汽车速度仪、刻度盘等，可自定义多种模式，简单灵活 。本例子来自：https://github.com/woxingxiao/DashboardViewDemo本项目主要由DashboardView自定义实现的，其中指针旋转角度可以通过布局修改参数。如下android:id="@+id/dashboardView1"android:layout_width="w...
Android表盘自定义控件
lianwa88的博客
07-17 3809
Header         很久不写自定义控件，最近一个项目中有个控件需要进行自定义，便拿着这个控件重新熟悉了一下自定义控件的流程和思维方式，自定义控件在Android中算是一个基础技能，熟悉自定义控件，可以在原生控件无法满足需求的情况下游刃有余，下面来看看这个简单的自定义控件是如何实现的。 Body         效果         首先，要做的是一个半圆环控件，类似汽车速度仪表盘...
Android车载之仪表盘功能实现一
最新发布
平头哥
06-15 225
这里用的是RotateAnimation，或者用ObjectAnimator也可以（如下图）。。。。。。
Android自定义View实现仪表盘
qq_41008818的博客
12-30 1238
Android自定义View实现仪表盘
自定义View：圆形仪表盘，实现展示不同级别范围
守望君的自留地
03-28 1125
一、前言公司项目需要实现一个类似圆形仪表盘，展示不同级别范围的View，本着不重复造轮子的原则，Google了一番愣是没有找到到合适的，于是只能撸起袖子自己干。先来看最终效果图：文末会附上源码链接。二、用法 1.布局文件引入： <com.ganxin.circlerangeview.CircleRangeView android:id="@+id/circleRangeView
android自定义速度仪表盘,GitHub - woxingxiao/DashboardView: Android自定义仪表盘View，仿新旧两版芝麻信用分、炫酷汽车速度仪表盘...
weixin_42601547的博客
05-25 597
仪表盘、仿芝麻信用(新旧两版)、炫酷汽车速度仪表该项目用于相互交流学习自定义仪表盘控件。由于仪表盘控件可变属性太多，抽成一个libaray未必能满足广阔的需求，因此实现了不同的style，若有style适合项目可直接在其基础上改动。前期模仿了一些比较常见的样式，将来若有新样式会逐渐加入。##Screenshot欢迎fork or star##LicenseThe MIT License (MIT)...
Android自定义View制作仪表盘界面
09-01
在Android开发中，自定义View是一项重要的技能，它允许开发者创造出独特且富有个性化的用户界面。本篇文章将详细讲解如何利用Android自定义View来构建一个仪表盘界面。 首先，我们来了解一下自定义仪表盘界面的基本...
android模拟汽车仪表盘
07-15
在Android平台上，模拟汽车仪表盘是一项技术挑战与创新并存的任务。这涉及到多个技术领域，如图形渲染、动画处理、用户交互以及自定义视图的创建。本文将深入探讨如何利用Android开发工具和技术来实现一个酷炫的汽车...
Android自定义View实现渐变色仪表盘
08-26
Android自定义View实现渐变色仪表盘 Android自定义View是Android开发中一个重要的知识点，通过自定义View可以实现各种复杂的图形绘制，并且可以满足不同的需求。今天，我们将主要介绍Android自定义View实现渐变色...
Android 自定义View仪表盘
04-05
在Android开发中，自定义View是一项重要的技能，它允许开发者根据特定需求创建独特且功能丰富的用户界面组件。本文将深入探讨如何实现一个自定义的仪表盘View，基于SuperKung的DashboardView项目，该示例提供了一个...
android：仪表盘（简单易实现）
08-26
很多仪表盘的例子比较复杂，我这个仪表盘的例子将一部分复杂成分转移给了美工人员，而在代码上非常简单明了。
Android的一款自定义的仪表盘控件
07-29
android一款仪表盘控件,测试可以安装。具体如何整合到你的应用，查看我的博客文章
01表盘控件-02圆弧仪表盘-gaugearc
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
09-11 963
一、运行效果 二、功能特点 可设置范围值，支持负数值。 可设置精确度，最大支持小数点后3位。 可设置大刻度数量、小刻度数量。 可设置开始旋转角度、结束旋转角度。 可设置是否启用动画效果以及动画效果每次移动的步长。 可设置外圆背景、内圆背景、饼圆三种颜色、刻度尺颜色、文字颜色。 自适应窗体拉伸、刻度尺、文字自动缩放。 可自由拓展各种渐变色，各圆的半径。 指示器样式可选择圆形指示器、指针指示器、圆角指针指示器、三角形指示器。 三、公共接口 public Q_SLOTS: //设置范围值 v
Android模拟汽车仪表盘
guokehello的专栏
07-15 6640
界面酷炫的Android模拟汽车仪表盘
Android画一个半圆的仪表盘，类似于实现流量监控的那种 ，有没有大神做过的？底部图片用画的，不要图片、
nuonie1803的博客
12-31 1426
效果如图，有没有大神画过的、
Android 仪表盘开发案例
shi450561200的博客
12-30 1482
https://download.csdn.net/download/shi450561200/87452564 b. 在activity 或者fragment中使用即可 4、胎压仪表盘 5、soc进度条
Android 仿仪表盘进度自定义view
weixin_43797914的博客
01-17 489
仿照仪表盘的自定义view，带有半圆进度，带有进度指针。直接贴代码拿过去直接用，里面需要修改的可以定义外部传参接口，然后传入数据刷新。整个进度的宽度，角度长度都是可以改变的，前面的圆球也是可以改变的。展示当前进度文字，和提示状态
Android仪表盘开发
u010663063的专栏
03-13 893
首先,上效果图 本文大部分代码改自：http://blog.csdn.net/xiaanming/article/details/10298163
android 自定义温度仪表盘
05-11
因此，需要运用到 Android 的相关知识和技巧，如 View 组件、Canvas 绘图、资源文件等等。在这个过程中，技术架构方面我们需要先确定该 APP 对于用户需求的具体响应方式，结合用户的操作反馈做出相应的设计。 其次...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值