*本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布

糖护士IOS版效果

image.png

image.png

自定义效果

ScreenGif7.gif

适配效果

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()`这个方法来获取曲线与阴影的交叉点位置。代码有点长就不贴了~~~

image.png

具体源码，请查看该链接