LoopScaleView

先看效果图:

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

LoopScaleView.class

Nested class

Public methods

分解剖析

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

    @Override
    protected 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 的视图

    @Override
    protected 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() {
  
        @Override
        public 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;
        }
  
        @Override
        public 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.LoopScaleView
        android: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"/>

  最后

  觉得本文对你有帮助
  简书PandaQ404
  掘金PandaQ
  GithubPandaQAQ
  持续分享中，欢迎关注和 star。。。