本篇是 陈秀相 的第二篇投稿，篇幅不长，实现了一个刻度尺的自定义View，属于小技巧类的文章，很适合在周五的时候阅读。
最后祝大家周末愉快！
陈秀相 的博客地址：
http://blog.csdn.net/u012305710
前段时间用了京东金融的APP其中有一个选择金钱的效果感觉很炫就决定模仿下，下面是两张对比照。
这篇文章能够学到的知识点主要包含了：
Canvas 画布的使用；
触摸事件的处理；
Scroller 惯性滑动的处理；
一些数学的加减运算 。
一些初始化画笔的操作就不再这里赘述了，下面直接讲自定义View几个方法。按照顺序来：
onMeasure方法 中主要是 测量View的大小，这里我们给刻度尺在 wrap_content 的时候设置一个默认的高度。
onDraw方法 这是我们一个主要的方法在里面 进行View的绘制，看效果图我们分为几个步骤：
画底部横线
画刻度
画值
画底部横线很简单就是画一条线：
canvas.drawLine(0, mStartY, getWidth(), mStartY, mLinePaint);
画刻度（10个格子为一个高点） 和 画当前刻度值 代码如下：
其实这段是项目中最重要的一部分，下面来解释下 13代表每隔13个像素画一个刻度，20000代表刻度的最大值，其他解释之前要看下触摸事件怎么处理的。
下面解释下：
(-lastMoveX + start)：比方说当前屏幕左侧刻度为10，就是向左滑动了130个像素，看触摸事件知道 lastMoveX 为 -130，这样 -lastMoveX+stat=130+10*13=260 像素所以屏幕左侧刻度应该为20，这就正好符合。
其实到这里项目已经可以运行了，但是滑动一下就卡住了，这时候体验就特别不好，这时候就使用 Scoller的fling函数 实现 View的甩动。
首先需要计算 1秒内运动了多少个像素：
velocityTracker.computeCurrentVelocity(1000);
下面调用 fling函数：
<800 是在运行中发现如果不加这个判断有的时候稍微滑动一下View就跑了，所以为了体验更好加入的。-Math.abs(xVelocity) + 0.5) 是因为左右滑动的 xVelocity 值不一样，为了方便处理改成统一的，方便在下面的方法中计算，可以打印下看下实际的值，这时候还要调用 computeScroll 配合使用并在里面进行一些计算。
到此整个项目就结束了，总结下主要是 一些计算 和 Scoller的使用 在看的时候不懂得地方可以打印日志比较下应该就明白了。
最后附上一些函数的解释：
点击最后 阅读原文 可以下载源码。
如果你有好的技术文章想和大家分享，欢迎向我的公众号投稿，投稿具体细节请在公众号主页点击“投稿”菜单查看。
欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号：
扫一扫
3443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
