自定义 View 循环滚动刻度控件

LoopScaleView

先看效果图:

enter description here

LoopScaleView 是一个自定义的刻度尺风格的选值控件,从上面的动图大家可以看到 LoopScaleView 的运行效果.可以设置屏幕内显示的刻度数,也可以设置每一个刻度代表的值得大小。

LoopScaleView.class

Nested class


OnValueChangeListener	刻度取值监听接口

Public methods

方法名	返回值类型	说明
getItemsCount()	int	获取总的刻度数
setCursorColor(int color)	void	设置游标颜色（游标不采用图片时）
setCursorWidth(int width)	void	设置游标宽度（同上）
setCursorMap(Bitmap map)	void	设置图片作为游标
setScaleWidth(int scaleWidth)	void	设置刻度宽度
setShowItemSize(int showItemSize)	void	设置屏幕内可见的大刻度数
setScaleHeight(float scaleHeight)	void	设置刻度的高度
setLineColor(int lineColor)	void	设置底部直线的颜色
setScaleTextColor(int scaleTextColor)	void	设置刻度标值的颜色
setScaleTextSize(int scaleTextSize)	void	设置刻度标值的文字大小
setMaxValue(int maxValue)	void	设置最大值
setOneItemValue(int oneItemValue)	void	设置一个刻度表示的值的大小
setCurrentValue(int currValue)	void	设置当前的值

分解剖析

onMeasure 方法中初始化一个刻度的像素宽度，整个视图的宽度

  @Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);viewHeight = MeasureSpec.getSize(heightMeasureSpec);//一个小刻度的宽度（十进制，每5个小刻度为一个大刻度）scaleDistance = getMeasuredWidth() / (showItemSize * 5);//尺子长度总的个数*一个的宽度viewWidth = maxValue / oneItemValue * scaleDistance;maxX = getItemsCount() * scaleDistance;minX = -maxX;}复制代码

onDraw() 方法重写绘制 ScaleView 的视图

  @Overrideprotected void onDraw(Canvas canvas) {canvas.clipRect(getPaddingStart(), getPaddingTop(), getWidth() - getPaddingRight(), viewHeight - getPaddingBottom());// 绘制底部线条drawLine(canvas);// 绘制游标drawCursor(canvas);paint = new Paint(Paint.ANTI_ALIAS_FLAG);paint.setStrokeWidth(scaleWidth);// 绘制反向的一个刻度尺for (int i = 0; i < maxValue / oneItemValue; i++) {//drawScale 为绘制刻度线的方法drawScale(canvas, i, -1);}//绘制正向的一个刻度尺for (int i = 0; i < maxValue / oneItemValue; i++) {//drawScale 为绘制刻度线的方法drawScale(canvas, i, 1);}}复制代码

可以看出上面的绘制过程，实际上是绘制出了两个刻度尺。经过上面的步骤，静止状态下的 ScaleView 已经绘制完成，接下来就是要让他动起来了

手势识别来处理滑动
在 onTouchEvent() 方法中将触摸事件交给手势识别 GestureDetector.SimpleOnGestureListener 来处理：

  /*** 滑动手势处理*/private GestureDetector.SimpleOnGestureListener gestureListener = new GestureDetector.SimpleOnGestureListener() {@Overridepublic boolean onDown(MotionEvent e) {return true;}//滚动事件public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {scrollView(distanceX);return true;}//快速滑动时间public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {if (!mScroller.computeScrollOffset()) {mScroller.fling((int) currLocation, 0, (int) (-velocityX / 1.5), 0, minX, maxX, 0, 0);setNextMessage(0);}return true;}@Overridepublic boolean onSingleTapUp(MotionEvent e) {return super.onSingleTapUp(e);}};复制代码

上述代码主要注意两个地方：onScroll() 和 onFling()。当正常左右滑动时，触发 onScroll 方法调用 srcollView(float distance) 对整个视图进行重绘。当快速惯性滑动时通过 Scroller 让惯性滑动变得流畅，惯性滑动的状态更新是通过 Handler 进行不断的查询 Scroller 的执行状态得到的，当 Scroller 执行完惯性滑动的动画到达目的地时，停止 Handler 的查询任务，当 onFling 多次触发时只会执行第一次的状态。

循环滚动的实现
开始说到的绘制了正向反向两个方向的刻度尺即是为了实现循环滚动而设定的，在 drawScale() 方法中有如下代码：
```
      if (currLocation + showItemSize / 2 * 5 * scaleDistance >= viewWidth) {currLocation = -showItemSize / 2 * 5 * scaleDistance;float speed = mScroller.getCurrVelocity();mScroller.fling((int) currLocation, 0, (int) speed, 0, minX, maxX, 0, 0);setNextMessage(0);} else if (currLocation - showItemSize / 2 * 5 * scaleDistance <= -viewWidth) {currLocation = showItemSize / 2 * 5 * scaleDistance;float speed = mScroller.getCurrVelocity();mScroller.fling((int) currLocation, 0, (int) speed, 0, minX, maxX, 0, 0);setNextMessage(0);}复制代码
```
当 currLocation 加上可视视图一半的距离大于刻度尺的宽度 viewWidth 或者 currLocation 减去可视视图一半的距离小于 -viewWidth 时（即正向或者反向滑到最大/最小值时）通过为 currLocation 重新赋值将刻度值重置,来达到循环滚动的目的.如果到达临界点时是在 Scroller 执行快速滑动的过程则重置之后需要再为 Scroller 重新设置初速度来达到流畅的滑动.
基本思路就是上面所说的这样了，详细操作大家自己查看 LoopScaleView 的源码。
接入使用
project's build.gradle (工程的 build.gradle)
```
allprojects {repositories {jcenter()maven{url  "http://dl.bintray.com/huxinyu/maven"}}
}复制代码
```
module's build.gradle (模块的build.gradle)
```
dependencies {compile 'com.pandaq:loopscale:1.0.1'
}复制代码
```

xml 文件中进行属性配置，这些属性也可以通过 Java 代码进行修改

  <com.pandaq.loopscaleview.LoopScaleViewandroid:id="@+id/lsv_4"android:layout_width="match_parent"android:layout_height="50dp"android:layout_margin="8dp"android:background="@drawable/loopscaleview_bg"android:padding="8dp"app:cursorColor="@color/colorAccent"app:maxShowItem="4"app:maxValue="1000"app:oneItemValue="5"app:scaleTextColor="@color/colorPrimary"/>复制代码