本篇文章已授权微信公众号 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
网友评论