www.tt27.tv,生人勿近,美网男单决赛时间
本文实例讲述了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程序设计有所帮助。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Android studio 解决logcat无过滤工具栏的操作
Android Studio 恢复小窗口停靠模式(Docked Mode)
Android studio保存logcat日志到本地的操作
Android Studio快捷键生成TAG、Log.x日志输出介绍
网友评论