作者: ztelur
联系方式:segmentfault,csdn。github
本文是android滚动相关的系列文章的第二篇,主要总结一下使用手势相关的代码逻辑。主要是单点拖动,多点拖动,fling和OveScroll的实现。每一个手势都会有代码片段。
对android滚动相关的知识还不太了解的同学能够先阅读一下文章:
为了节约你的时间,我特地将文章大致内容总结例如以下:
- 手势Drag的实现和原理
- 手势Fling的实现和原理
- OverScroll效果和EdgeEffect效果的实现和原理。
具体代码请查看我的github
Drag
Drag是最为主要的手势:用户能够使用手指在屏幕上滑动,以拖动屏幕对应内容移动。实现Drag手势事实上非常easy。过程例如以下:
- 在
ACTION_DOWN
事件发生时。调用getX
和getY
函数获得事件发生的x,y坐标值,并记录在mLastX
和mLastY
变量中。 - 在
ACTION_MOVE
事件发生时。调用getX
和getY
函数获得事件发生的x,y坐标值,将其与mLastX
和mLastY
比較。假设二者差值大于一定限制(ScaledTouchSlop),就运行scrollBy
函数,进行滚动,最后更新mLastX
和mLastY
的值。 - 在
ACTION_UP
和ACTION_CANCEL
事件发生时,清空mLastX
。mLastY
。
@Override
public boolean onTouchEvent(MotionEvent event) {
int actionId = MotionEventCompat.getActionMasked(event);
switch (actionId) {
case MotionEvent.ACTION_DOWN:
mLastX = event.getX();
mLastY = event.getY();
mIsBeingDragged = true;
if (getParent() != null) {
getParent().requestDisallowInterceptTouchEvent(true);
}
break;
case MotionEvent.ACTION_MOVE:
float curX = event.getX();
float curY = event.getY();
int deltaX = (int) (mLastX - curX);
int deltaY = (int) (mLastY - curY);
if (!mIsBeingDragged && (Math.abs(deltaX)> mTouchSlop ||
Math.abs(deltaY)> mTouchSlop)) {
mIsBeingDragged = true;
// 让第一次滑动的距离和之后的距离不至于差距太大
// 由于第一次必须>TouchSlop,之后则是直接滑动
if (deltaX > 0) {
deltaX -= mTouchSlop;
} else {
deltaX += mTouchSlop;
}
if (deltaY > 0) {
deltaY -= mTouchSlop;
} else {
deltaY += mTouchSlop;
}
}
// 当mIsBeingDragged为true时,就不用推断> touchSlopg啦,不然会导致滚动是一段一段的
// 不是非常连续
if (mIsBeingDragged) {
scrollBy(deltaX, deltaY);
mLastX = curX;
mLastY = curY;
}
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
mIsBeingDragged = false;
mLastY = 0;
mLastX = 0;
break;
default:
}
return mIsBeingDragged;
}
多触点Drag
上边的代码仅仅适用于单点触控的手势。假设你是两个手指触摸屏幕。那么它仅仅会依据你第一个手指滑动的情况来进行屏幕滚动。更为致命的是。当你先松开第一个手指时,由于我们少监听了ACTION_POINTER_UP
事件,将会导致屏幕突然滚动一大段距离,由于第二个手指移动事件的x,y值会和第一个手指移动时留下的mLastX
和mLastY
比較,导致屏幕滚动。
假设我们要监听并处理多触点的事件,我们还须要对ACTION_POINTER_DOWN
和ACTION_POINTER_UP
事件进行监听,而且在ACTION_MOVE
事件时,要记录全部触摸点事件发生的x,y值。
- 当
ACTION_POINTER_DOWN
事件发生时,我们要记录第二触摸点事件发生的x,y值为mSecondaryLastX
和mSecondaryLastY
,和第二触摸点pointer的id为mSecondaryPointerId
- 当
ACTION_MOVE
事件发生时,我们除了依据第一触摸点pointer的x,y值进行滚动外,也要更新mSecondayLastX
和mSecondaryLastY
- 当
ACTION_POINTER_UP
事件发生时。我们要先推断是哪个触摸点手指被抬起来啦。假设是第一触摸点,那么我们就将坐标值和pointer的id都更换为第二触摸点的数据;假设是第二触摸点,就仅仅要重置一下数据就可以。
switch (actionId) {
.....
case MotionEvent.ACTION_POINTER_DOWN:
activePointerIndex = MotionEventCompat.getActionIndex(event);
mSecondaryPointerId = MotionEventCompat.findPointerIndex(event,activePointerIndex);
mSecondaryLastX = MotionEventCompat.getX(event,activePointerIndex);
mSecondaryLastY = MotionEventCompat.getY(event,mActivePointerId);
break;
case MotionEvent.ACTION_MOVE:
......
// handle secondary pointer move
if (mSecondaryPointerId != INVALID_ID) {
int mSecondaryPointerIndex = MotionEventCompat.findPointerIndex(event, mSecondaryPointerId);
mSecondaryLastX = MotionEventCompat.getX(event, mSecondaryPointerIndex);
mSecondaryLastY = MotionEventCompat.getY(event, mSecondaryPointerIndex);
}
break;
case MotionEvent.ACTION_POINTER_UP:
//推断是否是activePointer up了
activePointerIndex = MotionEventCompat.getActionIndex(event);
int curPointerId = MotionEventCompat.getPointerId(event,activePointerIndex);
Log.e(TAG, "onTouchEvent: "+activePointerIndex +" "+curPointerId +" activeId"+mActivePointerId+
"secondaryId"+mSecondaryPointerId);
if (curPointerId == mActivePointerId) { // active pointer up
mActivePointerId = mSecondaryPointerId;
mLastX = mSecondaryLastX;
mLastY = mSecondaryLastY;
mSecondaryPointerId = INVALID_ID;
mSecondaryLastY = 0;
mSecondaryLastX = 0;
//反复代码。为了让逻辑看起来更加清晰
} else{ //假设是secondary pointer up
mSecondaryPointerId = INVALID_ID;
mSecondaryLastY = 0;
mSecondaryLastX = 0;
}
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
mIsBeingDragged = false;
mActivePointerId = INVALID_ID;
mLastY = 0;
mLastX = 0;
break;
default:
}
Fling
当用户手指高速划过屏幕,然后高速立马屏幕时,系统会判定用户运行了一个Fling手势。视图会高速滚动,而且在手指立马屏幕之后也会滚动一段时间。Drag表示手指滑动多少距离,界面跟着显示多少距离,而fling是依据你的滑动方向与轻重,还会自己主动滑动一段距离。Filing手势在android交互设计中应用非常广泛:电子书的滑动翻页、ListView滑动删除item、滑动解锁等。所以怎样检測用户的fling手势是非常重要的。
在检測Fling时,你须要检測手指在屏幕上滑动的速度。这是你就须要VelocityTracker
和Scroller
这两个类啦。
- 我们首先使用
VelocityTracker.obtain()
这种方法获得事实上例 - 然后每次处理触摸时间时,我们将触摸事件通过
addMovement
方法传递给它 - 最后在处理
ACTION_UP
事件时。我们通过computeCurrentVelocity
方法获得滑动速度; - 我们推断滑动速度是否大于一定数值(MinFlingSpeed),假设大于,那么我们调用
Scroller
的fling
方法。然后调用
invalidate()
函数。 - 我们须要重载
computeScroll
方法,在这种方法内。我们调用Scroller
的computeScrollOffset()
方法啦计算当前的偏移量。然后获得偏移量,并调用scrollTo
函数,最后调用postInvalidate()
函数。 - 除了上述的操作外。我们须要在处理
ACTION_DOWN
事件时,对屏幕当前状态进行推断,假设屏幕如今正在滚动(用户刚进行了Fling手势)。我们须要停止屏幕滚动。
具体这一套流程是怎样运转的。我会在下一篇文章中具体解释,大家也能够自己查阅代码或者google来搞懂当中的原理。
@Override
public boolean onTouchEvent(MotionEvent event) {
.....
if (mVelocityTracker == null) {
//检查速度測量器,假设为null。获得一个
mVelocityTracker = VelocityTracker.obtain();
}
int action = MotionEventCompat.getActionMasked(event);
int index = -1;
switch (action) {
case MotionEvent.ACTION_DOWN:
......
if (!mScroller.isFinished()) { //fling
mScroller.abortAnimation();
}
.....
break;
case MotionEvent.ACTION_MOVE:
......
break;
case MotionEvent.ACTION_CANCEL:
endDrag();
break;
case MotionEvent.ACTION_UP:
if (mIsBeingDragged) {
//当手指立马屏幕时,获得速度。作为fling的初始速度 mVelocityTracker.computeCurrentVelocity(1000,mMaxFlingSpeed);
int initialVelocity = (int)mVelocityTracker.getYVelocity(mActivePointerId);
if (Math.abs(initialVelocity) > mMinFlingSpeed) {
// 由于坐标轴正方向问题,要加负号。
doFling(-initialVelocity);
}
endDrag();
}
break;
default:
}
//每次onTouchEvent处理Event时,都将event交给时间
//測量器
if (mVelocityTracker != null) {
mVelocityTracker.addMovement(event);
}
return true;
}
private void doFling(int speed) {
if (mScroller == null) {
return;
}
mScroller.fling(0,getScrollY(),0,speed,0,0,-500,10000);
invalidate();
}
@Override
public void computeScroll() {
if (mScroller.computeScrollOffset()) {
scrollTo(mScroller.getCurrX(),mScroller.getCurrY());
postInvalidate();
}
}
OverScroll
在Android手机上,当我们滚动屏幕内容到达内容边界时,假设再滚动就会有一个发光效果。而且界面会进行滚动一小段距离之后再回复原位,这些效果是怎样实现的呢?我们须要使用Scroller
和scrollTo
的升级版OverScroller
和overScrollBy
了,还有发光的EdgeEffect
类。
我们先来了解一下相关的API,理解了这些接口參数的含义,你就能够轻松使用这些接口来实现上述的效果啦。
protected boolean overScrollBy(int deltaX, int deltaY,
int scrollX, int scrollY,
int scrollRangeX, int scrollRangeY,
int maxOverScrollX, int maxOverScrollY,
boolean isTouchEvent)
- int deltaX,int deltaY : 偏移量,也就是当前要滚动的x,y值。
- int scrollX,int scrollY : 当前的mScrollX和mScrollY的值。
- int scrollRangeX,int scrollRangeY: 标示能够滚动的最大的x,y值,也就是你视图真实的长和宽。也就是说。你的视图可视大小可能是100,100,可是视图中的内容的大小为200,200,所以。上述两个值就为200,200
- int maxOverScrollX,int maxOverScrollY:同意超过滚动范围的最大值。x方向的滚动范围就是0~maxOverScrollX,y方向的滚动范围就是0~maxOverScrollY。
- boolean isTouchEvent:是否在
onTouchEvent
中调用的这个函数。所以。当你在computeScroll
中调用这个函数时。就能够传入false。
protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY)
- int scrollX,int scrollY:就是x。y方向的滚动距离。就相当于
mScrollX
和mScrollY
。你既能够直接把二者赋值给对应的成员变量。也能够使用
scrollTo
函数。 - boolean clampedX,boolean clampY:表示是否到达超出滚动范围的最大值。
假设为true。就须要调用
OverScroll
的springBack
函数来让视图回复原来位置。
public boolean springBack(int startX, int startY, int minX, int maxX, int minY, int maxY)
- int startX,int startY:标示当前的滚动值,也就是
mScrollX
和mScrollY
的值。 - int minX,int maxX:标示x方向的合理滚动值
- int minY,int maxY:标示y方向的合理滚动值。
相信看完上述的API之后,大家会有非常多的疑惑,所以这里我来举个样例。
假设视图大小为100*100。当你一直下拉到视图上边缘。然后在下拉,这时,mScrollY
已经达到或者超过正常的滚动范围的最小值了,也就是0,可是你的maxOverScrollY传入的是10,所以。mScrollY
最小能够到达-10,最大能够为110。所以,你能够继续下拉。等到mScrollY
到达或者超过-10时。clampedY就为true。标示视图已经达到能够OverScroll的边界,须要回滚到正常滚动范围,所以你调用springBack(0,0,0,100)。
然后我们再来看一下发光效果是怎样实现的。
使用EdgeEffect
类。
一般来说,当你仅仅上下滚动时,你仅仅须要两个EdgeEffect
实例,分别代表上边界和下边界的发光效果。你须要在以下两个情景下改变EdgeEffect
的状态。然后在draw()
方法中绘制EdgeEffect
- 处理
ACTION_MOVE
时,假设发现y方向的滚动值超过了正常范围的最小值时。你须要调用上边界实例的onPull
方法。假设是超过最大值。那么就是调用下边界的onPull
方法。 - 在
computeScroll
函数中。也就是说Fling手势运行过程中,假设发现y方向的滚动值超过正常范围时的最小值时,调用onAbsorb
函数。
然后就是重载draw
方法。让EdgeEffect
实例在画布上绘制自己。
你会发现,你必须对画布进行移动或者旋转来让EdgeEffect
绘制出上边界或者下边界的发光的效果,由于EdgeEffect
对象自己是没有上下左右的概念的。
@Override
public void draw(Canvas canvas) {
super.draw(canvas);
if (mEdgeEffectTop != null) {
final int scrollY = getScrollY();
if (!mEdgeEffectTop.isFinished()) {
final int count = canvas.save();
final int width = getWidth() - getPaddingLeft() - getPaddingRight();
canvas.translate(getPaddingLeft(),Math.min(0,scrollY));
mEdgeEffectTop.setSize(width,getHeight());
if (mEdgeEffectTop.draw(canvas)) {
postInvalidate();
}
canvas.restoreToCount(count);
}
}
if (mEdgeEffectBottom != null) {
final int scrollY = getScrollY();
if (!mEdgeEffectBottom.isFinished()) {
final int count = canvas.save();
final int width = getWidth() - getPaddingLeft() - getPaddingRight();
canvas.translate(-width+getPaddingLeft(),Math.max(getScrollRange(),scrollY)+getHeight());
canvas.rotate(180,width,0);
mEdgeEffectBottom.setSize(width,getHeight());
if (mEdgeEffectBottom.draw(canvas)) {
postInvalidate();
}
canvas.restoreToCount(count);
}
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
......
case MotionEvent.ACTION_MOVE:
.....
if (mIsBeingDragged) {
overScrollBy(0,(int)deltaY,0,getScrollY(),0,getScrollRange(),0,mOverScrollDistance,true);
final int pulledToY = (int)(getScrollY()+deltaY);
mLastY = y;
if (pulledToY<0) {
mEdgeEffectTop.onPull(deltaY/getHeight(),event.getX(mActivePointerId)/getWidth());
if (!mEdgeEffectBottom.isFinished()) {
mEdgeEffectBottom.onRelease();
}
} else if(pulledToY> getScrollRange()) {
mEdgeEffectBottom.onPull(deltaY/getHeight(),1.0f-event.getX(mActivePointerId)/getWidth());
if (!mEdgeEffectTop.isFinished()) {
mEdgeEffectTop.onRelease();
}
}
if (mEdgeEffectTop != null && mEdgeEffectBottom != null &&(!mEdgeEffectTop.isFinished()
|| !mEdgeEffectBottom.isFinished())) {
postInvalidate();
}
}
.....
}
....
}
@Override
protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
if (!mScroller.isFinished()) {
int oldX = getScrollX();
int oldY = getScrollY();
scrollTo(scrollX,scrollY);
onScrollChanged(scrollX,scrollY,oldX,oldY);
if (clampedY) {
Log.e("TEST1","springBack");
mScroller.springBack(getScrollX(),getScrollY(),0,0,0,getScrollRange());
}
} else {
// TouchEvent中的overScroll调用
super.scrollTo(scrollX,scrollY);
}
}
@Override
public void computeScroll() {
if (mScroller.computeScrollOffset()) {
int oldX = getScrollX();
int oldY = getScrollY();
int x = mScroller.getCurrX();
int y = mScroller.getCurrY();
int range = getScrollRange();
if (oldX != x || oldY != y) {
overScrollBy(x-oldX,y-oldY,oldX,oldY,0,range,0,mOverFlingDistance,false);
}
final int overScrollMode = getOverScrollMode();
final boolean canOverScroll = overScrollMode == OVER_SCROLL_ALWAYS ||
(overScrollMode == OVER_SCROLL_IF_CONTENT_SCROLLS && range > 0);
if (canOverScroll) {
if (y<0 && oldY >= 0) {
mEdgeEffectTop.onAbsorb((int)mScroller.getCurrVelocity());
} else if (y> range && oldY < range) {
mEdgeEffectBottom.onAbsorb((int)mScroller.getCurrVelocity());
}
}
}
}
后记
本篇文章是系列文章的第二篇,大家可能已经知道怎样实现各类手势。可是对当中的机制和原理还不是非常了解,之后的第三篇会解说从本篇代码的视角解说一下android视图绘制的原理和Scroller的机制,希望大家多多关注。
參考文章
http://stackoverflow.com/questions/22843671/android-swipe-vs-fling
https://www.google.com/design/spec/patterns/gestures.html#gestures-drag-swipe-or-fling-details
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1212/2145.html