widthMeasureSpec ，heightMeasureSpec 并不是真正的宽高，看名字就知道，它只是宽高测量的规格，我们通过 MeasureSpec 的一些静态方法，通过它们拿到一些信息。

　　static int getMode(int measureSpec):根据提供的测量值(规格)提取模式(上述三个模式之一)

　　测量的 Model 一共有三种

• UNSPECIFIED(未指定),父元素部队自元素施加任何束缚，子元素可以得到任意想要的大小;
• EXACTLY(完全)，父元素决定自元素的确切大小，子元素将被限定在给定的边界里而忽略它本身大小；
• AT_MOST(至多)，子元素至多达到指定大小的值。

　　我们常用的就是 EXACTLY 和 AT_MOST ，EXACTLY 对应的就是我们设置的match_parent或者300这样的精确值，而 AT_MOST 对应的就是wrap_content。

　　static int getSize(int measureSpec):根据提供的测量值(规格)提取大小值(这个大小也就是我们通常所说的大小)

　　通过此方法就能获取控件的宽度和高度值。

　　static int makeMeasureSpec(int size,int mode):根据提供的大小值和模式创建一个测量值(规格)

　　通过具体的宽高和model，创建对应的宽高测量规格，用于确定View的测量

　　而 onMeasure 的最终设置确定宽度的测量有两种方式，

• setMeasuredDimension(width, height)
• super.onMeasure(widthMeasureSpec,heightMeasureSpec）

　　实战：

　　比如我们的自定义温度刻度View，我们整个View要确保一个正方形，那么就拿到宽度，设置同样的高度，然后确定测量，流程如下：

　　

?

　　

1 　　 2 　　 3 　　 4 　　 5 　　 6 　　 7 　　 8 　　 9 　　 10 　　 11 　　 12 　　 13 　　 14 　　 15 　　 16 　　 17 　　 18 　　 19 　　 20 　　 21 　　 22 　　 23 　　 24 　　 25 　　 26 　　 27 　　 28 　　 29 　　 30 　　 31 　　 32 　　 33 　　 34

//重新测量 　　 @Override 　　 protectedvoidonMeasure(intwidthMeasureSpec, intheightMeasureSpec) { 　　 　　 //获取控件的宽度，高度 　　 intwidthMode = MeasureSpec.getMode(widthMeasureSpec); 　　 intnewWidthMeasureSpec = widthMeasureSpec; 　　 　　 //如果没有指定宽度，默认给200宽度 　　 if(widthMode != MeasureSpec.EXACTLY) { 　　 newWidthMeasureSpec = MeasureSpec.makeMeasureSpec(200, MeasureSpec.EXACTLY); 　　 } 　　 　　 //获取到最新的宽度 　　 intwidth = MeasureSpec.getSize(newWidthMeasureSpec) - getPaddingLeft() - getPaddingRight(); 　　 　　 //我们要的是矩形，不管高度是多高，让它总是和宽度一致 　　 intheight = width; 　　 　　 centerPosition.x = width / 2; 　　 centerPosition.y = height / 2; 　　 radius = width / 2f; 　　 mRectF.set(0f, 0f, width, height); 　　 　　 　　 //最后设置生效-下面两种方式都可以 　　 // setMeasuredDimension(width, height); 　　 　　 super.onMeasure( 　　 MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY), 　　 MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY) 　　 ); 　　 　　 }

　　

　　这里有详细的注释，大致实现的效果如下：

　　

　　

　　

2、绘制刻度

　　由于原本的 Canvas 内部没有绘制刻度这么一说，所以我们只能用绘制线条的方式，就是 drawLine 方法。

　　为了了解到坐标系和方便实现，我们可以先绘制一个圆环，定位我们刻度需要绘制的位置。

　　

　　

?

　　

1 　　 2 　　 3 　　 4 　　 5 　　 6 　　 7 　　 8 　　 9 　　 10

@Override 　　 protectedvoidonDraw(Canvas canvas) { 　　 super.onDraw(canvas); 　　 　　 //画圆环 　　 canvas.drawArc( 　　 mRectF.left + 2f, mRectF.top + 2f, mRectF.right - 2f, mRectF.bottom - 2f, 　　 mStartAngle, mSweepAngle, false, mDegreeCirPaint 　　 ); 　　 }

　　

　　这个圆环是之前讲到过了，就不过多赘述了，实现效果如下：

　　

　　由于开始绘制的地方在左上角位置，我们要移动到圆的中心点开始绘制，也就是红色点移动到蓝色点。

　　我们就需要x轴和y轴做一下偏移 canvas.translate(radius, radius);

　　默认的 drawLine 都是横向绘制，我们想要实现效果图的效果，就需要旋转一下画笔www.lu0.com，也就是用到 canvas.rotate(rotateAngle);

　　那么旋转多少了，如果说最底部是90度，我们的起始角度是120度开始的，我们就起始旋转30度。后面每一次旋转就按照百分比来，比如我们100度的温度，那么就相当于要画100个刻度，我们就用需要绘制的角度除以100，就是每一个刻度的角度。

　　具体的刻度实现代码：

　　

　　

?

　　

1 　　 2 　　 3 　　 4 　　 5 　　 6 　　 7 　　 8 　　 9 　　 10 　　 11 　　 12 　　 13 　　 14 　　 15 　　 16 　　 17 　　 18 　　 19 　　 20 　　 21 　　 22 　　 23 　　 24 　　 25 　　 26 　　 27 　　 28 　　 29 　　 30 　　 31 　　 32 　　 33 　　 34 　　 35 　　 36 　　 37 　　 38 　　 39 　　 40 　　 41 　　 42 　　 43 　　 44

privatefloatmStartAngle = 120f; // 圆弧的起始角度 　　 privatefloatmSweepAngle = 300f; //绘制的起始角度和滑过角度(绘制300度) 　　 privatefloatmTargetAngle = 300f; //刻度的角度(根据此计算需要绘制有色的进度) 　　 　　 privatevoiddrawDegreeLine(Canvas canvas) { 　　 //先保存 　　 canvas.save(); 　　 　　 // 移动画布 　　 canvas.translate(radius, radius); 　　 // 旋转坐标系,需要确定旋转角度 　　 canvas.rotate(30); 　　 　　 // 每次旋转的角度 　　 floatrotateAngle = mSweepAngle / 100; 　　 // 累计叠加的角度 　　 floatcurrentAngle = 0; 　　 for(inti = 0; i <= 100; i++) { 　　 　　 if(currentAngle <= mTargetAngle mTargetAngle != 0) { 　　 // 计算累计划过的刻度百分比 　　 floatpercent = currentAngle / mSweepAngle; 　　 　　 //动态的设置颜色 　　 mDegreelinePaint.setColor(evaluateColor(percent, Color.GREEN, Color.RED)); 　　 　　 canvas.drawLine(0, radius, 0, radius - 20, mDegreelinePaint); 　　 　　 // 画过的角度进行叠加 　　 currentAngle += rotateAngle; 　　 　　 } else{ 　　 mDegreelinePaint.setColor(Color.WHITE); 　　 canvas.drawLine(0, radius, 0, radius - 20, mDegreelinePaint); 　　 } 　　 　　 //画完一个刻度就要旋转移动位置 　　 canvas.rotate(rotateAngle); 　　 } 　　 　　 //再恢复 　　 canvas.restore(); 　　 　　 }

　　

　　加上圆环与刻度的效果图：

　　

　　

　　

3. 设置刻度动画

　　前面的一篇我们使用的是属性动画不停的绘制从而实现进度的效果，那么这一次我们使用定时任务的方式也是可以实现动画的效果。

　　由于我们之前的 drawDegreeLine 方法内部控制绘制进度的变量就是 targetAngle 来控制的，所以我们通过入口方法设置温度的时候通过定时任务的方式来控制。

　　代码如下：

　　

　　

?

　　

本文链接：https://www.lu0.com/news/content/34806.html

1 　　 2 　　 3 　　 4 　　 5 　　 6 　　 7 　　 8 　　 9 　　 10 　　 11 　　 12 　　 13 　　 14 　　 15 　　 16 　　 17 　　 18 　　 19 　　 20 　　 21 　　 22 　　 23 　　 24 　　 25 　　 26 　　 27 　　 28 　　 29 　　 30 　　 31 　　 32 　　 33 　　 34 　　 35 　　 36 　　 37 　　 38 　　 39 　　 40 　　 41 　　 42 　　 43 　　 44 　　 45 　　 46 　　 47 　　 48 　　 49 　　 50 　　 51 　　 52 　　 53 　　 54 　　 55 　　 56

//动画状态 　　 privatebooleanisAnimRunning; 　　 // 手动实现越来越慢的效果 　　 privateint[] slow = {10, 10, 10, 8, 8, 8, 6, 6, 6, 6, 4, 4, 4, 4, 2}; 　　 // 动画的下标 　　 privateintgoIndex = 0; 　　 　　 //设置温。

注册即送1000元现金券

• 陆零云服务
• 3天无理由退款
• 24小时在线服务
• 在线服务
• 3分钟急速响应

服务支持

服务保障

代理分销

投诉建议

陆零云

联系我们

公司简介

代理分销

推荐链接

网站运营

常见问题

行业新闻

365天无休服务 7x24小时在线

咨询热线： 800-886-6060

电子邮箱：admin@lu0.com

微信扫一扫关注公众号

常年法律顾问：可安律师事务所

Copyright © 2013-2023 All Rights Reserved. 版权所有　蜀ICP备2023001515号

• 在线客服
• 备案
• 工单

• TOP

陆零云客服中心

点击按钮可通过QQ进行沟通，请确认启动QQ

• 综合业务
  客服①QQ咨询 客服②QQ咨询 客服③QQ咨询

  多人值班加工单维护，为避免丢失消息，请尽量添加好友
• 业务咨询
  在线咨询 在线咨询

  业务相关，请咨询售前客服，为避免丢失消息，请尽量添加好友
• 售后支持
  售后QQ技术 工单提交服务

  售后问题处理，请QQ在线售后技术，或者提交服务请求，我们会尽全力解决您的问题
• 投诉/合作
  大客户，代理申请联系 服务与合作

  处理：投诉，建议，代理 联系QQ：913603