仿糖护士曲线图写的一个CurveChartView

本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布

糖护士IOS版效果

《仿糖护士曲线图写的一个CurveChartView》 image.png
《仿糖护士曲线图写的一个CurveChartView》 image.png

自定义效果

《仿糖护士曲线图写的一个CurveChartView》 ScreenGif7.gif

适配效果

《仿糖护士曲线图写的一个CurveChartView》 ScreenGif8.gif

实现思路

将view拆分为4个部分绘制

  • 绘制横向线段+文字,即2.5-33.0以及对应的线段横向无变化。
  • 绘制纵向线段+文字,即日期以及对应的纵向线段,在滑动时候要一直变换
  • 绘制中间的阴影块以及文字
  • 绘制曲线

实现步骤

1 重写onMeasure(),当高度的测量模式为EXACTLY时,方格的高度为,view高-1个半字体的高度/(纵列字数-1)即segmentLone = (height - textRect.height() / 2 * 3) / (vPoints - 1);。高度测量模式为AT_MOST时,通过固定的方格高度计算view高度 即 height = segmentLone * (vPoints + 1);

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        width = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        switch (heightMode) {
            case MeasureSpec.EXACTLY:
                height = MeasureSpec.getSize(heightMeasureSpec);
                textPaint.getTextBounds(textV[0], 0, textV[0].length(), textRect);
                segmentLone = (height - textRect.height() / 2 * 3) / (vPoints - 1);
                setMeasuredDimension(width, height);
                break;
            case MeasureSpec.AT_MOST:
                height = segmentLone * (vPoints + 1);
                textPaint.getTextBounds(textV[0], 0, textV[0].length(), textRect);
                setMeasuredDimension(width, segmentLone * (vPoints - 1) + textRect.height() / 2 * 3);
                break;
        }

    }

2 重写onDraw()将view拆分为4个部分绘制,画横线,纵线,阴影以及曲线

 @Override
    protected void onDraw(Canvas canvas) {
        drawHLinesAndText(canvas);
        drawVLinesAndText(canvas);
        drawTransRectAntText(canvas);
        drawLinesAndPoint(canvas);
    }

3 drawHLinesAndText()先裁剪画布为屏幕宽度及高度,第一条线的高度为text的高度的一半,之后的线段递增固定高度

private void drawHLinesAndText(Canvas canvas) {
        canvas.save();
        int count = 0;

        canvas.clipRect(new RectF(0, 0, width, height));

        for (int i = 0; i < vPoints; i++) {
            if (i == 0) {
                textPaint.getTextBounds(textV[0], 0, textV[0].length(), textRect);
                canvas.translate(textRect.width() + 10, 0);
                count = textRect.height() / 2;
            } else if (i == 1) {
                count = segmentLone;
            }
            textPaint.getTextBounds(textV[i], 0, textV[i].length(), textRect);
            canvas.translate(0, count);
            canvas.drawText(textV[i], 0 - textRect.width() - 8, textRect.height() - textRect.height() / 2, textPaint);
            canvas.drawLine(0, 0, width, 0, HLinePaint);
        }
        canvas.restore();
    }

4 drawVLinesAndText()画纵向线段,先需要工具类获取今天以及今天前N天的日期放入list中,根据module设置不同取不同的日期,在绘制后,将画布平移到最新的日期。

public enum MODULE {
        ONEDAY,
        FIVEDAY,
        HOUR,
    }
private void drawVLinesAndText(Canvas canvas) {
        canvas.save();
        hPoints = textH.length;
        int count = 0;
        for (int i = 0; i < hPoints; i++) {
            if (i == 0) {
                textPaint.getTextBounds(textV[0], 0, textV[0].length(), textRect);
                canvas.translate(0, textRect.height() / 2);
                count = textRect.width() + 10;
                canvas.clipRect(new RectF(textRect.width() + 10, 0, width, height));
            } else if (i == 1) {

                if (isFirstShow) {
                    //期初的偏移量=线段数(底部文字数-1)* segmentLone;
                    offsetX = getDayOffset(currentDay);
                    lastMove = offsetX;
                    isFirstShow = false;
                }
                canvas.translate(offsetX, 0);
                count = segmentLone;
            }

            textPaint.getTextBounds(textH[i], 0, textH[i].length(), textRect);
            canvas.translate(count, 0);
            canvas.drawText(textH[i], -textRect.width() / 2, segmentLone * (vPoints - 1) + textRect.height() + 8, textPaint);
            canvas.drawLine(0, 0, 0, segmentLone * (vPoints - 1), HLinePaint);
//            drawVDshLine(canvas);
        }

        canvas.restore();
    }

5 drawTransRectAntText()绘制阴影,这部分比较简单

private void drawTransRectAntText(Canvas canvas) {
        textPaint.getTextBounds(textV[0], 0, textV[0].length(), textRect);
        transRect.set(textRect.width() + 10, textRect.height() / 2 + segmentLone * 2 + segmentLone / 2, width
                , textRect.height() / 2 + segmentLone * 7 + segmentLone / 10 * 6);
        canvas.drawRect(transRect, rectTransPaint);
        canvas.drawText("4.4", width - textRect.width() - 5, segmentLone * 7 + segmentLone / 10 * 6 + textRect.height() + 10, textPaint);
        canvas.drawText("10.0", width - textRect.width() - 5, segmentLone * 2 + segmentLone / 2, textPaint);
    }

6 drawLinesAndPoint()绘制曲线,根据预先封装好的用来获取坐标原点的方法,并且根据module设置的不同,来获取某一点在表格中实际的位置

    private void drawLinesAndPoint(Canvas canvas) {

        canvas.clipRect(new RectF(textRect.width() + 10, 0, width, height));
        float[] points = new float[]{getCurrentDayX(1), getY(0), getCurrentDayX(1.5f), getY(4)};

        canvas.drawCircle(points[0], points[1], 10, circlePaint);
        canvas.drawCircle(points[2], points[3], 10, circlePaint);
        canvas.drawLine(getCurrentDayX(1), getY(0), getCurrentDayX(1.5f), getY(4), linePaint);

    }

7 处理onTouchEvent(),滑动时,记录横向滑动产生的offset不断重新绘制,使表格可以移动,并且通过速度监听器以及属性动画实现惯性滑动

public boolean onTouchEvent(MotionEvent event) {
        velocityTracker.computeCurrentVelocity(1000);
        velocityTracker.addMovement(event);
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (valueAnimator != null && valueAnimator.isRunning()) {
                    valueAnimator.cancel();
                }
                downX = (int) event.getX();
                break;
            case MotionEvent.ACTION_MOVE:
                moveX = (int) event.getX();
                offsetX = moveX - downX + lastMove;
                if (offsetX < getDayOffset(1)) {
                    offsetX = getDayOffset(1);
                } else if (offsetX > 0) {
                    offsetX = 0;
                }

                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                lastMove = offsetX;
                xVelocity = (int) velocityTracker.getXVelocity();
                autoVelocityScroll(xVelocity);
                break;
        }
        return true;
    }

8 供外部刷新view的方法

  • 更新模式 5天 1天 1天+小时段
    public void setModule(MODULE module) {
        this.module = module;
        init();
        invalidate();
    }
  • 定位到某一天,适配以上3种模式
    public void setCurrentDay(float currentDay) {
        switch (module) {
            case FIVEDAY:
                this.currentDay = currentDay / 5.0f + 1;
                break;
            case ONEDAY:
                this.currentDay = currentDay;
                break;
            case HOUR:
                this.currentDay = currentDay * 6;
                break;
        }
        init();
        invalidate();
    }

更多的优化

动态设置阴影的位置,以及要显示的文字

    public void setTransTopAndBottom(int top, int bottom,String topStr,String bottomStr) {
        this.transRectTop = top;
        this.transRectBottom = bottom;
        this.transRectTopStr = topStr;
        this.transRectBottomStr = bottomStr;
        init();
        invalidate();
    }

动态更新点

    public void setPointList(List<PointF> pointList) {
        this.pointList = pointList;
        init();
        invalidate();
    }

画曲线时,根据阴影的位置设置不同的线段颜色,任意2个相连的点之间,若分为3个象限,则需要处理11,12,13,22,23,33这6种不同的情况,最主要的是需要得到y点差值的比例值去计算交叉点线段的距离,再通过pathMeasure.getPosTan()这个方法来获取曲线与阴影的交叉点位置。代码有点长就不贴了~~~

《仿糖护士曲线图写的一个CurveChartView》 image.png

具体源码,请查看该链接

    原文作者:超神的菠萝
    原文地址: https://www.jianshu.com/p/3ddd4c8a04e7
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞