自定义汽车仪表盘样式

最新推荐文章于 2024-04-02 15:01:20 发布
最新推荐文章于 2024-04-02 15:01:20 发布
阅读量569 收藏 1
点赞数
分类专栏： android 文章标签： Android view 汽车仪表盘 animation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30192407/article/details/98855734
版权

文章目录

view 代码

package qzl.com.wangjun.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by lumingmin on 16/5/27.
 */
public class RingView extends View {

    private RingViewAnim mRingViewAnim;
    private int animDuration = 2500;

    private Paint ringPaint;
    private Paint ringProgerssPaint;
    private Paint scalePaint;
    private Paint scalePaint_s;

    private Paint textPaint;

    private Paint progerssPaint;

    private Paint pointPaint;


    private float startAngle = -205f;
    private float sweepAngle = 230f;

    private float pointAngle = -205f;
    private float pointAngle_show = -205f;


    private int sWidthringPaint = 0;
    private int sWidthprogerssPaint = 0;
    private int textPaintSize = 0;
    private int progerssPaintSize = 0;
    private int pointShadowLayer = 0;
    private int pointPaintSize = 0;
    //默认颜色
    int rgbColor = Color.rgb(22, 231, 205);


    private List<Integer> valueList = new ArrayList<>();
    private List<String> valueNameList = new ArrayList<>();


    private RectF fring;
    private RectF fprogerss;
    private RectF fprogerssPath;
    private Path path;
    private int mValue = 0;
    private int mCopeValue = 0;
    private String mShowValue = "";
    private OnProgerssChange mOnProgerssChange;
    Path pathPoint=new Path();

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

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

    public RingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
//        setBackgroundColor(getResources().getColor(android.R.color.transparent));

        mRingViewAnim = new RingViewAnim();
        mRingViewAnim.setDuration(animDuration);


        progerssPaintSize = dip2px(getContext(), 50f);
        textPaintSize = dip2px(getContext(), 8f);
//        最外面圈的背景宽度
        sWidthringPaint = dip2px(getContext(), 1.5f);
//        内圈阴影宽度
        sWidthprogerssPaint = dip2px(getContext(), 7.0f);
        pointPaintSize = dip2px(getContext(), 2.0f);
        pointShadowLayer = dip2px(getContext(), 2.5f);
        //外圈设置
        ringPaint = new Paint();
        ringPaint.setAntiAlias(true);
        ringPaint.setStyle(Paint.Style.STROKE);
        ringPaint.setStrokeWidth(sWidthringPaint);
        ringPaint.setColor(rgbColor);

        //内圈阴影效果设置
        ringProgerssPaint = new Paint();
        ringProgerssPaint.setAntiAlias(true);
        ringProgerssPaint.setStyle(Paint.Style.STROKE);
        ringProgerssPaint.setStrokeWidth(sWidthprogerssPaint);
        ringProgerssPaint.setColor(Color.argb(66, 22, 231, 205));

        //指针标志
        scalePaint = new Paint();
        scalePaint.setAntiAlias(true);
        scalePaint.setStyle(Paint.Style.STROKE);
        scalePaint.setStrokeWidth(sWidthprogerssPaint);
        scalePaint.setColor(Color.argb(150, 22, 231, 205));

        //短线条
        scalePaint_s = new Paint();
        scalePaint_s.setAntiAlias(true);
        scalePaint_s.setStyle(Paint.Style.STROKE);
        scalePaint_s.setStrokeWidth(sWidthprogerssPaint / 2);
        scalePaint_s.setColor(Color.argb(85, 22, 231, 205));


        textPaint = new Paint();
        textPaint.setAntiAlias(true);
        textPaint.setStyle(Paint.Style.FILL);
        textPaint.setColor(Color.argb(180, 146, 204, 255));
        textPaint.setTextSize(textPaintSize);


        progerssPaint = new Paint();
        progerssPaint.setAntiAlias(true);
        progerssPaint.setStyle(Paint.Style.FILL);
        progerssPaint.setColor(Color.WHITE);
        progerssPaint.setTextSize(progerssPaintSize);


        pointPaint = new Paint();
        pointPaint.setAntiAlias(true);
        pointPaint.setStyle(Paint.Style.FILL);
        pointPaint.setColor(Color.WHITE);


    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.save();
        if (fring == null)
            fring = new RectF(sWidthringPaint + pointShadowLayer, sWidthringPaint + pointShadowLayer,
                    getMeasuredWidth() - sWidthringPaint - pointShadowLayer, getMeasuredWidth() - sWidthringPaint - pointShadowLayer);
        if (fprogerss == null)
            fprogerss = new RectF(sWidthprogerssPaint * 2, sWidthprogerssPaint * 2, getMeasuredWidth() - sWidthprogerssPaint * 2, getMeasuredWidth() - sWidthprogerssPaint * 2);

        if (fprogerssPath == null)
            fprogerssPath = new RectF(sWidthprogerssPaint * 2 + sWidthprogerssPaint,
                    sWidthprogerssPaint * 2 + sWidthprogerssPaint,
                    getMeasuredWidth() - sWidthprogerssPaint * 2 - sWidthprogerssPaint,
                    getMeasuredWidth() - sWidthprogerssPaint * 2 - sWidthprogerssPaint);
        if (path == null) {
            path = new Path();
            path.addOval(fprogerssPath, Path.Direction.CW);
        }
        canvas.drawArc(fring, startAngle, sweepAngle, false, ringPaint);
        canvas.drawArc(fprogerss, startAngle, sweepAngle, false, ringProgerssPaint);



        for (int i = 0; i < valueList.size(); i++) {
            float unit = sweepAngle / (valueList.size() - 1);
            float startAngleBig = startAngle + unit * i;
            float x = (float) (getMeasuredWidth() / 2 + (fprogerss.width() / 2 - sWidthprogerssPaint) * Math.cos(startAngleBig * Math.PI / 180));
            float y = (float) (getMeasuredWidth() / 2 + (fprogerss.width() / 2 - sWidthprogerssPaint) * Math.sin(startAngleBig * Math.PI / 180));
            canvas.drawArc(fprogerss, startAngleBig, 0.5f, false, scalePaint);
            String value = valueList.get(i) + "";
            textPaint.setColor(rgbColor);
            textPaint.setTextSize(dip2px(getContext(), 12f));
            canvas.drawTextOnPath(value, path,
                    (float) (Math.PI * fprogerssPath.width() * ((startAngleBig + 360) % 360) / 360) - getFontlength(textPaint, value) / 2,
                    getFontHeight(textPaint) / 2, textPaint);
            if (i <= valueNameList.size() - 1) {
                textPaint.setColor(Color.argb(180, 146, 204, 255));

                String name = valueNameList.get(i);
                canvas.drawTextOnPath(name, path,
                        (float) (Math.PI * fprogerssPath.width() * ((startAngleBig + unit / 2 + 360) % 360) / 360) - getFontlength(textPaint, name) / 2,
                        getFontHeight(textPaint) / 2, textPaint);

            }
            if (i < valueList.size() - 1) {

                float unitSmall = unit / 5;
                for (int j = 1; j < 5; j++) {
                    canvas.drawArc(fprogerss, startAngleBig + unitSmall * j, 0.2f, false, scalePaint_s);
                }
            }
        }

        if (!isPointer) {
            float xPoint = (float) (getMeasuredWidth() / 2 + (fring.width() / 2) * Math.cos(pointAngle_show * Math.PI / 180));
            float yPoint = (float) (getMeasuredWidth() / 2 + (fring.width() / 2) * Math.sin(pointAngle_show * Math.PI / 180));
//            pointPaint.setShadowLayer(pointShadowLayer, 0, 0, Color.WHITE);//设置阴影
            pointPaint.setColor(Color.argb(80,255,255,255));
            canvas.drawCircle(xPoint, yPoint, pointPaintSize+8, pointPaint);
            pointPaint.setColor(Color.WHITE);

            canvas.drawCircle(xPoint, yPoint, pointPaintSize, pointPaint);
            progerssPaint.setTextSize(progerssPaintSize);


            canvas.drawText(mShowValue, getMeasuredWidth() / 2 - getFontlength(progerssPaint, mShowValue) / 2, getMeasuredWidth() / 2, progerssPaint);
        } else {

            float xPoint = (float) (getMeasuredWidth() / 2 + (fring.width() / 3) * Math.cos(pointAngle_show * Math.PI / 180));
            float yPoint = (float) (getMeasuredWidth() / 2 + (fring.width() / 3) * Math.sin(pointAngle_show * Math.PI / 180));

            canvas.drawCircle(getMeasuredWidth() / 2,getMeasuredWidth()/2,dip2px(getContext(),5f),pointPaint);
            canvas.drawCircle(getMeasuredWidth() / 2,getMeasuredWidth()/2,dip2px(getContext(),8f),pointPaint);

            float xPoint2 = (float) (dip2px(getContext(),5f) * Math.cos((pointAngle_show+90) * Math.PI / 180));
            float yPoint2 = (float) (dip2px(getContext(),5f)* Math.sin((pointAngle_show +90)* Math.PI / 180));

            float xPoint3 = (float) (dip2px(getContext(),5f) * Math.cos((pointAngle_show-90) * Math.PI / 180));
            float yPoint3 = (float) (dip2px(getContext(),5f) * Math.sin((pointAngle_show-90) * Math.PI / 180));

            pathPoint.reset();
            pathPoint.moveTo(xPoint,yPoint);

            pathPoint.lineTo(getMeasuredWidth() / 2-xPoint2,getMeasuredWidth() / 2-yPoint2);

            pathPoint.lineTo(getMeasuredWidth() / 2-xPoint3,getMeasuredWidth() / 2-yPoint3);
            pathPoint.close();
            canvas.drawPath(pathPoint,pointPaint);
            progerssPaint.setTextSize(progerssPaintSize*2/3);

            canvas.drawText(mShowValue, getMeasuredWidth() / 2 - getFontlength(progerssPaint, mShowValue) / 2,
                    getMeasuredWidth() / 2+getFontHeight(progerssPaint)*1.5f, progerssPaint);

            pointPaint.setColor(Color.argb(80,255,255,255));
            canvas.drawCircle(getMeasuredWidth() / 2,getMeasuredWidth()/2,dip2px(getContext(),12f),pointPaint);
            pointPaint.setColor(Color.WHITE);
        }
        canvas.restore();
    }


    public int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    public float getFontlength(Paint paint, String str) {
        return paint.measureText(str);
    }

    public float getFontHeight(Paint paint) {
        Paint.FontMetrics fm = paint.getFontMetrics();
        return fm.descent - fm.ascent;
    }


    private int distance;
    public void setValue(int value, OnProgerssChange onProgerssChange, int duration) {
        this.animDuration = duration;
        this.mValue = value;
        this.mOnProgerssChange = onProgerssChange;
        if (mRingViewAnim != null)
            clearAnimation();

        mRingViewAnim.setDuration(animDuration);
        startAnimation(mRingViewAnim);
        //从0开始不需要下面的这些内容
        if (mCopeValue == 0){
            distance = mValue;
        }else {
            distance = mValue - mCopeValue;
        }
        pointAngle = pointAngle_show;
    }


    public void setValueList(List<Integer> list) {
        valueList.clear();
        valueList.addAll(list);

    }

    public void setValueNameList(List<String> list) {
        valueNameList.clear();
        valueNameList.addAll(list);
    }


    private class RingViewAnim extends Animation {
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            super.applyTransformation(interpolatedTime, t);
            //每次都从0开始旋转
            /*if (valueList.size() > 0) {
                pointAngle_show = startAngle + interpolatedTime * sweepAngle / (valueList.get(valueList.size() - 1) - valueList.get(0)) * (mValue - valueList.get(0));
                mShowValue = String.valueOf((int) (valueList.get(0) + (mValue - valueList.get(0)) * interpolatedTime));
                invalidate();
                if (mOnProgerssChange != null)
                    mOnProgerssChange.OnProgerssChange(interpolatedTime);
            }*/
            if (valueList.size() > 0) {
                pointAngle_show = pointAngle +
                            interpolatedTime * sweepAngle / (valueList.get(valueList.size() - 1)) * (distance);
                mCopeValue = mValue;
                mShowValue = String.valueOf((int) (valueList.get(0) + (mValue - valueList.get(0)) * interpolatedTime));
                invalidate();
                if (mOnProgerssChange != null)
                    mOnProgerssChange.OnProgerssChange(interpolatedTime);
            }
        }
    }

    public interface OnProgerssChange {
        void OnProgerssChange(float interpolatedTime);
    }

    boolean isPointer = false;

    public void setPointer(boolean pointer) {
        this.isPointer = pointer;
    }


}

布局文件中使用

<qzl.com.wangjun.view.RingView
    android:id="@+id/rv_view"
    android:layout_centerInParent="true"
    android:layout_width="wrap_content"
    android:layout_height="200dp"
    />

主activity中调运

private void start(int value) {

        float f = (value - valueList.get(0)) * 1.0f / (valueList.get(valueList.size() - 1) - valueList.get(0));

        rv_view.setValue(value, new RingView.OnProgerssChange() {
            @Override
            public void OnProgerssChange(float interpolatedTime) {
            }
        },(int)(f*animDuration));
    }

效果图

善良的爱心话
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
C#做的漂亮的仪表盘。(含源代码)
11-20
C#做的漂亮的仪表盘，拖动滚动条仪表盘自动变化，适合工业控制，此控件用来来显示仪表的状态。各个形状都有！
自定义汽车仪表盘
し☆ぴの筱磊
06-19 781
自定义汽车仪表盘效果图： 自定义汽车仪表盘效果图 获取控件的宽高 初始化画笔 画圆弧 绘制文本 画刻度 画指针 下载地址获取控件的宽高 @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh);
自定义View-汽车表盘
danity
12-28 892
连接地址
Android自定义view之仿支付宝芝麻信用仪表盘 ---by ccy
勇朝陈的博客
11-20 8047
自定义view练习 仿支付宝芝麻信用的仪表盘 对比图： 首先是自定义一些属性，可自己再添加，挺基础的，上代码 接着在构造方法里初始化自定义属性和画笔： private void initAttr
Android汽车仪表盘android,汽车，仪表盘，自定义View
06-24
使用SurfaceView 去刷新仪表的指针。可以直接导入eclipse中运行。
Android自定义汽车仪表
06-21
本话题聚焦于"Android自定义汽车仪表"，这通常涉及到创建一个模仿真实汽车仪表盘的用户界面，包括速度表、转速表、油量指示器等元素。在Android应用中实现这样的功能，开发者需要深入理解Android图形绘制、动画和...
Android 自定义View 仪表盘
01-25
使用`attrs.xml`定义自定义属性，如仪表盘的最大值、最小值、指针颜色、刻度样式等。在Java代码中通过`TypedArray`获取这些属性值，以实现可配置的仪表盘。 4. **动画效果**： 要使仪表盘指针动态旋转，可以使用`...
Android自定义View制作仪表盘界面
09-01
首先，我们来了解一下自定义仪表盘界面的基本步骤。制作这样一个界面，我们需要自定义View的属性，并在构造方法中获取这些属性。在XML布局文件中定义这些属性可以使我们在多个地方重用该自定义View，并通过样式文件...
QT自定义仪表盘yibiaopan.zip
11-20
QT自定义仪表盘是一种在软件开发中利用QT框架创建具有个性化和专业化显示效果的界面组件。QT是一个跨平台的应用程序开发框架，支持多种操作系统，包括Windows、Linux、macOS等。它提供了丰富的图形用户界面（GUI）...
echarts汽车仪表盘动画效果
07-24
ECharts是一款由百度开发的免费、开源的JavaScript图表库，它提供了丰富的图表类型，如柱状图、折线图、饼图以及各种自定义的图形，包括我们这里讨论的仪表盘。在汽车仪表盘动画效果中，ECharts被用来模拟真实的汽车...
android模拟汽车仪表盘
07-15
android模拟汽车仪表盘，很酷炫的界面效果
c#仪表盘控件,非常漂亮
12-26
c#仪表盘控件,非常漂亮 c#仪表盘控件,非常漂亮
WpfGauge仪表盘控件（可自定义仪表范围）
02-03
原版WpfGauge仪表控件的仪表盘范围不可修改，是随当前值自动调整范围，而如果想实现可自定义固定范围，如汽车仪表盘，需要对源代码进行些许修改。本资源已实现自定义仪表盘的范围。
自定义View实战（一） 汽车速度仪表盘
05-11
自定义View实战（一） 汽车速度仪表盘 . 自定义View实战（一） 汽车速度仪表盘 . 自定义View实战（一） 汽车速度仪表盘 .
Android 自定义仪表盘
莫翊痕的博客
04-19 5365
实现效果: 项目需要一个实时显示车速的仪表盘,没找到合适的控件,就自己写了一个.记录下,以后方便查看. import android.animation.ValueAnimator; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.LinearGradient; import android.graphics.Matr
仪表盘css_使用CSS和Java来构建管理仪表盘布局
Web design 教程小屋
07-10 648
您将要创造的 在这个新教程中，我们将使用CSS和JavaScript来创建响应式管理仪表板布局。 要构建它，我们将从WordPress仪表板中借鉴一些想法，例如其可折叠的侧边栏菜单。 在整个教程中，我们将面临许多挑战，但是这些挑战将为我们提供良好的实践技巧，以提高我们的前端技能。 事不宜迟，让我们看一下最终的管理仪表板演示（单击侧边栏底部的“ 折叠”按钮以查看可折叠的导航功能，并查看...
View系列 : View项目：汽车仪表盘，圆盘
C++ JAVA的专栏
03-28 3595
1：汽车仪表盘 2 ：效果分解 汽车 仪表盘
Mindscape WPF Elements构建超炫仪表盘系列教程
outmanleo的专栏
12-20 835
原文转载自慧都控件网：http://www.evget.com/zh-CN/Info/catalog/18242.html 最近对这个WPF Elements比较感兴趣，就关注看一下。本身就是一款还不错的界面控件集，前段时间发布的WPF Elements套包5.1版本，这个版本在图表的性能上面很大的优化，还增加了几个优秀的新功能在数据网上面，感觉还是值得说一下的。这里呢就使用了两个强大的控件来创
echarts仪表盘特殊样式
最新发布
weixin_42630688的博客
04-02 320
【代码】echarts仪表盘特殊样式。
qt自定义控件 仪表盘
06-24
通过自定义仪表盘，可以实现不同样式和功能的展示，并且能够满足不同场景下的需求。 在Qt中，仪表盘的设计可以通过绘图、圆弧、指针和动画的实现，使得界面更加直观、美观，也更加容易被用户理解和操作。可以通过Qt...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值