本篇文章同时收录在我的个人博客:自定义 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()) {