android自定义View-折线图

拿到效果图,手机端需要实现的效果是这样:


android自定义View-折线图_第1张图片

先分析:x轴是时间轴,长度固定,区间不固定;y轴是数值轴,区间不固定,需要根据传入数组的max和min定义区间;

先放撸出来后的基本模样:


android自定义View-折线图_第2张图片

还是首先确定哪些元素需要在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:


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");

即可。

android自定义View-折线图_第3张图片

模拟的值看起来很难看,当然运用到项目中,就是和原图差不多的效果了。

当然,如果做成实时的折线,像心率一样,就是要scrollby了,今天的结果不是这个,具体后面有机会再填坑。

具体代码点击查看

你可能感兴趣的:(android自定义View-折线图)