自定义 view 之薄荷 app 的卷尺效果

本篇文章同时收录在我的个人博客：自定义 view 之薄荷 app 的卷尺效果

前几天看到 HenCoder「仿写酷界面」活动——征稿 ，扔物线大大找了几个很酷炫的效果让读者们仿写，最后选出的作品效果也很好，但是没有讲解实现思路，很多人还是不知道怎么做，所以我决定自己动手撸一篇文章记录下学习过程，光看别人写的，自己不动手永远也学不会啊是吧。

我看了几个薄荷卷尺的源码，这里记录下一种实现思路，不一定是最优的方法，仅供学习参考。

先看效果吧，

分析

先看张我画的张图，

可以想想成有一把尺子在屏幕上面左右滑动，需要绘制的部分就是尺子和屏幕重合的部分，那么绘制的关键点就是找到第一个刻度线的位置。

那么这里就是计算线段 E 的长度了，思路如下：

E=F-D
D=C%F
C=A-B

所以化简下就是：

E=F-((A-B)%F)

F: 最小刻度的宽度，已知条件。
A: 卷尺的偏移量，其实就是滑动偏移量，可以动态计算出结果。
B: 屏幕的一半，已知条件。

当然，也可以这样算:
C 除以 F 向上取整就能得出第一个画的刻度是第几个刻度（比如这里得出是第 N 个 刻度），然后再 N*F-C 就是 第一个刻度的坐标了。

第一个刻度位置找到了，那后面的自然也就出来了，现在问题是一共画多少个刻度呢，肯定只会画卷尺落在屏幕上的部分对不对，思路有两种:

• 屏幕宽度 除以 最小刻度的宽度，结果就是需要绘制的刻度个数。
• 在绘制每一个刻度的时候判断横坐标是否超出了屏幕宽度，超出了则结束绘制。

好，分析的差不多了，下面开始计算。

计算偏移量

重写 onTouchEvent 方法

@Override
public boolean onTouchEvent(MotionEvent event) {
  switch (event.getAction()) {