android自定义View-折线图
2017-05-04 本文已影响180人
Vonelone
拿到效果图，手机端需要实现的效果是这样：
先分析：x轴是时间轴，长度固定，区间不固定；y轴是数值轴，区间不固定，需要根据传入数组的max和min定义区间；
先放撸出来后的基本模样：
还是首先确定哪些元素需要在xml中定义，哪些需要代码中动态set。
这一题，我觉得xml中可设置的不用太多，连颜色都可以在view里写死，重要的就是java代码中设置数据源了:
这四项就是数据源了，valueName是图的名字，X，Y，Z分别是三个图的数据源。
private int[] valuesZ;
private int[] valuesY;
private int[] valuesX;
private String valueName;
然后onMeasure()，因为这个图的目标是做match_parent的,偷懒抛异常
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
if (widthMode == MeasureSpec.EXACTLY) {
mWidth = widthSize;
} else if (widthMode == MeasureSpec.AT_MOST) {
throw new IllegalArgumentException("width must be EXACTLY,you should set like android:width=\"200dp\"");
}
if (heightMode == MeasureSpec.EXACTLY) {
mHeight = heightSize;
} else if (widthMeasureSpec == MeasureSpec.AT_MOST) {
throw new IllegalArgumentException("height must be EXACTLY,you should set like android:height=\"200dp\"");
}
setMeasuredDimension(mWidth, mHeight);
下面就是最重要的onDraw()了：
从结果图可以看出来，我们是竖着画的，所以 绘制时，画布的xy轴和我们要展现的xy轴需要区分开来。
那么，三个图 其实基本绘制方式一样，只不过是X图和Y图绘制好之后，需要偏移画布（当然，我没有使用偏移画布，用的比较复杂的方法，后来看的也是一头闷水...）
先来矩形：
Rect rectX = new Rect();
rectX.left = 150 + (getWidth() - getPaddingRight() - 50) / 3 * 2;//这里是最右边的图
rectX.top = mToppadding + getPaddingTop();
rectX.right = (getWidth() - getPaddingRight() - 50);
rectX.bottom = getHeight() - getPaddingBottom() - 50;
drawIng(canvas, "X", valuesX, rectX);//具体绘制图形的方法，提取成一个方法，便于复用
Rect rectY = new Rect();
rectY.left = 150 + (getWidth() - getPaddingRight() - 50) / 3;//中间的图
rectY.top = mToppadding + getPaddingTop();
rectY.right = (getWidth() - getPaddingRight() - 50) / 3 * 2;
rectY.bottom = getHeight() - getPaddingBottom() - 50;
drawIng(canvas, "Y", valuesY, rectY);
Rect rectZ = new Rect();
rectZ.left = 150 + getPaddingRight();//初始的图，Z
rectZ.top = mToppadding + getPaddingTop();
rectZ.right = (getWidth() - getPaddingRight() - 50) / 3;
rectZ.bottom = getHeight() - getPaddingBottom() - 50;
drawIng(canvas, "Z", valuesZ, rectZ);
这里就是画布的X轴向右加，也算是一种偏移吧哈哈。
mPaint.setColor(mGridLineColor);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(3);
canvas.drawRect(r, mPaint);
int rWidth = r.right - r.left;
int rHeight = r.bottom - r.top;
int aW = rWidth / 9 * 2;//折线图的y轴，矩形边分为四块，我具体细分为18分，每块占4分，格线到矩形边缘距离1分
int aH = rHeight / 11;//矩形边分为11分，时间轴部分占10分，细分10部分，前后padding共1分
int mgH = aH / 2 + mToppadding;//画布原点到时间轴起始位置的距离
//根据values的值，找出最大值和最小值，确定y轴范围
for (int i = 0; i < 5; i++) {
canvas.drawLine(i * aW + r.left + aW / 4, mToppadding - 30, i * aW + r.left + aW / 4, mToppadding, mPaint);
}
//时间轴的黑点
mPaint.setStrokeWidth(20);
for (int i = 0; i < 11; i++) {
canvas.drawLine(r.left - 20, mgH + i * aH, r.left, mgH + i * aH, mPaint);
if (i == 10) continue;
canvas.drawLine(r.left - 20, mgH + i * aH + aH / 7 , r.left, mgH + i * aH + aH / 7 , mPaint);
canvas.drawLine(r.left - 20, mgH + i * aH + aH / 7 * 2, r.left, mgH + i * aH + aH / 7 * 2, mPaint);
canvas.drawLine(r.left - 20, mgH + i * aH + aH / 7 * 3, r.left, mgH + i * aH + aH / 7 * 3, mPaint);
canvas.drawLine(r.left - 20, mgH + i * aH + aH / 7 * 4, r.left, mgH + i * aH + aH / 7 * 4, mPaint);
canvas.drawLine(r.left - 20, mgH + i * aH + aH / 7 * 5, r.left, mgH + i * aH + aH / 7 * 5, mPaint);
canvas.drawLine(r.left - 20, mgH + i * aH + aH / 7 * 6, r.left, mgH + i * aH + aH / 7 * 6, mPaint);
}
mPaint.setColor(mGridLineColor);
mPaint.setTextSize(50);
mPaint.setStrokeWidth(1);
mPaint.setStyle(Paint.Style.FILL);
int[] vL = getMinMaxValue(values);//将传入的数组的最大值最小值中间值提取出来
String vMin = String.valueOf(vL[0]);
String vMid = String.valueOf(vL[1]);
String vMax = String.valueOf(vL[2]);
String title = valueName + "_" + type;
canvas.drawText(title, r.left + (r.right - r.left) / 2 - mPaint.measureText(title) / 2, 50, mPaint);
//画数值轴
float y = mToppadding - 30 - Math.abs(mPaint.getFontMetrics().bottom - mPaint.getFontMetrics().top) / 2;
canvas.drawText(vMin, r.left + aW / 4 - mPaint.measureText(vMin) / 2, y, mPaint);
canvas.drawText(vMid, r.left + aW / 4 + aW * 2 - mPaint.measureText(vMid) / 2, y, mPaint);
canvas.drawText(vMax, r.left + aW / 4 + aW * 4 - mPaint.measureText(vMax) / 2, y, mPaint);
//画时间轴
canvas.rotate(90, 0, 0);//画布旋转90°，渲染时间轴的文字
for (int i = 0; i < 11; i++) {
String time = DateUtils.getDateToString(times[times.length / 11 * i] * 1000);
time = time.substring(time.length() - 5, time.length());
canvas.drawText(time, mgH + i * aH - mPaint.measureText(time) / 2, +100 - r.left, mPaint);
}
canvas.rotate(-90, 0, 0);//别忘了转回来
//画点和线
//现在的画布y轴是时间，有规律，递增的 x轴是数值，
mPaint.setColor(mLineColor);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(2);
//先求出x/y轴上每一个单位占多少dp
float xx = aW * 4.0f / (vL[2] - vL[0]);
float yy = aH * 10.0f / times.length;
Path path = new Path();
for (int i = 0; i < values.length; i++) {
//画path
if (i == 0) {
path.moveTo((values[i] - vL[0]) * xx + r.left + aW / 4, mgH + yy * i);
} else {
path.lineTo((values[i] - vL[0]) * xx + r.left + aW / 4, mgH + yy * i);
}
}
canvas.drawPath(path, mPaint);
下面是提取一个数组的最小值、最大值、中间值的方法
private int[] getMinMaxValue(int[] values) {
int min = values[0], max = values[0];
for (int i = 0; i < values.length - 1; i++) {
if (values[i] > max) max = values[i];
if (values[i] < min) min = values[i];
}
max = Math.round(max * 1.0f / 100.0f) * 100;
min = Math.round(min * 1.0f / 100.0f) * 100;
if (max + min == 0)
return new int[]{min, 0, max};
else {
if ((max + min) % 200 == 0)
return new int[]{min, (min + max) / 2, max};
else return new int[]{min, (min + max + 100) / 2, max + 100};
}
好了，然后在xml中调用这个view：
<com.ec.vone.view.LinechartView
android:id="@+id/linechartView"
android:layout_width="match_parent"
android:layout_height="match_parent"
custom:background="@color/color_bg"
custom:gridLineColor="#000"
custom:lineColor="@color/colorAccent" />
activity中：
long now = (int) (System.currentTimeMillis() /1000);
for (int i = 0; i < 300; i++) {
valueZ[i] = (int) (Math.random() * 6000 - 3000);
valueX[i] = (int) (Math.random() * 1000) - 500;
valueY[i] = (int) (Math.random() * -200) - 200;
times[i] = now;
now++;
}
linechartView.setTimes(times);
linechartView.setValuesZ(valueZ);
linechartView.setValuesY(valueY);
linechartView.setValuesX(valueX);
linechartView.setValueName("Mag");
即可。
模拟的值看起来很难看，当然运用到项目中，就是和原图差不多的效果了。
当然，如果做成实时的折线，像心率一样，就是要scrollby了，今天的结果不是这个，具体后面有机会再填坑。
