一步步教你画股票图,K 线图,高仿雪球股票

发表自话题：股票k图四条线颜色代表什么

使用 MarkMan 量取,分时图在 720*1280 分辨率下,高度是是 410,则我们可以把其高度分成410 份.
它一共有 5 条横线,从上到下,每条线距离顶部的距离依次为:10,30,190,360,380.其中第 3 条为虚线.还有一条竖线,水平居中.

依次画出每一条线.

时间的最简单,三个时间是固定的,位置也是固定的.

需要注意的是,绘制文字的 x,y 坐标, x=文字的左边, y=文字的 baseline,文字的 baseline 默认等于 -mPaint.getFontMetrics().top

想了解更多关于文字绘制的细节,请移步到这篇文章 StyleTextView https://github.com/siyehua/StyleTextView

转到 canvas 上来说,其实就是绘制路径,在前面绘制横线的时候,绘制虚线其实就是绘制路径.
注意绘制阴影的时候,要把画笔设置为实心的,这样才会有阴影的效果,同时路径 path 要多连接几个点,包括右下角,左下角,表明折线下方,第五条横线上方,就是阴影部分.

有了绘制时间的经验,我们知道x,y分别代表的是文字的左下角,baseline,直接绘制即可.

绘制最低点的时候需要注意,最低点距离第四条横线的距离,应该与第二条线距离最高点的距离一致.放大雪球股票的图,发现其K线图,以及后面要绘制的蜡烛图,这
两个距离都不相等,虽然无伤大雅.但是如果我们能做到,那就更好不过.

凯哥live中说到,设计或者产品出来一个交互,一个需求,你做不到,没什么关系,因为别人也做不到.但是假设别人做不到,但是你做到了,那么很明显,你就强于别人

在前面绘制文字的时候提到过这篇文章 StyleTextView,发布到郭霖的公众号后,有部分同学说,为什么这么麻烦搞这么多,感觉不需要这么复杂.
实际上如果只是单纯做一个需求,确实不需要多复杂的代码,直接绘制是最简单的,但是绘制也涉及到留白的问题,在一个要求不是特别精确的 View,一两个像素的差距,确实可有可无,甚至有同学直接根据
实际运行出来的效果图,调整空白大小.

但是你为什么调整空白大小,为什么要这么调,调了以后其他的机型适配吗?如果在一个很大的 View 上,字体大小很大,此时能保证也能满足正常视觉吗?

故有时候追求一些细节,对自己的代码,以及技术,都是一种负责任的态度.

至此,绘制基本已经结束了,直接运行,就能看到一个基本K线图,但是还差 K 线图的交互,也就是长按 K 线图的交互,这其实就是一个触摸反馈的过程

触摸

网上有很多的触摸文章教程,这里就不展开篇幅讲解了,这里直接使用手势识别类:GestureDetector

但是实际使用发现,假设手指长按了,就不能再接收到
手指的移动事件,看 GestureDetector 发现,如果它判断是长按就直接 break 了,同时发现它也没有发送手指离开屏幕的事件,这都不是我想要的,所以我就把它源码直接复制出来了,删掉了一些用不到的事件,并
添加了手指离开事件.第二个手指按下,离开事件.

更多详情,请点击这个改造过的 GestureDetector http://www.jianshu.com/app/src/main/java/com/siyehua/klinegraph/GestureDetector.java

添加手势触摸监听,首先在 init 初始化 GestureDetector,并在 onTouch 中拦截触摸事件

分时图总结

至此,分时图的布局,绘制,触摸反馈都已经完整,如果再加上设置数据的方法,就可以作为一个基本的分时图使用了.
详细代码请点击:KLineView http://www.jianshu.com/app/src/main/java/com/siyehua/klinegraph/KLineView.java

标签组：[雪球] 

上一篇：股票K线图里的黑线。蓝线。红线分别代表什么？

下一篇：k线图里标有箭头和数字是什么意思，对股票行 – 手机爱问