引言
在无线电监测方面，需要对信号进行展示，其中一项数据就是设备返回的电平数据，需要对其实时展示，一图胜千言，最好且最直观的方式就是图表展示，这样对其信号强弱的变化，就可以一目了然。
本文主要讲安卓版的电平流图形控件的实现，首先效果图如下：
实现了Y轴的拖动、放大、缩小，以及自动调整比例显示。
实现
布局
自定义控件，首先是要设计布局，要绘制哪些元素，元素的位置，弄清楚之后，就可以开始动手画了，我们最终的电平图如下：
那么我们先设计布局，如下如所示：
[站外图片上传中...(image-d0505-1566435331895)]
首先我们在左边要绘制单位，然后是刻度区，然后在是电平折线区。另外考虑到留边，所以在上下左右都加入了边距，便于动态调整。
编码
图纸（布局）确定之后，那么接下来就是搬砖（编码）了，首先新建一个类LevelStreamView继承View，然后实现必要的构造函数，如下：
public LevelStreamView(Context context, AttributeSet attrs, int defStypeAttr) {
super(context, attrs, defStypeAttr);
initView(context, attrs);
}
public LevelStreamView(Context context, AttributeSet attrs) {
super(context, attrs);
initView(context, attrs);
}
public LevelStreamView(Context context) {
super(context);
initView();
}
然后在attrs.xml中自定义控件的一些属性，方便调用者动态更改某些属性，代码如下：
<declare-styleable name="LevelStreamView">
<!--上边距-->
<attr name="margin_top_level" format="integer" />
<!--下边距-->
<attr name="margin_bottom_level" format="integer" />
<!--左边距-->
<attr name="margin_left_level" format="integer" />
<!--右边距-->
<attr name="margin_right_level" format="integer" />
<!--刻度线长度-->
<attr name="_scale_line_length_level" format="integer" />
<!--单位-->
<attr name="unit_str_level" format="string" />
<!--单位字体大小-->
<attr name="unit_size_level" format="integer" />
<!--单位字体颜色-->
<attr name="unit_color_level" format="color" />
<!--网格数-->
<attr name="grid_count_level" format="integer" />
<!--网格颜色-->
<attr name="grid_color_level" format="color" />
<!--电平线颜色-->
<attr name="level_color_level" format="color" />
<!--显示的电平点数-->
<attr name="level_count_level" format="integer" />
<!--刻度显示的最大值-->
<attr name="max_value_level" format="integer" />
<!--刻度显示的最小值-->
<attr name="min_value_level" format="integer" />
<!--刻度字体大小-->
<attr name="scale_size_level" format="integer" />
</declare-styleable>
然后在构造函数中调用initView()初始化函数，读取刚才在attr.xml中设置的控件属性。
接下来就是具体的图形绘制了，在绘制之前，先重载onMeasure()和onDraw()方法，在onMeasure()方法中确定控件的宽和高：
_width = getMeasuredWidth();
_height = getMeasuredHeight();
然后在onDraw()里面就是具体的画图了，首先是画单位drawUnit()，代码如下：
private void drawUnit(Canvas canvas) {
if (_unitStr == null || _unitStr.length() == 0)
return;
canvas.rotate(-90);
canvas.translate(-_height, 0);
_paint.setColor(_unitColor);
_paint.setTextSize(_unitSize);
Rect unitRect = new Rect();
_paint.getTextBounds(_unitStr, 0, _unitStr.length(), unitRect);
canvas.drawText(_unitStr, _height / 2 - (unitRect.width() / 2), unitRect.height(), _paint);
canvas.save();
canvas.translate(_height, 0);
canvas.rotate(90);
}
画布本来的方向是右下的，先旋转-90°，变成右上的方向，然后再把原点往上移_height，接着就是画文本了，画完之后再把canvas改回原来的样子。
接下来就是画刻度和网格了，drawAxis()，先附上代码，然后再进行粗略的讲解。
private void drawAxis(Canvas canvas) {
_paint.setColor(_gridColor);
_paint.setTextSize(_scale_size);
int scaleHeight = _height - _marginTop - _marginBottom; // 绘制去总高度
int scaleWidth = _width - _marginLeft - _marginRight - _scaleLineLength; // 绘制去总宽度
float perScaleHeight = scaleHeight / (float) _gridCount; // 每一格的高度
float perScaleWidth = scaleWidth / (float) _gridCount; // 每一格的宽度
int maxValue = _maxValue + _offsetY - _zoomOffsetY;
int minValue = _minValue + _offsetY + _zoomOffsetY;
Rect scaleRect = new Rect();
_paint.getTextBounds(maxValue + "", 0, (maxValue + "").length(), scaleRect);
for (int i = 0; i <= _gridCount; i++) {
int height = (int) (i * perScaleHeight) + _marginTop;
int width = _marginLeft + _scaleLineLength + (int) (i * perScaleWidth);
int textHeight = 0;
int startWidth = _marginLeft;
if ((i + 1) % 2 != 0) {
if (i == 0) {
textHeight += scaleRect.height();
} else if (i == _gridCount) {
} else {
textHeight += scaleRect.height() / 2;
}
int scaleValue = maxValue - i * (maxValue - minValue) / _gridCount;
float scaleTextLen = _paint.measureText(scaleValue + "");
canvas.drawText(scaleValue + "", startWidth - scaleTextLen, height + textHeight, _paint);
} else {
startWidth += _scaleLineLength;
}
// 画横轴
canvas.drawLine(startWidth, height, _width - _marginRight, height, _paint);
// 画纵轴
canvas.drawLine(width, _marginTop, width, _height - _marginBottom, _paint);
}
}
首先设置画笔的颜色和字体大小，然后根据宽度、高度和上下左右边距，以及设置的网格数，计算出每一格的宽度和高度，因为这个参数在画坐标轴和网格时需要用到。
然后一个循环，对坐标轴，文本和网格线进行绘制。OK，基本的背景图形就有了，后面再把数据接入即可。
绘制电平数据，关键点在于根据电平值和Y坐标显示的值，计算出其应在的位置点的（x,y）。
private void drawLevel(Canvas canvas) {
if (_levels.size() == 0)
return;
_paint.setColor(_levelColor);
_paint.setStyle(Paint.Style.STROKE.STROKE);
Path path = new Path();
int maxValue = _maxValue + _offsetY - _zoomOffsetY;
int minValue = _minValue + _offsetY + _zoomOffsetY;
float perHeight = (_height - _marginTop - _marginBottom) / (float) Math.abs(maxValue - minValue);
float perWidth = (_width - _marginLeft - _scaleLineLength - _marginRight) / (float) _levelCount;
for (int i = 0; i < _levels.size(); i++) {
float level = _levels.get(i);
int x = _marginLeft + _scaleLineLength + (int) (i * perWidth);
int y = _marginTop + (int) ((maxValue - level) * perHeight);
if (i == 0) {
path.moveTo(x, y);
} else {
path.lineTo(x, y);
}
}
canvas.drawPath(path, _paint);
if (_levels.size() < _levelCount) {
// 如果电平点数还未满时，绘制当前电平电
int index = _levels.size() - 1;
float level = _levels.get(index);
int x = _marginLeft + _scaleLineLength + (int) (index * perWidth);
int y = _marginTop + (int) ((maxValue - level) * perHeight);
_paint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.drawCircle(x, y, 5, _paint);
}
// 覆盖上边和下边，使得绘制的图形看上去只在网格中绘制
_paint.setStyle(Paint.Style.FILL);
Drawable background = getBackground();
if (background instanceof ColorDrawable) {
ColorDrawable colorDrawable = (ColorDrawable) background;
int color = colorDrawable.getColor();
_paint.setColor(color);
canvas.drawRect(_marginLeft + _scaleLineLength, 0, _width - _marginRight, _marginTop, _paint);
canvas.drawRect(_marginLeft + _scaleLineLength, _height - _marginBottom + 1, _width - _marginRight, _height, _paint);
}
}
绘制完折线之后，再在上边和下边各绘制一个与背景色相同的矩形，这样看上去电平线就只在网格中绘制。
至此，基本的图形就已绘制完成。那么电平流式绘制是怎么实现的呢？很简单，设置最大显示的电平点数，如果电平点数超过了最大值，则移除最开始的那个点，然后在绘制当前电平点数，看起来就是流动的了。
/**
* 设置电平值
*
* @param level
*/
public void setLevel(float level) {
if (_levels.size() > _levelCount) {
_levels.remove(0); // 移除最前一个
}
_levels.add(level);
postInvalidate();
}
最后要实现的就是图形的一些手势操作，Y轴拖动，多点触控缩放等。首先要重载onTouch()方法：
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
switch (motionEvent.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
// 单点触控
actionDown(motionEvent);
break;
case MotionEvent.ACTION_POINTER_DOWN:
// & MotionEvent.ACTION_MASK 才能得到 ACTION_POINTER_DOWN
// 多点触控
actionPointerDown(motionEvent);
break;
case MotionEvent.ACTION_MOVE:
// 移动：缩放或拖动
actionMove(motionEvent);
break;
case MotionEvent.ACTION_POINTER_UP:
// 多点触控抬起
actionPointerUp(motionEvent);
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
// 取消或抬起
actionCancelUp(motionEvent);
break;
}
return true;
}
首先是单点触控，在ACTION_DOWN（即手指按下的事件）中，判断按下的点是否在Y轴刻度区。
// 以下为手势拖动和缩放实现
private void actionDown(MotionEvent motionEvent) {
// 判断点是否在纵轴刻度上
if (Utils.IsPointInRect(0, 0, _marginLeft + _scaleLineLength, _height, (int) motionEvent.getX(), (int) motionEvent.getY())) {
_handleType = HandleType.DRAG;
_firstY = motionEvent.getY();
} else {
_handleType = HandleType.NONE;
}
}
然后在ACTION_MOVE（即手指按下后并移动）中，判断是往上移动还是往下移动，并实时刷新Y轴的刻度值和电平流的位置。
private void actionMove(MotionEvent motionEvent) {
if (_handleType == HandleType.DRAG) {
float currentY = motionEvent.getY();
float spanY = currentY - _firstY;
// 实际在屏幕上滑动的距离，映射到坐标轴Y上的距离
int spanScale = (int) (spanY / ((_height - _marginTop - _marginBottom) / Math.abs(_maxValue - _minValue)));
if (spanScale != 0) {
_offsetY = spanScale;
postInvalidate();
}
}
。。。
}
此处的_offsetY是关键点，绘制刻度值和电平流就用到的它。
多点触摸缩放，在ACTION_POINTER_DOWN（即两个手指按下的事件）中，记录当前的位置的距离_oldDistanceY。
private void actionPointerDown(MotionEvent motionEvent) {
if (motionEvent.getPointerCount() == 2) {
_handleType = HandleType.ZOOM;
float y1 = motionEvent.getY(0);
float y2 = motionEvent.getY(1);
_oldDistanceY = Math.abs(y1 - y2);
}
}
然后在ACTION_MOVE中计算实时的距离currentDistanceY，并根据此计算出_zoomOffsetY，以此实时刷新Y轴的刻度值和电平流的图形。
private void actionMove(MotionEvent motionEvent) {
if (_handleType == HandleType.DRAG) {
float currentY = motionEvent.getY();
float spanY = currentY - _firstY;
// 实际在屏幕上滑动的距离，映射到坐标轴Y上的距离
int spanScale = (int) (spanY / ((_height - _marginTop - _marginBottom) / Math.abs(_maxValue - _minValue)));
if (spanScale != 0) {
_offsetY = spanScale;
postInvalidate();
}
} else if (_handleType == HandleType.ZOOM && motionEvent.getPointerCount() == 2) { // 需要加一个判断不然会报错
float y1 = motionEvent.getY(0);
float y2 = motionEvent.getY(1);
float currentDistanceY = Math.abs(y1 - y2);
float perScaleHeight = (_height - _marginTop - _marginBottom) / (float) Math.abs(_maxValue - _minValue);
int spanScale = (int) ((currentDistanceY - _oldDistanceY) / perScaleHeight);
if (spanScale != 0 && ((_maxValue - spanScale) - (_minValue + spanScale)) >= _gridCount) { // 防止交叉越界，并且在放大到 总刻度长为 _gridCount 时，不能缩小
_zoomOffsetY = spanScale;
postInvalidate();
}
}
}
最后在ACTION_POINTER_UP和ACTION_UP中固化状态。
private void actionPointerUp(MotionEvent motionEvent) {
if (_handleType == HandleType.ZOOM) {
_maxValue -= _zoomOffsetY;
_minValue += _zoomOffsetY;
_zoomOffsetY = 0;
}
_handleType = HandleType.NONE;
}
private void actionCancelUp(MotionEvent motionEvent) {
if (_handleType == HandleType.DRAG) {
_maxValue += _offsetY;
_minValue += _offsetY;
_offsetY = 0;
}
_handleType = HandleType.NONE;
}
还忘了介绍自动调整比列显示，即根据电平的最大值和最小值，计算出Y轴的刻度值，然后再更新电平流图形。
/**
* 自动调整
*/
public void autoView() {
if (_levels.size() == 0)
return;
// 自动调整视图，就是要找到合理的 _maxValue 和 _minValue
float sum = 0;
int num = 0;
for (int i = 0; i < _levels.size(); i++) {
sum += _levels.get(i);
num = i;
}
float average = sum / num;
float maxValue = Collections.max(_levels);
float minValue = Collections.min(_levels);
num = 0;
for (int i = 1; i < 1000; i++) {
float max = average + 5 * i;
float min = average - 5 * i;
if (max > maxValue && min < minValue) {
if (Math.abs((max - maxValue) / (float) Math.abs(max - min)) >= 0.25) {
num = i; // 最大值与顶点的距离 >= 1/4
break;
}
}
}
if (num != 0) {
_maxValue = (int) (average + 5 * num);
_minValue = (int) (average - 5 * num);
postInvalidate();
}
}
至此，自定义电平流图形控件的绘制基本完成。当然这仅仅是实现了基本的绘制和展示，在实际的系统中，可能还会添加其他元素，比如电平门限，以及对外提供的一些接口或事件，这就要根据实际的应用场景再进行添加和完善了。
好了，本文的介绍就到这里了，我是一个安卓新手，代码中可能有所欠缺或不妥之处，敬请斧正。另外此控件的实现暂未考虑性能方便的问题，不过正常使用也很流畅，后面我要更新的频谱瀑布图，就会加入性能方便的考虑。敬请关注，谢谢。
最后奉上此控件的源代码： https://github.com/AnuoF/android_customview
AnuoF
Chengdu
Aug 18,2019
网友评论