绘制区域为绿色加红色

我们根据x轴方向当前已滚动的距离getScrollX()计算第一个显示的label下标,再加上控件宽度和一个label距离(右侧多绘制的一个label的距离)计算出最后一个label的下标,只需要绘制两个下标中间即可,其他的就是数学问题了。
多个点的连接使用的贝塞尔曲线,代码参考自:https://www.jianshu.com/p/98088ff77607
3. 触摸控制并处理多指触控问题(手指拖动图表可移动)
触摸控制是根据第一个event点移动的距离,调用view的scrollBy方法滚动view,主要代码如下
//处理滑动 计算现在的event坐标和上一个触摸事件的坐标来计算偏移量 决定scrollBy的多少
@Override
public boolean onTouchEvent(MotionEvent event) {
…
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
…
//记录首个触控点的id
mActivePointerId = event.findPointerIndex(event.getActionIndex());
… 《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》无偿开源 徽信搜索公众号【编程进阶路】
mLastX = event.getX();
…
break;
case MotionEvent.ACTION_MOVE:
if (mActivePointerId == INVALID_ID || event.findPointerIndex(mActivePointerId) == INVALID_ID) {
break;
}
//计算首个触控点移动后的坐标
float moveX = mLastX - event.getX(mActivePointerId);
if (Math.abs(moveX) > IGNORE_MOVE_OFFSET) {
…
mLastX = event.getX(mActivePointerId);
scrollBy((int) moveX, 0);
}
break;
case MotionEvent.ACTION_UP:
mActivePointerId = INVALID_ID;
mLastX = 0;
…
break;
case MotionEvent.ACTION_CANCEL:
mActivePointerId = INVALID_ID;
mLastX = 0;
…
break;
}
return true;
}
scrollBy方法内部会调用scrollTo方法,重写了scrollTo方法在里面进行一些选中下标的判断和最小最大滚动位置的拦截
@Override
public void scrollTo(int x, int y) {
//默认左边缘为x最小值-半个控件的宽度
if (x < mMinPosition) {
x = mMinPosition;
}
//默认右边缘为x最大值+半个控件的宽度
if (x > mMaxPosition) {
x = mMaxPosition;
}
if (x != getScrollX()) {
super.scrollTo(x, y);
}
mSelectIndex = scrollX2Index(x);
}
注意 在move事件中需要根据第一个触控点id计算移动距离,直接调用event.getX()方法,会有多点触控问题(复现步骤:一个手指滑动后,按下第二个手指,第一个手指抬起,view会自动滚动)
因为后面会有点击事件的判断,所以在move时判断如果移动距离小于IGNORE_MOVE_OFFSET = 2.5时,忽略,这样当手机滑动比较慢时,会有部分滑动事件被忽略掉的情况,不过2.5这个值自己滑动时觉得体验还可以,再大的话慢速滑动会有卡顿,太小的话点击事件的判定会过于精确。
4. 惯性滚动
惯性滚动的实现需要用到VelocityTracker计算up事件时的速度,OverScroller处理fling事件
主要思路是,当up事件发生时,判断手指速度,若速度小于最小值,scrollBackToExactPosition()直接将当前选中下标滚动到中心区域;若速度小于最大值按原速度计算否则按最大速度计算,根据此速度 当前x方向偏移量 可scrollTo的最小、最大值调用fling方法,并调用invalidate()方法,invalidate()内部几次回调会调用view的draw方法,在view的draw方法中调用computeScroll()方法,若惯性滚动未结束,调用scrollTo方法将view滚动到该速度应滚动到的位置,再调用postInvalidate(),几次回调又会重新调用view的draw方法,循环调用scrollTo将view再进行滚动 如此实现惯性滚动 直至滚动结束
5. 回滚
这个主要也是数学题,需要回滚的距离过大时,使用OverScroller慢速回滚,若过小则立刻回弹
//触摸事件或惯性滚动结束后 应滚动到中心位置
private void scrollBackToExactPosition() {
float rightPosition = mSelectIndex * mParent.getXLabelInterval() - (float) getWidth() / 2;
if (Math.abs(getScrollX() - rightPosition) > IGNORE_OFFSET) {
int dx = Math.round(rightPosition - getScrollX());
if (Math.abs(dx) > MIN_SCROLLER_DP) {
//渐变回弹
mOverScroller.startScroll(getScrollX(), getScrollY(), dx, 0, 500);
invalidate();
} else {
//立刻回弹
scrollBy(dx, 0);
6. 点击选中
点击事件的判定:最开始的想法是,判断事件如果是down紧接up即为点击,后来发现这种判定比较苛刻,因为有些点击事件会引起略微的move事件,所以在move事件中判断如果move距离较短,则忽略,这种方法的判定目前没有发现问题,如果大家有好的想法,欢迎讨论。
判定为点击事件后,要根据点击点的坐标位置和当前已滚动的距离,计算出点击点所在的下标,改变需要选中的下标,滚动到指定下标
7. 处理嵌套滚动
由于这个view是横向滚动的,避免被父View拦截事件,我们需要在横向滑动时拦截事件进行处理;在纵向滑动时不作拦截,交由父view AppBarLayout处理
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
…
//记录首个触控点的id
mActivePointerId = event.findPointerIndex(event.getActionIndex());
…
mLastX = event.getX();
mLastY = event.getY();
parent.requestDisallowInterceptTouchEvent(false);//按下时开始让父控件不要处理任何touch事件
break;
case MotionEvent.ACTION_MOVE:
if (mActivePointerId == INVALID_ID || event.findPointerIndex(mActivePointerId) == INVALID_ID) {
break;
}
//计算首个触控点x方向移动距离
float moveX = mLastX - event.getX(mActivePointerId);
//计算首个触控点y方向移动距离
float moveY = mLastY - event.getY(mActivePointerId);
//判断x方向移动距离大于等于y方向距离 则判断为x轴滚动即滑动图表 反之判断为y轴滚动将事件交由父布局处理
if (Math.abs(moveX) >= Math.abs(moveY)) {
if (Math.abs(moveX) > IGNORE_MOVE_OFFSET) {
parent.requestDisallowInterceptTouchEvent(true);
mLastX = event.getX(mActivePointerId);
…
}
} else {
if (Math.abs(moveY) > IGNORE_MOVE_OFFSET) {
parent.requestDisallowInterceptTouchEvent(false);
mLastY = event.getY(mActivePointerId);
}
se {
if (Math.abs(moveY) > IGNORE_MOVE_OFFSET) {
parent.requestDisallowInterceptTouchEvent(false);
mLastY = event.getY(mActivePointerId);
}
Android 自定义图表:实现WheelChart组件
本文介绍如何在Android中实现一个可触摸控制、惯性滚动、回滚、点击选中的图表组件WheelChart。详细讲解了触摸事件处理、多指触控、惯性滚动的实现原理以及处理嵌套滚动的方法。

被折叠的 条评论
为什么被折叠?



