【移动应用开发技术】教你五分钟实现Android超漂亮的刻度轮播控件实例教程

【移动应用开发技术】教你五分钟实现Android超漂亮的刻度轮播控件实例教程

前言最近一直在做音视频的工作，已经有大半年没有写应用层的东西了，生怕越来越生疏。正好前段时间接了个外包项目，才得以回顾一下。项目中有一个控件挺简洁漂亮的，而且用到的技术也比较基础，比较适合新手学习，所以单独开源出来，希望能对初学者有所帮助。

截图

截屏

一、自定义View的常用方法

相信每个Android程序员都知道，我们每天的开发工作当中都在不停地跟View打交道，Android中的任何一个布局、任何一个控件其实都是直接或间接继承自View的，如TextView、Button、ImageView、ListView等。一些接触Android不久的朋友对自定义View都有一丝畏惧感，总感觉这是一个比较高级的技术，但其实自定义View并不复杂，有时候只需要简单几行代码就可以完成了。说到自定义View，总绕不开下面几个方法1.overridefunonMeasure(widthMeasureSpec:Int,heightMeasureSpec:Int)

  初始化View时，用于测量大小，并对View的大小进行控制，比如可以控制View的宽高比例。2.overridefunonDraw(canvas:Canvas)

  View的绘制回调，所有的画笔、画布操作都在这里。切勿在此方法进行耗时操作，能在外部计算的都在外部计算，并且尽量不要在这里初始化变量。因为正常情况下这个方法会以60fps的速度进行回调，如果有耗时操作，将会卡顿，如果初始化大量对象，则会消耗大量内存。总之，跟画布无关的操作都不要写在这里。3.invalidate()

  用于通知View进行重绘，也就是重新调用onDraw，当我们界面属性发生变化时，就可以调用该方法来进行重绘，而不是调用onDraw，这个方法非常常用。4.overridefunonTouchEvent(event:MotionEvent):Boolean

  相信大家都知道，这个是触摸事件回调。在这里可以处理一些手势操作。二、自定义一个刻度控件RulerView

  由于代码比较多，而且源码里面的注释也比较详细，所以这里只挑重点的几个方法讲解一下。如果有问题，或者错误，欢迎在评论区留言。

  观察本文开始的视频，我们可以发现，该控件虽然看起来挺简洁，但是需要控制的部分却不少，光刻度就有三种类型，还有一些文字。

普通刻度，宽度比较短，颜色比较浅，不带文字。

整10刻度，宽度比较长，颜色相较普通刻度深一点，并且带有文字。

游标刻度，宽度在三类刻度里面是最长的，颜色高亮，并且也带有文字。

标签文字，用于描述该刻度的用途。

普通刻度，宽度比较短，颜色比较浅，不带文字。

整10刻度，宽度比较长，颜色相较普通刻度深一点，并且带有文字。

游标刻度，宽度在三类刻度里面是最长的，颜色高亮，并且也带有文字。

标签文字，用于描述该刻度的用途。

  以上都是需要我们用画笔来绘制的，所以我们定义了以下几个画笔，为了避免在onDraw中频繁更改画笔属性，这里又对文字和刻度定义了单独的画笔，目的是避免任何画笔属性的改变和在onDraw中改变属性导致绘制过于耗时，更重要的是来回更改画笔的属性过于复杂，不便于操作和问题排查。

scalePaint:Paint//刻度画笔

scalePointerPaint:Paint//整10刻度文字画笔

scalePointerTextPaint:Paint//整10刻度文字画笔

cursorPaint:Paint//游标画笔

cursorTextPaint:Paint//游标文字画笔

cursorLabelPaint:Paint//标签文字画笔

scalePaint:Paint//刻度画笔

scalePointerPaint:Paint//整10刻度文字画笔

scalePointerTextPaint:Paint//整10刻度文字画笔

cursorPaint:Paint//游标画笔

cursorTextPaint:Paint//游标文字画笔

cursorLabelPaint:Paint//标签文字画笔

1、从xml设置的属性初始化参数

  除了基础的画笔对象，还需要一些画笔必要的属性，比如我们绘制一个刻度，需要知道刻度位置、大小和间距。所以围绕这些，又定义了一系列属性。这些属性可以由xml定义时提供，由此引出View的另一个重要用法。

  这个用法比较固定，都是这个套路。其中需要注意的是，类似于R.styleable.app_scaleWidth这种id是在values/attrs.xml中定义的，app代表命名空间，可以自定义，scaleWidth就是属性id，跟layout_width这些是一样的。我们在一个命名空间中定义了一个属性id后，就可以像使用layout_width和layout_height那样从xml中向View传递属性了。此时在View的构造方法中可以直接获取这些属性值，代码如下。2、绘制View

  本文并没有使用View提供的scrollTo和scrollBy来控制滚动，而是重新定义一个x,y属性来记录滚动位置，通过这个属性绘制相应的位置，来实现滚动效果。这样操作可以通过指定绘制区域（屏幕外的内容不绘制，感兴趣的同学可以去尝试实现）来解决性能问题。

  drawScale通过遍历items来绘制每一个元素，包括刻度和对应的文字，都是比较基本的操作。需要注意的是canvas.drawText默认情况下的x,y是指文字的左下角位置。3、支持滚动

  Android的手势滚动操作比较简单，不需要自己去实现各种逻辑控制，而是通过系统提供的Scroller来计算滚动位置。

  首先我们需要一个GestureDetectorCompat和OverScroller，前者用于手势监听，后者通过MotionEvent来计算滚动位置。

1.mGestureDetector:GestureDetectorCompat

2.scroller:OverScroller

1.mGestureDetector:GestureDetectorCompat2.scroller:OverScroller

  构造一个GestureDetectorCompat对象，需要先提供一个OnGestureListener，用来监听onScroll和onFling事件。其实就是MotionEvent经过GestureDetectorCompat处理之后，就变成了可以直接使用的滚动和惯性滚动事件，然后通过这两个回调通知我们。

  在onScroll中，我们通过横向和纵向滚动距离来计算滚动方向，如果横向滚动距离大于纵向滚动距离，我们则可以认为是横向滚动，反之则是纵向滚动。本文只需要纵向滚动。

  拿到滚动方向之后，我们就可以对滚动位置x,y进行累加，记录每一次滑动之后的新的位置。最后通过postInvalidateOnAnimation或invalidate来通知重新绘制，onDraw根据新的x,y绘制对应位置的画面，来实现滑动。

  虽然通过onScroll已经实现了View的滑动，但只是实现跟随手指运动，还没有实现“抛”的动作。在现实世界中，运动是有惯性的，如果只实现onScroll，一切都显得很生硬。那么如何实现惯性运动呢，我们自己计算？想想都可怕，这么多运动函数，相信不是一般人能应付的来的。幸运的是，这个计算我们可以交给GestureDetectorCompat的onFling。

  onFling有四个参数，前两个是MotionEvent，分别代表前后两个触摸事件。velocityX:Float代表X轴滚动速率，velocityY:Float代表Y轴滚动速率，我们不需要关心这两个值如何，直接交给scroller处理即可。

  这里也许有人要问了，我们的手指离开屏幕之后便不再产生事件，View是如何实现持续滑动的呢。再回头看一下onFling回调也确实如此，onFling只会根据手指离开屏幕前两个MotionEvent来计算速率，之后就再也没有回调，所以scroller.fling也仅仅是调用了一次，并不能持续滚动。那我们如何实现持续的惯性滚动呢？

  要实现持续的惯性滚动，就得依赖于overridefuncomputeScroll()，该方法由draw过程中调用，我们可以通过invalidate->onDraw->computeScroll->invalidate这样一个循环来控制惯性滚动，直至惯性滚动停止，具体实现可以参考文章最后的源码。  至此自定义View的绘制和事件两个重要部分都讲完了。喜欢的话记得点赞、评论和关注，您的关注是我的鼓励。文章最后贴出相关源码，欢迎查阅学习。如果有问题，或者错误，欢