前言
之前我们已经把canvas的绘制部分搞定了,现在最关键的就剩下手势滑动了,想到手势滑动,我第一个想到的是Scroller,什么也别说了,赶紧搞起来。
正文
因为手势滑动的功能和canvas没有什么直接的联系,为了防止我手贱误改了之前的功能,所以我们新建一个基类:BaseScrollerView,专门实现和手势移动有关的功能,然后让CanvasChart继承BaseScrollerView就完美了。
手势处理肯定重写onTouchEvent方法,代码并不多,我就直接全部贴出来,一起分析:
/** * Created by li.zhipeng on 2018/5/3. */ open class BaseScrollerView(context: Context, attributes: AttributeSet?, defStyleAttr: Int) : View(context, attributes, defStyleAttr) { constructor(context: Context, attributes: AttributeSet?) : this(context, attributes, 0) constructor(context: Context) : this(context, null) companion object { /** * 摩擦系数,根据速度计算滑行的距离 * */ private const val FLING_COEFFICIENT = 25 } /** * x轴的刻度间隔 * * 因为x轴是可以滑动的,所以只有刻度的数量这一个属性 * */ var xLineMarkCount: Int = 5 /** * 数据适配器 * */ var adapter: BaseDataAdapter? = null set(value) { field = value invalidate() value?.addObserver { _, _ -> // 当数据发生改变的时候,立刻重绘 invalidate() } // 计算最大宽度 calculateMaxWidth() } /** * 最大宽度,大于等于width * */ protected var maxWidth: Int = 0 /** * 是否能滑动 * */ private var canScroll: Boolean = false /** * 手指按下的X坐标 */ private var xDown: Float = 0f /** * 手指移动的X坐标 */ private var xMove: Float = 0f /** * 滚动器Scroller * */ private val scroller: Scroller = Scroller(context) /** * 用于计算手指滑动的速度。 */ private var velocityTracker: VelocityTracker? = null /** * 计算最大宽度 * */ private fun calculateMaxWidth() { // 得到数据的数量 val count = adapter?.maxDataCount ?: 0 maxWidth = if (count < xLineMarkCount) { canScroll = false width } else { canScroll = true width / xLineMarkCount * count } } /** * 创建VelocityTracker对象,并将触摸事件加入到VelocityTracker当中。 * * @param event * 右侧布局监听控件的滑动事件 */ private fun createVelocityTracker(event: MotionEvent) { if (velocityTracker == null) { velocityTracker = VelocityTracker.obtain() } velocityTracker!!.addMovement(event) } /** * 获取手指在绑定布局上的滑动速度。 * * @return 滑动速度,以每秒钟移动了多少像素值为单位。 */ private fun getScrollVelocity(): Float { velocityTracker!!.computeCurrentVelocity(1000) val velocity = velocityTracker!!.xVelocity return Math.abs(velocity) } /** * 回收VelocityTracker对象。 */ private fun recycleVelocityTracker() { velocityTracker!!.recycle() velocityTracker = null } override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { super.onMeasure(widthMeasureSpec, heightMeasureSpec) calculateMaxWidth() } /** * 重写手势 * */ @SuppressLint("ClickableViewAccessibility") override fun onTouchEvent(event: MotionEvent): Boolean { // 如果不能滑动,不处理手势滑动 if (!canScroll) { return false } // 计算滑动的速度 createVelocityTracker(event) when (event.action) { // 记录手指按下的坐标 MotionEvent.ACTION_DOWN -> { xDown = event.rawX } // 手势移动 MotionEvent.ACTION_MOVE -> { // 更新xDown的坐标 if (xMove != -1f) { xDown = xMove } // 记录当前的x坐标 xMove = event.rawX // 计算移动的位置 val scrolledX = (xDown - xMove).toInt() // 如果已经滚动到最左边了,设置scrollTo 为0 if (scrollX + scrolledX < 0) { scrollTo(0, 0) return true } // 如果已经滑动到最右边了,设置scrollTo 为宽度 else if (scrollX + width + scrolledX > maxWidth) { scrollTo(maxWidth - width, 0) return true } scrollBy(scrolledX, 0) } // 手势抬起 MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> { val dx = calculateFlingDistance() // startScroll()方法来初始化滚动数据并刷新界面 scroller.startScroll(scrollX, 0, dx, 0) invalidate() recycleVelocityTracker() // 重置配置信息 reset() } } return true } /** * 手势结束后,重置一些信息 * */ private fun reset() { xMove = -1f } /** * 计算滑动的惯性距离 * */ private fun calculateFlingDistance(): Int { // 判断是左滑还是右滑 val isLeft = (xMove - xDown) >= 0 val velocity = getScrollVelocity() Log.e("lzp", "velocity is :$velocity") var dx = Math.abs(velocity / FLING_COEFFICIENT) if (isLeft) { dx = -dx } // 如果滑动到了最左边, if (scrollX + dx < 0) { dx = -scrollX.toFloat() } // 如果已经滑动到了最右边 else if (scrollX + dx > maxWidth - width) { dx = maxWidth - width - scrollX.toFloat() } Log.e("lzp", "scrollX is :$scrollX") Log.e("lzp", "dx is :$dx") return dx.toInt() } override fun computeScroll() { // 第三步,重写computeScroll()方法,并在其内部完成平滑滚动的逻辑 if (scroller.computeScrollOffset()) { scrollTo(scroller.currX, scroller.currY) invalidate() } } }
我们把之前在CanvasChartView中定义的adapter和xLineMarkCount移动到这里,因为我们要计算图表的最宽宽度,如果数据的长度比最大刻度要大,图表是可以滑动的,图表宽度的计算公式:
chartWidth = width(宽度)/ xLineMarkCount(刻度数量)* count(要绘制的数据的长度)
这个宽度用来做边界检查,滚动到最右边就没有不需要再向右滚动了,那么可以scrollX的范围就是:[ 0, chartWidth - width]。
我们还使用了计算手势滑动速度的辅助类VelocityTracker,帮助我们在手势抬起的时候计算惯性滚动的距离,我这里很明显是偷懒了,用一种比较笨的方式来设置惯性滚动的值,不过后面我们会进行优化。
主要内容是Scroller的使用,我们重点看一下:
/** * Created by li.zhipeng on 2018/5/3. */ open class BaseScrollerView(context: Context, attributes: AttributeSet?, defStyleAttr: Int) : View(context, attributes, defStyleAttr) { ... /** * 滚动器Scroller * */ private val scroller: Scroller = Scroller(context) ... /** * 重写手势 * */ @SuppressLint("ClickableViewAccessibility") override fun onTouchEvent(event: MotionEvent): Boolean { // 如果不能滑动,不处理手势滑动 if (!canScroll) { return false } // 计算滑动的速度 createVelocityTracker(event) when (event.action) { // 记录手指按下的坐标 MotionEvent.ACTION_DOWN -> { xDown = event.rawX } // MotionEvent.ACTION_MOVE -> { // 更新xDown的坐标 if (xMove != -1f) { xDown = xMove } // 记录当前的x坐标 xMove = event.rawX // 计算移动的位置 val scrolledX = (xDown - xMove).toInt() // 如果已经滚动到最左边了,设置scrollTo 为0 if (scrollX + scrolledX < 0) { scrollTo(0, 0) return true } // 如果已经滑动到最右边了,设置scrollTo 为宽度 else if (scrollX + width + scrolledX > maxWidth) { scrollTo(maxWidth - width, 0) return true } scrollBy(scrolledX, 0) } // 手势抬起 MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> { val dx = calculateFlingDistance() // startScroll()方法来初始化滚动数据并刷新界面 scroller.startScroll(scrollX, 0, dx, 0) invalidate() recycleVelocityTracker() // 重置配置信息 reset() } } return true } override fun computeScroll() { // 第三步,重写computeScroll()方法,并在其内部完成平滑滚动的逻辑 if (scroller.computeScrollOffset()) { scrollTo(scroller.currX, scroller.currY) invalidate() } } }
当我们手势在MOVE的时候,直接调用View.scrollTo或者View.scrollBy就可以了:
scrollTo(x, y) : 的参数是绝对位置,滚动到x,y的位置;
scrollBy(x, y) : 的参数是相对位置,滚动到相对现在的位置,偏移x, y相应的坐标距离。
当时手势抬起的时候我们调用
scroller.startScroll(scrollX, 0, dx, 0)
通知scroller我们还要继续滚动:从scrollX到dx,为了完成滚动的效果,我们还需要重写实现computeScroll方法,否则是没有效果的,先判断是否有需要滚动的偏移值,然后直接滚动到scroller计算的x,y坐标。
最后看一下效果:
???,好像不太对啊,为什么我们的坐标轴也跟着一起滑动了?看来是整个View都滑动了,所以我们的Canvas画布也跟着一起滑动了,所以才出现了这么尴尬情况,刚才的成就感一扫而空。
总结
看来用Scroller这种形式是不行了,不过我们从中获得了非常宝贵的经验:
1、scrollerTo,scrollerBy会移动Canvas;
2、View上只能看到做多6个点,但是我们把所有的点都画出来了,性能上可能是个坑;
如果我们不用Scroller,而是自己去控制Canvas的偏移呢,例如画坐标轴时Canvas不偏移,画虚线和数据的时候再根据ScrollX偏移Canvas?
嗯,这个方法可行,而且计算偏移值的逻辑我们已经写好了,只是要修改scrollTo,scrollBy,scroller有关的地方就可以了,那么下一篇我们来实现刚才总结的第二套方案。
github下载地址(本文的内容请看view包中的类)