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

作者: PandaQ404 | 来源:发表于2017-02-14 15:01 被阅读733次

    LoopScaleView

    先看效果图:

    enter description hereenter 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 方法中初始化一个刻度的像素宽度,整个视图的宽度
        @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。。。

    相关文章

      网友评论

        本文标题:自定义 View 循环滚动刻度控件

        本文链接:https://www.haomeiwen.com/subject/dfwxwttx.html