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, y, 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(), x, 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, 5}, 1);
  paint.setpatheffect(effects);
  paint.setantialias(true);
  paint.setstrokewidth(verticallinestrokewidth);
  paint.setcolor(verticallinecolor);
  canvas.drawline(x, toppadding, x, getheight() - bottompadding, paint);
  //描绘交汇圆点
  paint.setpatheffect(null);
  paint.setstyle(paint.style.fill_and_stroke);
  paint.setcolor(color.white);
  canvas.drawcircle(x, y, circleradius, paint);
  paint.setstyle(paint.style.stroke);
  paint.setcolor(circlecolor);
  paint.setstrokewidth(circlestrokewidth);
  canvas.drawcircle(x, y, circleradius, 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, 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下载地址：

或者点击此处本站下载。

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

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