Android开发实现绘制淘宝收益图折线效果示例

概述本文实例讲述了Android开发实现绘制淘宝收益图折线效果。分享给大家供大家参考，具体如下：

本文实例讲述了AndroID开发实现绘制淘宝收益图折线效果。分享给大家供大家参考，具体如下：

实现的效果我一会贴上，我先说下原理，我们知道要实现在canvas上画线，不就是要搞一个paint嘛，然后首先肯定要设置下paint的属性，那么画文字呢，不就是Textpaint吗，对，就是这么简单，接下来怎么画，折线图主要分为X轴和y轴，x轴表示日期，y表示收益，好，说道这里，大家应该知道怎么去做了，下面直接贴代码

这个方法是，画x,y坐标系的，以及上面的日期和收益了

private voID drawCoordinate(Canvas canvas) {  //坐标系画笔  Paint coordinatePaint = new Paint();  coordinatePaint.setAntiAlias(true);  coordinatePaint.setstrokeWIDth(1);  coordinatePaint.setcolor(getResources().getcolor(R.color.c5));  //坐标系文字画笔  TextPaint coordinateTextPaint = new TextPaint();  coordinateTextPaint.setAntiAlias(true);  coordinateTextPaint.setTextSize(scaleTextSize);  coordinateTextPaint.setAntiAlias(true);  coordinateTextPaint.setcolor(scaleTextcolor);  coordinateTextPaint.setTextAlign(Align.CENTER);  //水平的刻度线  float verticalScaleStep = getVerticalScaleStep();  coordinateTextPaint.setTextAlign(Align.RIGHT);  float textHeight = getTextHeight(coordinateTextPaint,"8");  for (int i = 0; i < maxVerticalScaleValue; i++) {    float y = getHeight() - bottompadding - (verticalScaleStep * i);    canvas.drawline(leftpadding,y,getWIDth() - rightpadding,coordinatePaint);    canvas.drawText(i + "",leftpadding - 13,y + textHeight / 2,coordinateTextPaint);  }  //垂直的刻度线  float horizontalScaleStep = getHorizontalScaleStep();  for (int i = 0; i < line.getSize(); i++) {    float x = leftpadding + (horizontalScaleStep * i);    if (i == 0) {      canvas.drawline(x,toppadding,x,getHeight() - bottompadding,coordinatePaint);    }    coordinateTextPaint.setcolor(mtouchIndex == i ? verticallinecolor : scaleTextcolor);    coordinateTextPaint.setTextAlign(i == 0 ? Align.left : Align.CENTER);    canvas.drawText(line.getPoint(i).getX(),getHeight() - bottompadding + textHeight + 10,coordinateTextPaint);  }}

但是产品有个需求啊，就是点击当前日期可以查看我的收益，并且在交汇点上展示出来

private voID drawCurve(Canvas canvas) {  Paint curvePaint = new Paint();//曲线画笔  curvePaint.setcolor(curvecolor);  curvePaint.setAntiAlias(true);  curvePaint.setstrokeWIDth(curvestrokeWIDth);  float horizontalScaleStep = getHorizontalScaleStep();  float lastXPixels = 0,newYPixels = 0;  float lastYPixels = 0,newXPixels = 0;  float useHeight = getHeight() - bottompadding - toppadding;  for (int i = 0; i < line.getSize(); i++) {    float yPercent = line.getPoint(i).getY() / maxVerticalScaleValue;    if (i == 0) {      lastXPixels = leftpadding + i * horizontalScaleStep;      lastYPixels = getHeight() - bottompadding - useHeight * yPercent;    } else {      newXPixels = leftpadding + i * horizontalScaleStep;      newYPixels = getHeight() - bottompadding - useHeight * yPercent;      canvas.drawline(lastXPixels,lastYPixels,newXPixels,newYPixels,curvePaint);      lastXPixels = newXPixels;      lastYPixels = newYPixels;    }    line.getPoint(i).flineX = lastXPixels;    line.getPoint(i).flineY = lastYPixels;  }}

点击交汇点，有文字提示说明，

private voID drawTipRect(Canvas canvas) {  if (mtouchIndex == -1) return;  linePoint point = line.getPoint(mtouchIndex);  float x = point.flineX;  float y = point.flineY;  // 描绘竖线  Paint paint = new TextPaint();  PathEffect effects = new DashPathEffect(new float[]{5,5,5},1);  paint.setPathEffect(effects);  paint.setAntiAlias(true);  paint.setstrokeWIDth(verticallinestrokeWIDth);  paint.setcolor(verticallinecolor);  canvas.drawline(x,paint);  //描绘交汇圆点  paint.setPathEffect(null);  paint.setStyle(Paint.Style.FILL_AND_stroke);  paint.setcolor(color.WHITE);  canvas.drawCircle(x,circleRadius,paint);  paint.setStyle(Paint.Style.stroke);  paint.setcolor(circlecolor);  paint.setstrokeWIDth(circlestrokeWIDth);  canvas.drawCircle(x,paint);  float mIDY = (toppadding + getHeight() - bottompadding) / 2;  float mIDX = (leftpadding + getWIDth() - rightpadding) / 2;  //描绘圆角矩形  TextPaint textPaint = new TextPaint();  textPaint.setTextSize(tipTextSize);  textPaint.setTextAlign(Align.CENTER);  textPaint.setcolor(tipTextcolor);  textPaint.setAntiAlias(true);  String label = tipPrefix + point.getY();  float textWIDth = textPaint.measureText(label) + 15;  float textHeight = getTextHeight(textPaint,label) + 8;  float hmargin = 10;//水平间距  float vmargin = 8;//垂直间距  float w = textWIDth + hmargin * 2;//宽  float h = textHeight + vmargin * 2;//高  RectF rect = new RectF();  if (x > mIDX) {    rect.right = x - hmargin;    rect.left = x - w;  } else {    rect.left = x + hmargin;    rect.right = x + w;  }  if (y > mIDY) {    rect.top = y - h;    rect.bottom = y - vmargin;  } else {    rect.bottom = y + h;    rect.top = y + vmargin;  }  Paint roundRectPaint = new Paint();  roundRectPaint.setcolor(tipRectcolor);  roundRectPaint.setStyle(Paint.Style.FILL);  roundRectPaint.setAntiAlias(true);  canvas.drawRoundRect(rect,3,roundRectPaint);  // 描绘圆角矩形中间的文字  float roundtextx = (rect.left + rect.right) / 2;  float roundTextY = (rect.top + rect.bottom + getTextHeight(textPaint,label)) / 2;  canvas.drawText(label,roundtextx,roundTextY,textPaint);}

好了核心的代码就这么多了，由于我们把它当做的是控件再用，那么我们在初始化的时候，肯定会引入一些自定义的样式表，

private voID initVIEws(AttributeSet attrs,int defStyle) {  TypedArray typedArray = getContext().obtainStyledAttributes(attrs,R.styleable.lineGraph,defStyle,0);  scaleTextSize = typedArray.getDimension(R.styleable.lineGraph_scale_text_size,20);  scaleTextcolor = typedArray.getcolor(R.styleable.lineGraph_scale_text_color,getResources().getcolor(R.color.c5));  tipRectcolor = typedArray.getcolor(R.styleable.lineGraph_tip_rect_color,getResources().getcolor(R.color.c8));  tipTextSize = typedArray.getDimension(R.styleable.lineGraph_tip_text_size,22);  tipTextcolor = typedArray.getcolor(R.styleable.lineGraph_tip_text_color,getResources().getcolor(R.color.c12));  curvestrokeWIDth = typedArray.getDimension(R.styleable.lineGraph_curve_stroke_wIDth,4);  curvecolor = typedArray.getcolor(R.styleable.lineGraph_curve_color,getResources().getcolor(R.color.c8));  verticallinestrokeWIDth = typedArray.getDimension(R.styleable.lineGraph_vertical_line_stroke_wIDth,2);  verticallinecolor = typedArray.getcolor(R.styleable.lineGraph_vertical_line_color,getResources().getcolor(R.color.c8));  circlestrokeWIDth = typedArray.getDimensionPixelSize(R.styleable.lineGraph_circle_stroke_wIDth,3);  circlecolor = typedArray.getcolor(R.styleable.lineGraph_circle_color,getResources().getcolor(R.color.c8));  circleRadius = typedArray.getDimensionPixelSize(R.styleable.lineGraph_circle_radius,7);  typedArray.recycle();  bottompadding = dip2px(getContext(),20);  toppadding = dip2px(getContext(),10);  leftpadding = dip2px(getContext(),20);  rightpadding = dip2px(getContext(),10);}

样式表文件我就不多说了，行如下面的格式，

<declare-styleable name="lineGraph">  <attr name="scale_text_size" format="dimension" />  <attr name="scale_text_color" format="color" />  <attr name="tip_text_size" format="dimension" />  <attr name="tip_text_color" format="color" />  <attr name="tip_rect_color" format="color" />  <attr name="curve_stroke_wIDth" format="dimension" />  <attr name="curve_color" format="color" />  <attr name="vertical_line_stroke_wIDth" format="dimension" />  <attr name="vertical_line_color" format="color" />  <attr name="circle_stroke_wIDth" format="dimension" />  <attr name="circle_color" format="color" />  <attr name="circle_radius" format="dimension" /></declare-styleable>

最后贴上个效果图：

git下载地址：https://github.com/xiangzhihong/lineview

或者点击此处本站下载。

更多关于AndroID相关内容感兴趣的读者可查看本站专题：《Android图形与图像处理技巧总结》、《Android开发入门与进阶教程》、《Android调试技巧与常见问题解决方法汇总》、《Android基本组件用法总结》、《Android视图View技巧总结》、《Android布局layout技巧总结》及《Android控件用法总结》

希望本文所述对大家AndroID程序设计有所帮助。

总结

以上是内存溢出为你收集整理的Android开发实现绘制淘宝收益图折线效果示例全部内容，希望文章能够帮你解决Android开发实现绘制淘宝收益图折线效果示例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。