最近，产品经理又对我们提出了“特殊需求”，需要实时显示电流表的变化数据，这本来也挺正常的，网上一搜也能搜到一大把类似的自定义控件。无奈，每个产品经理都是折翼的天使，都有着自己不为人知的特殊想法，先上个图片瞅瞅
产品经理的特殊需求
产品经理的特殊需求.jpg
（请不要在意图片中表的类型不一样，因为找不到同类型的了）
不会做动图，口述一下，具体需求如下：
1.电流表随着实时数据转动
2.电流表区分安全范围和异常范围
3.当指针转动到异常范围的时候，表盘边框和指针，以及读数，以及读数下面的那个文字描述都要变色
需求1和2还是正常的，3就有点让人无fuck可说了
刚拿到的时候，找了好几个类似的自定义控件外观上大致是相似的，但是具体的细节存在挺大的差距没法用，只能自己动手造了
先看一下自己造的轮子效果，
效果图.png
和需求基本一致，下面是代码
1.首先是一些自定义属性
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="SpeedView">
<!--开始绘制的角度-->
<attr name="start_angle" format="float"/>
<!--表盘圆弧扫过的角度-->
<attr name="sweep_angle" format="float"/>
<!--量程最大值-->
<attr name="max_range" format="integer"/>
<!--量程最小值-->
<attr name="min_range" format="integer"/>
<!--安全量程最大值-->
<attr name="max_safe_range" format="integer"/>
<!--安全量程最小值-->
<attr name="min_safe_range" format="integer"/>
<!--读数的位置，在表盘圆弧中心点上或者下面-->
<attr name="position">
<enum name="top" value="0"/>
<enum name="bottom" value="1"/>
</attr>
</declare-styleable>
已加注释，就不再说明了。
由于这些自定义的属性以及其他一些控件自身的属性在控件各个部位绘制的时候都有可能会用到，所以将他们单独写在一个类里，方便使用，代码如下
package com.yh.speedview.utils;
import android.graphics.RectF;
public class ViewPortHandler {
/**
* 控件的宽
*/
private int mWidth;
/**
* 控件的高
*/
private int mHeight;
/**
* 中心点X坐标
*/
private float mCenterX = 0f;
/**
* 中心点Y坐标
*/
private float mCenterY = 0f;
/**
* 指针当前指向的实时读数
*/
private float mRealTimeIndex = 0f;
/**
* 圆弧的半径 以dp为单位
*/
protected int mRadius ;
/**
* 控件所在的矩形
*/
private RectF mRectF = new RectF ();
/**
* 起始角度(以度计)
*/
protected float mStartAngle = 180;
/**
* 扫过角度(以度计，顺时针方向)
*/
protected float mSweepAngle = 180;
/**
* 最大安全量程
*/
protected int mMaxSafeRange ;
/**
* 最小安全量程
*/
protected int mMinSafeRange ;
/**
* 最大量程
*/
private int mMaxRange ;
/**
* 最小量程
*/
private int mMinRange ;
public ViewPortHandler () {
}
......省略了getter和setter方法
}
然后就是电流表的基类，我给它命名为SpeedView，在这个类里，我将上面定义的这些变量开始初始化，以供继成此类的其他子类使用(例如，电流表，温度表等等)，代码
/**
* 各类表的基本类(电流表，电压表，温度表)
*/
public abstract class SpeedView extends View {
/**
* 实时读数的位置
*/
private int mPosition;
protected SpeedAnimator mAnimator;
protected IndicatorRender mIndicatorRender;
protected BorderRender mBorderRender;
protected MarkerRender mMarkerRender;
protected RealTimeRender mRealTimeRender;
protected ViewPortHandler mViewPortHandler = new ViewPortHandler ();
public SpeedView (Context context) {
this (context, null);
}
public SpeedView (Context context, AttributeSet attrs) {
super (context, attrs);
Utils.init (context);
TypedArray a = context.obtainStyledAttributes (attrs, R.styleable.SpeedView);
mViewPortHandler.setStartAngle (a.getFloat (R.styleable.SpeedView_start_angle, 180f));
mViewPortHandler.setSweepAngle (a.getFloat (R.styleable.SpeedView_sweep_angle, 180f));
mViewPortHandler.setMaxRange (a.getInteger (R.styleable.SpeedView_max_range, 100));
mViewPortHandler.setMinRange (a.getInteger (R.styleable.SpeedView_min_range, 0));
mViewPortHandler.setMaxSafeRange (a.getInteger (R.styleable.SpeedView_max_safe_range, 100));
mViewPortHandler.setMinSafeRange (a.getInteger (R.styleable.SpeedView_min_safe_range, 0));
mPosition = a.getInt (R.styleable.SpeedView_position, -1);
a.recycle ();
// if (mViewPortHandler.getRadius () <= 0)
// throw new IllegalArgumentException ("SpeedView radius must be greater than 0");
// initialize ();
}
protected void initialize () {
mIndicatorRender = new IndicatorRender (mViewPortHandler);
mBorderRender = new BorderRender (mViewPortHandler);
mMarkerRender = new MarkerRender (mViewPortHandler);
mRealTimeRender = new RealTimeRender (mViewPortHandler);
mRealTimeRender.setPosition (mPosition);
mAnimator = new SpeedAnimator (new ValueAnimator.AnimatorUpdateListener () {
@Override
public void onAnimationUpdate (ValueAnimator animation) {
mViewPortHandler.setRealTimeIndex ((Float) animation.getAnimatedValue ());
postInvalidate ();
}
});
}
@Override
protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure (widthMeasureSpec, heightMeasureSpec);
int widthSize = MeasureSpec.getSize (widthMeasureSpec);
int widthMode = MeasureSpec.getMode (widthMeasureSpec);
int heightSize = MeasureSpec.getSize (heightMeasureSpec);
int heightMode = MeasureSpec.getMode (heightMeasureSpec);
int tempWidth = 0;
int tempHeight = 0;
switch (widthMode) {
case MeasureSpec.UNSPECIFIED:
case MeasureSpec.AT_MOST:
tempWidth = (int) Utils.convertDpToPixel (80);
mViewPortHandler.setWidth (tempWidth * 2);//+ getPaddingLeft () + getPaddingRight ()
break;
case MeasureSpec.EXACTLY:
tempWidth = widthSize / 2;
mViewPortHandler.setWidth (widthSize);//+ getPaddingLeft () + getPaddingRight ()
break;
}
switch (heightMode) {
case MeasureSpec.UNSPECIFIED:
case MeasureSpec.AT_MOST:
tempHeight = (int) Utils.convertDpToPixel (80);
mViewPortHandler.setHeight (tempHeight * 2);//
break;
case MeasureSpec.EXACTLY:
tempHeight = heightSize / 2;
mViewPortHandler.setHeight (heightSize );
break;
}
int radius = Math.min (tempWidth - 10, tempHeight - 10);
mViewPortHandler.setRadius (radius);
mIndicatorRender.setIndicatorRadius (radius - mIndicatorRender.getIndicatorReduc ());
mViewPortHandler.setCenterX (mViewPortHandler.getWidth () / 2);
mViewPortHandler.setCenterY (mViewPortHandler.getHeight () / 2);
mViewPortHandler.setRectF (mViewPortHandler.getCenterX () - radius, mViewPortHandler.getCenterY () - radius, mViewPortHandler.getCenterX () + radius, mViewPortHandler.getCenterY () + radius);
setMeasuredDimension (widthSize + getPaddingLeft () + getPaddingRight (), heightSize + getPaddingTop () + getPaddingBottom ());
// setMeasuredDimension (widthSize , heightSize );
}
/**
* 根据实时数据获取对应的角度
*
* @param real 实时读数
* @return 由实时读数转换的角度(float)
*/
protected float getAngleFromReal (float real) {
int maxRange = mViewPortHandler.getMaxRange ();
int minRange = mViewPortHandler.getMinRange ();
float startAngle = mViewPortHandler.getStartAngle ();
float sweepAngle = mViewPortHandler.getSweepAngle ();
if (real > maxRange)
return startAngle + sweepAngle;//+ mDistance / 2
if (real < minRange)
return startAngle;//+ mDistance / 2;
return sweepAngle * ((real - minRange) / (maxRange - minRange)) + startAngle; //mDistance / 2;
}
/**
* 读数是否在正常范围内
* true 正常范围，false 异常范围
*/
protected boolean isSafeRange () {
//正常读数范围最小值
float safeRangeMin = getAngleFromReal (mViewPortHandler.getMinSafeRange ());
//正常读数范围最大值
float safeRangeMax = getAngleFromReal (mViewPortHandler.getMaxSafeRange ());
return mViewPortHandler.getRealTimeIndex () >= safeRangeMin && mViewPortHandler.getRealTimeIndex () <= safeRangeMax;
}
//将角度转为读数,保留小数点后一位
protected String getRealFromAngle () {
float value = mViewPortHandler.getMinRange () + (mViewPortHandler.getMaxRange () - mViewPortHandler.getMinRange ()) * (mViewPortHandler.getRealTimeIndex () - mViewPortHandler.getStartAngle ()) / mViewPortHandler.getSweepAngle ();//- (mStartAngle + mDistance / 2)) / mSweepAngle
return Utils.convert (Math.round (value * 10) / 10f);
}
/**
* 获取长刻度对应的读数数组
*
* @return 读数数组
*/
protected String[] createNumerical () {
int largeSpace = mMarkerRender.getIndexCount ();
int max = mViewPortHandler.getMaxRange ();
int min = mViewPortHandler.getMinRange ();
int space = (max - min) / largeSpace;
String[] index = new String[largeSpace + 1];
for (int i = 0; i <= largeSpace; i++) {
index[i] = Utils.convert ((min + space * i));
}
return index;
}
}
此类里的方法都做了注释，如果有不懂的地方，我会做最后给出源码地址，到时可以结合源码一起看。
接下来就是具体的某个表了，我需要的是电流表，这里就以电流表为例。由于电流表的量程可能有两种情况
第一种是以mA(毫安)为单位
第二种是以A(安)为单位
所以，为电流表也单独设置了一个自定义属性
<!--电流表-->
<declare-styleable name="Ammeter">
<attr name="unit">
<!--毫安-->
<enum name="milliAmp" value="0"/>
<!--安-->
<enum name="Amp" value="1"/>
</attr>
</declare-styleable>
然后声明一个类，名字叫Ammeter让它继承上面的SpeedView，这样我们的电流表Ammeter就可以使用SpeedView里的变量和方法了。还是看代码
/**
* 电流表
*/
public class Ammeter extends SpeedView implements SafeRangeListener, NumericalListener, RealTimeIndexListener {
/**
* 电流单位(毫安：mA,安：A)
* 默认:mA
*/
private int mUnit = -1;
//电流表的指针
private DiamondIndicator mIndicator;
//电流表的表盘圆弧
private Border mBorder;
//电流表的长、短刻度
private Marker mMarker;
//电流表长刻度对应的读数
private Numerical mNumerical;
//指针转动对应的实时读数
private RealTimeReading mRealTimeReading;
public Ammeter (Context context) {
this (context, null);
}
public Ammeter (Context context, AttributeSet attrs) {
super (context, attrs);
TypedArray a = context.obtainStyledAttributes (attrs, R.styleable.Ammeter);
mUnit = a.getInt (R.styleable.Ammeter_unit, -1);
a.recycle ();
}
@Override
protected void initialize () {
super.initialize ();
mViewPortHandler.setRealTimeIndex (getAngleFromReal (mViewPortHandler.getRealTimeIndex ()));
mIndicator = new DiamondIndicator (mIndicatorRender, getBackground ());
mIndicator.setSafeRangeListener (this);
mBorder = new Border (mBorderRender);
mMarker = new Marker (mMarkerRender);
mNumerical = new Numerical (mMarkerRender);
mNumerical.setNumericalListener (this);
mRealTimeReading = new RealTimeReading (mRealTimeRender);
mRealTimeReading.setSafeRangeListener (this);
mRealTimeReading.setRealTimeIndexListener (this);
mRealTimeReading.setUnit (mUnit);
}
@Override
protected void onDraw (Canvas canvas) {
super.onDraw (canvas);
mBorder.onDraw (canvas);//绘制圆弧
mMarker.onDraw (canvas);//绘制刻度
mNumerical.onDraw (canvas);//绘制长刻度对应的读数
mIndicator.onDraw (canvas);//绘制指针
mRealTimeReading.onDraw (canvas);//绘制跟随指针实时变化的读数
}
/**
* 设置显示多少个刻度值
*
* @param count 数量
*/
public void setCount (int count) {
mMarkerRender.setIndexCount (count);
}
/**
* 设置电流表短刻度线的数量
*
* @param smallInterval 数量
*/
public void setSmallSpace (int smallInterval) {
mMarkerRender.setSmallSpace (smallInterval);
}
/**
* 设置电流表的最大量程
*
* @param maxRange 最大量程
*/
public void setMaxRange (int maxRange) {
mViewPortHandler.setMaxRange (maxRange);
}
/**
* 设置电流表的最小量程
*
* @param minRange 最小量程
*/
public void setMinRange (int minRange) {
mViewPortHandler.setMinRange (minRange);
}
/**
* 设置实时读数
*
* @param realTimeData 由当前读数即将移动到的读数
*/
public void setRealTimeData (int realTimeData) {
mAnimator.indicatorRotate (mViewPortHandler.getRealTimeIndex (), getAngleFromReal (realTimeData));
}
/**
* 设置电流表最大安全量程
*
* @param safeMaxRange 最大安全量程值
*/
public void setMaxSafeRange (int safeMaxRange) {
mViewPortHandler.setMaxSafeRange (safeMaxRange);
}
/**
* 电流表最小安全量程
*
* @param safeMinRange 最小安全量程值
*/
public void setMinSafeRange (int safeMinRange) {
mViewPortHandler.setMinSafeRange (safeMinRange);
}
@Override
public boolean isSafe () {
return isSafeRange ();
}
@Override
public String[] create () {
return createNumerical ();
}
@Override
public String show () {
return getRealFromAngle ();
}
为了降低代码的耦合度，我把电流表的各个部位都以零件的形式给拆分成了几个部位，每个部位在代码中所对应的变量已加了注释，这样在onDraw方法中就相当于是在拼接这些零件，而具体每个零件是怎样画的都交给每个零件自己去画，把最后各个零件画完后的结果拼装在一起就行了。
有些关键代码并没有给出，比如各个 零件 的绘制过程，一是怕篇幅会太长，二是这里只是给出控件绘制的大致思路，具体代码我都共享在了GitHub上，如果感兴趣，可以下载下来看
最后，此控件做的时候，时间比较仓促，加上能力有限，所以肯定会有很多不足的地方，如果，你能有更好的方法，欢迎留言交流，我会尽力完善这个控件
源码在这
