自定义仪表盘形状的View

最新推荐文章于 2024-05-03 15:29:51 发布
原创 最新推荐文章于 2024-05-03 15:29:51 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#仪表盘 #自定义控件

本文详细介绍了一种自定义仪表盘View的绘制方法，包括定义属性、获取属性、重写onMeasure方法及具体绘制过程等内容。

这里写图片描述
写到这里已经写了七篇的自定义View的文章，前段时间朋友让帮忙绘制一个类似仪表盘形状的View，先看整个View的形状有两个圆环，和一个弧，还有线状的指针。

  1. 首先添加需要定义的属性。
    在values下新建一个attr文件添加需要设置属性
<attr name="innerCircleColor" format="color" />
<attr name="innerCircleSize" format="dimension" />
<attr name="outCircleSize" format="dimension" />
<attr name="smallCircleSize" format="dimension" />
<attr name="smallCircleRadiousSize" format="dimension"/>
    <declare-styleable name="CircleView">
        <attr name="innerCircleColor" />
        <attr name="innerCircleSize" />
        <attr name="outCircleSize" />
        <attr name="smallCircleSize" />
        <attr name="smallCircleRadiousSize"/>
    </declare-styleable>

innerCircleColor是内部大圆的颜色，因为整个View只是单一的颜色就单设置了一个颜色。innerCircleSize是内部大圆的宽度，outCircleSize是外部圆弧的宽度，smallCircleRadiousSize是外部空心圆的半径，smallCircleSize是内部实心圆与外部空心圆的距离。
2. 获取自定义的属性。

public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CircleView, defStyleAttr, 0);
int n = a.getIndexCount();
for (int i = 0; i < n; i++) {
int arr = a.getIndex(i);
  switch (arr) {
   case R.styleable.CircleView_innerCircleColor:
    innerColor = a.getColor(arr, Color.BLUE);
                    break;
case R.styleable.CircleView_innerCircleSize:
 innerCircleSize = a.getDimensionPixelSize(arr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics()));
                    break;
 case R.styleable.CircleView_outCircleSize:
outCircleSize = a.getDimensionPixelSize(arr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics()));
                    break;
 case R.styleable.CircleView_smallCircleSize:
  outSmallCircleSize = a.getDimensionPixelSize(arr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics()));
                    break;
 case R.styleable.CircleView_smallCircleRadiousSize:
outSmallCircleRadiousSize = a.getDimensionPixelSize(arr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics()));
                    break;
            }
        }
        a.recycle();
        init();

在init方法里面初始化了画笔和画弧需要的矩形。

   private void init() {
        mInnerPaint = new Paint();
        mOutArcPaint = new Paint();
        mOutCirclePaint = new Paint();
        linePaint = new Paint();
        mOutRectf = new RectF();
    }

3.然后重写onMeasure方法。
都是一样的套路，没什么好说的直接贴代码了。

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        if (widthMode == MeasureSpec.EXACTLY) {
            width = widthSize;
        } else {
            width = getPaddingLeft() + getPaddingRight() + (int) mOutRectf.width();
        }
        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        } else {
            height = getPaddingBottom() + getPaddingTop() + (int) mOutRectf.height();
        }
        setMeasuredDimension(width, height);
    }

4.最后是onDraw方法里面的具体绘制

  @Override
    protected void onDraw(Canvas canvas) {
        int center = getWidth() / 2;
        canvas.rotate(-45, center, center);
        LinearGradient linearGradient;
        if (unitDrgee < 90) {
 linearGradient = new LinearGradient(0, 0,getMeasuredWidth(), getMeasuredHeight(), gradientColorArray, null, Shader.TileMode.CLAMP);
        } else {
            linearGradient = new LinearGradient(0, 0, getMeasuredWidth(), getMeasuredHeight(), gradientColorArrayother, null, Shader.TileMode.CLAMP);

        }
        mInnerPaint.setShader(linearGradient);
        /**
         * 先画内圆
         */
        mInnerPaint.setAntiAlias(true);
        mInnerPaint.setStyle(Paint.Style.STROKE);
        mInnerPaint.setStrokeWidth(innerCircleSize);
        int radious = center - outSmallCircleRadiousSize * 2 - innerCircleSize / 2;
        canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, radious, mInnerPaint);

/**
 * 外圆
 */
        mOutArcPaint.setShader(linearGradient);
        mOutArcPaint.setAntiAlias(true);
        mOutArcPaint.setStrokeWidth(outCircleSize);
        mOutArcPaint.setStyle(Paint.Style.STROKE);
        mOutRectf.left = outSmallCircleRadiousSize;
        mOutRectf.top = outSmallCircleRadiousSize;
        mOutRectf.right = getWidth() - outSmallCircleRadiousSize;
        mOutRectf.bottom = getHeight() - outSmallCircleRadiousSize;
        mOutArcPaint.setStrokeCap(Paint.Cap.ROUND);
        canvas.drawArc(mOutRectf, 180, unitDrgee, false, mOutArcPaint);
        /**
         * 画刻度线
         */
        linePaint.setColor(Color.WHITE);
        linePaint.setAntiAlias(true);
        linePaint.setStyle(Paint.Style.FILL);
        linePaint.setStrokeWidth(5);
        canvas.drawLine(outSmallCircleRadiousSize * 2, center, outSmallCircleRadiousSize * 2 + (innerCircleSize * 3 / 4), center, linePaint);

        /**
         * 画小圆
         */
        mOutCirclePaint.setShader(linearGradient);
        mOutCirclePaint.setAntiAlias(true);
        mOutCirclePaint.setStyle(Paint.Style.STROKE);
        mOutCirclePaint.setStrokeWidth(10);
        float[] r = calculateBallCenter();
        canvas.drawCircle(r[0], r[1], outSmallCircleRadiousSize, mOutCirclePaint);
        mOutCirclePaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(r[0], r[1], outSmallCircleRadiousSize - outSmallCircleSize, mOutCirclePaint);
        float angle = 0;
        while (angle < unitDrgee) {
            canvas.drawLine(outSmallCircleRadiousSize * 2 + 10, center, outSmallCircleRadiousSize * 2 + (innerCircleSize * 3 / 4), center, linePaint);
            canvas.rotate(5, center, center);
            angle += 5;
        }
        canvas.drawLine(outSmallCircleRadiousSize * 2, center, outSmallCircleRadiousSize * 2 + (innerCircleSize * 3 / 4), center, linePaint);

    }

首先调用了 canvas.rotate(-45, center, center)的方法，为了使外层圆弧的位置在135度处，这里使画布旋转了-45度角。然后设置了整个View的绘制渐变颜色使用LinearGradient线性渐变的Api。

 if (unitDrgee < 90) {
            linearGradient = new LinearGradient(0, 0, getMeasuredWidth(), getMeasuredHeight(), gradientColorArray, null, Shader.TileMode.CLAMP);
        } else {
            linearGradient = new LinearGradient(0, 0, getMeasuredWidth(), getMeasuredHeight(), gradientColorArrayother, null, Shader.TileMode.CLAMP);

        }
        mInnerPaint.setShader(linearGradient);

，然后画内圆。

  mInnerPaint.setAntiAlias(true);
        mInnerPaint.setStyle(Paint.Style.STROKE);
        mInnerPaint.setStrokeWidth(innerCircleSize);
        int radious = center - outSmallCircleRadiousSize * 2 - innerCircleSize / 2;
        canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, radious, mInnerPaint);

然后画外层圆弧的位置：

 mOutArcPaint.setShader(linearGradient);
        mOutArcPaint.setAntiAlias(true);
        mOutArcPaint.setStrokeWidth(outCircleSize);
        mOutArcPaint.setStyle(Paint.Style.STROKE);
        mOutRectf.left = outSmallCircleRadiousSize;
        mOutRectf.top = outSmallCircleRadiousSize;
        mOutRectf.right = getWidth() - outSmallCircleRadiousSize;
        mOutRectf.bottom = getHeight() - outSmallCircleRadiousSize;
        mOutArcPaint.setStrokeCap(Paint.Cap.ROUND);
        canvas.drawArc(mOutRectf, 180, unitDrgee, false, mOutArcPaint);

然后画刻度线：

 linePaint.setColor(Color.WHITE);
        linePaint.setAntiAlias(true);
        linePaint.setStyle(Paint.Style.FILL);
        linePaint.setStrokeWidth(5);
        canvas.drawLine(outSmallCircleRadiousSize * 2, center, outSmallCircleRadiousSize * 2 + (innerCircleSize * 3 / 4), center, linePaint);

然后分别画外层的大圆和内部的小圆：

 /**
         * 画小圆
         */
        mOutCirclePaint.setShader(linearGradient);
        mOutCirclePaint.setAntiAlias(true);
        mOutCirclePaint.setStyle(Paint.Style.STROKE);
        mOutCirclePaint.setStrokeWidth(10);
        float[] r = calculateBallCenter();
        canvas.drawCircle(r[0], r[1], outSmallCircleRadiousSize, mOutCirclePaint);
        mOutCirclePaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(r[0], r[1], outSmallCircleRadiousSize - outSmallCircleSize, mOutCirclePaint);

再画外部圆的时候，首先根据旋转的弧度确定圆心的位置：

  /**
     * 计算外圆圆心位置
     *
     * @return
     */
    private float[] calculateBallCenter() {
        float[] center = new float[2];
        float dy = (float) (Math.sin(Math.toRadians(unitDrgee)) * (getWidth() / 2 - outSmallCircleRadiousSize));
        float dx = (float) (Math.cos(Math.toRadians(unitDrgee)) * (getWidth() / 2 - outSmallCircleRadiousSize));
        center[0] = getWidth() / 2 - dx;
        center[1] = getWidth() / 2 - dy;
        return center;
    }

最后便是通过不断的旋转弧度循环画刻度线：

  float angle = 0;
        while (angle < unitDrgee) {
            canvas.drawLine(outSmallCircleRadiousSize * 2 + 10, center, outSmallCircleRadiousSize * 2 + (innerCircleSize * 3 / 4), center, linePaint);
            canvas.rotate(5, center, center);
            angle += 5;
        }

基本的都绘制完之后，这里通过属性动画的完成度做了一个加载动画。:

 private void setAnimation() {
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
        valueAnimator.setDuration(5000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float value = (float) valueAnimator.getAnimatedValue();
                percentage = progress * value;
                if (addUpdateListener != null) {
                    addUpdateListener.onAddUpdateListener(value);
                }
                updateProgress();
            }
        });
        valueAnimator.start();
    }

基本重要的代码都说完了，觉得好的可以看下源码

ljngya
关注
自定义View实现仪表盘(账户安全)
MAGIC
08-28 1405
转载请注明出处：http://blog.csdn.net/magic_jss/article/details/52348392； 群里聊天一哥们发的一个自定义View感觉很perfection，于是就根据他发的图写了个类似的效果。一个仪表盘，描述用户的账号安全等级。希望能够帮助到需要类似效果的猿/媛们，如果存在什么问题恳请指正！效果图： 模拟器上运行效果可能有点差，真机上就比较清晰了。1、自定义
自定义view 仪表盘
01-09
http://blog.csdn.net/u012840567/article/details/54288937 原文地址，图文详解
自定义仪表盘PaneView
Android茶话会
01-24 4667
自定义仪表盘PaneView
自定义View画仪表盘（可画指针，可在中间写刻度值）
时代新人的博客
10-24 1205
自定义View 画仪表盘，其实很好画，代码里都加了注释了，这里就不多写了，根据实际需要改动就可以，可区分不同刻度区域的，一个是带指针的，一个是不带指针在刻度盘中间写实际数值的，先来张示例图看下： 画这个仪表盘的步骤： 1、先获取控件区域的宽高，然后找到圆心点以及圆的半径： int minimumWidth = getSuggestedMinimumWidth(); int minimumHeight = getSuggestedMinimumHeight(); m...
自定义View实战（一） 汽车速度仪表盘
热门推荐
103style
05-11 1万+
自定义View实战（一） 汽车速度仪表盘  转载请以链接形式标明出处：  http://blog.csdn.net/lxk_1993/article/details/51373269 本文出自:【lxk_1993的博客】；  废话不说  先上效果图。   是不是很酷炫. 看起来觉得很难？  不难 ， 其实实现起来很容易。 思路： 1.绘
Android 自定义View之八等份仪表盘
梦工厂
08-31 4542
效果图实现思路首先拆解这个View，可以分成四个部分来绘制 外圆刻度部分，包含最外面的刻度圆和里面对应的数值，此外圆分为八个等份，每等份中包含五个小等份，所以总共需要40个刻度。这里不是一个完整的圆，此外圆部分占一个完整圆的240度 内圆刻度部分，此处总共有100个刻度，与外圆刻度保持着对应关系，进度发生改变时需要改变对应部分的颜色，超过外圆刻度6部分的颜色需要变成红色 指针部分，指针由一个中间的圆
安卓仪表盘效果相关-一个自定义view的仪表盘.rar
07-29
`onDraw()`方法是Android系统用来绘制View的入口点，开发者可以在这里绘制各种形状，如圆环、指针、刻度等，以实现仪表盘的外观。 在自定义View时，通常会用到以下关键概念和技术： 1. **图形绘制**：Android提供...
Android自定义view之仿支付宝芝麻信用仪表盘示例
01-20
本示例将详细解析如何自定义一个模仿支付宝芝麻信用仪表盘的View。 首先，我们需要在XML资源文件中定义自定义View的属性。在`<resources>`标签内，我们创建了一个名为`RoundIndicatorView`的`declare-styleable`，...
Android 自定义View仪表盘
04-05
本文将深入探讨如何实现一个自定义的仪表盘View，基于SuperKung的DashboardView项目，该示例提供了一个简洁而常见的Android自定义View实现。 首先，我们从标题"Android 自定义View仪表盘"入手，理解这个自定义View...
MeterView自定义View进度条仪表盘
10-31
3. **布局**: `onLayout()`方法用于确定View在父容器中的位置，但在这个自定义仪表盘中，这个步骤可能并不涉及，因为仪表盘通常是圆形，不需要精确的布局坐标。 4. **绘制**: 最关键的`onDraw()`方法中，使用Canvas...
Qt 自定义控件 云台仪表盘控件
09-18
对于云台仪表盘，我们可能会选择继承QGraphicsView，因为它允许我们在2D平面上自由绘制复杂的图形，非常适合制作仪表盘界面。 云台仪表盘控件的关键组件包括： 1. **刻度盘**：这是仪表盘的基础，通常由一系列刻度...
C#自定义控件之Winform仪表盘控件.zip
11-08
通过自定义控件，编程实现的仪表盘形状的控件，可以加到Winform程序里做动态显示数据，美化界面。使用方便简单。
时钟，指南针，水平仪表盘
04-13
时钟，指南针，水平仪表盘
2024年Python函数定义-位置参数-返回值_定义函数返回元素定位的内容，2024年最新2024年阿里Python高级面试题分享
最新发布
m0_63102527的博客
05-03 260
Python崛起并且风靡，因为优点多、应用领域广、被大牛们认可。学习 Python 门槛很低，但它的晋级路线很多，通过它你能进入机器学习、数据挖掘、大数据，CS等更加高级的领域。Python可以做网络应用，可以做科学计算，数据分析，可以做网络爬虫，可以做机器学习、自然语言处理、可以写游戏、可以做桌面应用…Python可以做的很多，你需要学好基础，再选择明确的方向。这里给大家分享一份全套的 Python 学习资料，给那些想学习 Python 的小伙伴们一点帮助！
Android自定义View实现仪表盘
qq_41008818的博客
12-30 1443
Android自定义View实现仪表盘
【Python】PyQt5 使用QPainter绘制简易仪表盘
qq_43950000的博客
11-12 5984
使用QPainter 制作简易仪表盘，绘制三色环、刻度线、刻度值、指针等。
PYQT5 Qpainter绘制仪表盘
Xu_sa_sa的博客
08-30 764
【代码】PYQT5 Qpainter绘制仪表盘。
使用PYQT5简单制作动态仪表盘
xulibo5828的博客
09-17 974
【代码】使用PYQT5简单制作动态仪表盘。
pyqt绘制仪表盘
weixin_49577420的博客
10-08 1240
pyqt绘制仪表盘，练习pyqt如何绘制图像，该文章不是本人原创。
Android自定义仪表盘控件开发指南
在自定义仪表盘中，绘制阶段常常涉及到绘制各种图形（如圆形、弧形）以及动态更新的数据展示。 6. **动画与数据更新：** 动态仪表盘常常会涉及到数据的实时更新以及动画效果的展示。在Android中，可以使用属性动画...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值