转载自：http://www.jianshu.com/p/3ddd4c8a04e7
糖护士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
3516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
