图表CanvasChartView（二）：手势滑动方案一
前言
之前我们已经把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移动到这里，因为我们要计算图表的最宽宽度，如果数据的长度比最大刻度要大，图表是可以滑动的，图表宽度的计算公式：
<pre class="html" style="box-sizing: border-box; margin: 0px 0px 24px; padding: 0px 16px; overflow-x: auto; background-color: rgb(240, 240, 240); font-family: Consolas, Inconsolata, Courier, monospace; font-size: 12px; line-height: 20px; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">chartWidth = width（宽度）/ xLineMarkCount（刻度数量）* count（要绘制的数据的长度）</pre>
这个宽度用来做边界检查，滚动到最右边就没有不需要再向右滚动了，那么可以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坐标。
最后看一下效果:
image
???，好像不太对啊，为什么我们的坐标轴也跟着一起滑动了？看来是整个View都滑动了，所以我们的Canvas画布也跟着一起滑动了，所以才出现了这么尴尬情况，刚才的成就感一扫而空。
总结
看来用Scroller这种形式是不行了，不过我们从中获得了非常宝贵的经验：
1、scrollerTo，scrollerBy会移动Canvas；
2、View上只能看到做多6个点，但是我们把所有的点都画出来了，性能上可能是个坑；
如果我们不用Scroller，而是自己去控制Canvas的偏移呢，例如画坐标轴时Canvas不偏移，画虚线和数据的时候再根据ScrollX偏移Canvas？
嗯，这个方法可行，而且计算偏移值的逻辑我们已经写好了，只是要修改scrollTo，scrollBy，scroller有关的地方就可以了，那么下一篇我们来实现刚才总结的第二套方案。
github下载地址（本文的内容请看view包中的类）
