滑动效果的产生
滑动一个 View ,其实就是移动一个 View,本质上是对 View 的坐标位置进行不停的改变。那么要实现这个效果,就必须要监听用户的触摸事件,根据传入的事件类型和坐标,动态且不断的改变 View 的坐标。
以下Demo 在 github 均能获取
首先,我们需要了解坐标系的概念。
Android 坐标系
在现实中,要描述一个物体的运动,就需要一个参考系。所谓的滑动,就是相对于参考系的运动。在 Android 中,将屏幕的左上角顶点作为 Android 坐标系的原点,从这个原点往右为 X 轴的正方向,从这个点往下是 Y 轴的正方向。
在触控事件中,使用 getRawX() 以及 getRawY() 可以获取到当前触摸点相对于 Android 坐标系的坐标。
视图坐标系
除了上面说的这种坐标系之外,还有一个视图坐标系。跟 Android 坐标系类似,也是从这个原点往右为 X 轴的正方向,从这个点往下是 Y 轴的正方向,但是原点的位置不再是屏幕的左上角顶点,而是父视图的左上角坐标原点,找触控事件中可以使用 getX() 以及 getY() 获取到当前触摸点相对于视图坐标系中的坐标。
触控事件 -- MotionEvent
触控事件 MotionEvent 在用户交互中十分重要的,MotionEvent 中封装了一些事件常量:
触摸按下动作
ACTION_DOWN
触摸移动动作
ACTION_MOVE
触摸动作取消
ACTION_CANCEL
触摸动作离开
ACTION_UP
一般我们会在 onTouchEvent(MotionEvent event) 方法中通过传进来的 MotionEvent 引用的 getAction 方法来获取时间的类型,并用 switch-case 的方法来进行筛选,根据不同的时间进行不同的逻辑操作。
通常模板如下:
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
break;
case MotionEvent.ACTION_MOVE:
break;
case MotionEvent.ACTION_UP:
break;
}
return true;
}
在 Android 中提供了很多的方法来获取坐标值,相对距离等,下面总结了一些 api 来看看在不同的坐标系下面应该如何使用。
这些方法可以分成如下两个类型:
- View 提供的获取坐标方法
- getTop:获取到的是 View 自身的顶边到父布局顶边的距离
- getLeft:获取到的是 View 自身的左边到父布局左边的距离
- getRight:获取到的是 View 自身的右边到父布局右边的距离
- getBottom:获取到的是 View 自身的底边到父布局底边的距离
- MotionEvent 提供的获取坐标方法
- getX : 获取触摸点距离当前控件左边的距离,也就是视图坐标
- getY : 获取触摸点距离当前控件顶边的距离,也就是视图坐标
- getRawX : 获取触摸点距离屏幕左边的距离,也就是绝对坐标
- getRawY : 获取触摸点距离屏幕顶边的距离,也就是绝对坐标
实现滑动的几种办法
现在已经了解关于坐标系和触控事件了,再来看看如何实现动态的修改一个 View 的坐标,即实现滑动效果。不管采用哪一种方式,实现的思路其实都是大致相同的。就是当触摸 View 的时候,系统记下当前触摸点的坐标;当手指一动的时候,系统记下移动后的触摸点坐标,两次的相差就是这次移动的偏移量,然后通过偏移量来修改 View 的坐标。这样不断重复,就实现了滑动的过程。
下面通过一个简单的实例来实现这个效果,就是 View 随着手指的滑动而滑动。这里我们需要自定义一个 View 并且重写他的 onTouchEvent 方法。
layout 方法
在 View 绘制的过程中,会调用 onLayout 方法来定位,同样,我们也可以手动调用此方法来对 View 进行手动的坐标定位。根据前面提供的思路,在按下的时候先保存一次触摸按下时的坐标。
@Override public boolean onTouchEvent(MotionEvent event) {
//检测到触摸事件后 第一时间得到相对于父控件的触摸点坐标 并赋值给x,y
int x = (int) event.getX();
int y = (int) event.getY();
switch (event.getAction()) {
//触摸事件中绕不开的第一步,必然执行,将按下时的触摸点坐标赋值给 lastX 和 last Y
case MotionEvent.ACTION_DOWN:
lastX = x;
lastY = y;
break;
//触摸事件的第二步,这时候的x,y已经随着滑动操作产生了变化,用变化后的坐标减去首次触摸时的坐标得到 相对的偏移量
case MotionEvent.ACTION_MOVE:
int offsetX = x - lastX;
int offsetY = y - lastY;
//使用 layout 进行重新定位
layout(getLeft() + offsetX, getTop() + offsetY, getRight() + offsetX, getBottom() + offsetY);
break;
}
return true;
}
以上,通过代码中的注释,应该都能明白操作的步骤了。
offsetLeftAndRight 与 offsetTopAndBottom
这两个方法相当于系统提供的一个对左右上下移动的 API 封装,得到偏移量之后使用如下代码就可以完成移动。
//使用 offsetLeftAndRight 和 offsetLeftAndRight 进行偏移,从而移动view
offsetLeftAndRight(offsetX);
offsetTopAndBottom(offsetY);
LayoutParams
LayoutParams 保存了一个 View 的布局参数,通过改变 LayoutParams 来动态的修改一个布局的位置参数,从而达到改变 View 位置的效果。我们可以很方便的在程序中使用 getLayoutParams 来获取一个 View 的 LayoutParams。得到偏移量后,就可以通过 setLayoutParams 来改变。
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) getLayoutParams();
layoutParams.leftMargin =getLeft()+offsetX;
layoutParams.topMargin = getTop()+ offsetY;
setLayoutParams(layoutParams);
这里的 RelativeLayout.LayoutParams 是根据你的父布局而定的 如果是 LinearLayout 的话就用 LinearLayout 的 LayoutParams。 当然了 如果你连父布局都没有,当我没说,那样是不能用这个方法的。
scrollTo 与 scrollBy
这里其实 scrollTo 和 scrollBy 使用起来很简单,但是理解起来稍微复杂一点。scrollTo 是直接移动到指定的坐标,而 scrollBy 是根据偏移量进行相对移动。但是需要注意的是,这两个都不是直接移动 View ,而是移动 View 中的 content ,比如 textView 中移动的是文字,imagView 中移动的是图片,移动的是内容,而不是本体。所以,我们应该在想要移动的 View 的父布局中去使用它,用它来移动 ViewGroup 中的子 View。
上面说的只是其中一个难点,还有一个难点就是参考系不同。
这样理解吧,ViewGroup 是一个长方形的相框,在相框背后是一块巨大的幕布,那么我们看到的内容,就是相框中所能囊括下的内容,在使用 scrollBy 进行移动的时候,移动的是整个相框,而相框里的内容没动,但是因为相框移动了,所以内容的位置也发生了变化。我们按照 X 轴将相框左边移动的话,那相框中的内容是在往右移动,所以在使用 scrollBy 的时候,内容是往反方向运动的,这里如果需要改为符合我们预期的移动方式,那么只需要将 scrollBy 的参数设置为负数即可。
看看图中星星的位置就能理解了,我们往正方向右下角移动了坐标,但是左图中星星的位置在可视区域中是在往左上角移动,这是相反的。
((View) getParent()).scrollBy(-offsetX, -offsetY);
以上,就是使用 scrollBy 来进行移动,注意参数使用负数即可。
Scroller
前面我们使用的不管是 scrollBy 还是 scrollTo ,移动其实都是在一瞬间完成的,只是因为我们的触摸动作不断触发,View 不断改变位置,造成了一个过度动画的假象。如果使用一个按钮,比如点击按钮就会把 View 往右移动 100 像素,那么你会发现此时的 View 是瞬间变换位置,并不是慢慢移动到指定位置。这时候我们就需要 Scroller , Scroller 的内部其实也是用 scrollTo 方法来实现的,但是它可以根据需要移动的总距离,以及设置的移动时间,计算出每一次需要移动的距离,然后不断的进行移动,这样就实现了一个动画的效果。
以下的流程图是从手指抬起后开始。
下面我们使用 Scroller 来实现松开手指后 View 回到原来的位置的效果
我们来看看以下代码,基本所有的代码的注释我都已经写上,结合代码理解应该就能明白:
public class TestView1 extends View {
//定义两个变量用于存储按下view时所处的坐标
int lastX = 0;
int lastY = 0;
//滑动~
Scroller scroller;
public TestView1(Context context, AttributeSet attrs) {
super(context, attrs);
scroller = new Scroller(context);
}
@Override public boolean onTouchEvent(MotionEvent event) {
//检测到触摸事件后 第一时间得到相对于父控件的触摸点坐标 并赋值给x,y
int x = (int) event.getX();
int y = (int) event.getY();
switch (event.getAction()) {
//触摸事件中绕不开的第一步,必然执行,将按下时的触摸点坐标赋值给 lastX 和 last Y
case MotionEvent.ACTION_DOWN:
lastX = x;
lastY = y;
break;
//触摸事件的第二步,这时候的x,y已经随着滑动操作产生了变化,用变化后的坐标减去首次触摸时的坐标得到 相对的偏移量
case MotionEvent.ACTION_MOVE:
int offsetX = x - lastX;
int offsetY = y - lastY;
((View) getParent()).scrollBy(-offsetX, -offsetY);
break;
//触摸事件的第三步,必然执行,手指抬起时候触发,这里会将移动过的view还原到原来的位置,并且有过度效果不是突然移动
case MotionEvent.ACTION_UP:
//因为下面要使用父视图的引用来得到偏移量 所以要获得一个父视图引用
View viewGroup = (View) getParent();
//调用 startScroll 方法,参数为 起始X坐标,起始Y坐标,目的X坐标,目的Y坐标,过度动画持续时间
//这里使用了 viewGroup.getScrollX() 和 viewGroup.getScrollY() 作为起始坐标,ScrollY 和 ScrollX 记录了使用 scrollBy 进行偏移的量
//所以使用他们就等于是使用了现在的坐标作为起始坐标,目的坐标为他们的负数,就是偏移量为0的位置,也是view在没有移动之前的位置
scroller.startScroll(viewGroup.getScrollX(),
viewGroup.getScrollY(),
-viewGroup.getScrollX(),
-viewGroup.getScrollY(),
800);
//刷新view,这里很重要,如果不执行,下面的 computeScroll 方法就不会执行 computeScroll 方法是由 onDraw 方法调用的,而刷新 View 会调用 onDraw。
invalidate();
break;
}
return true;
}
@Override public void computeScroll() {
//在上面尝试刷新视图之后被调用,并且执行了 computeScrollOffset 方法,
//此方法根据上面传进来的起始坐标和目的坐标还有动画时间,进行计算每次移动的偏移量
//如果到达目的坐标 false ,如果不为零 说明没有到达目的坐标
if (scroller.computeScrollOffset()) {
//使用 scrollTo 方法进行移动,参数是从 scroller 的 getCurrX 以及 getCurrY 方法得到的,
// 这两个参数每次在执行 computeScrollOffset 之后都会改变,会越来越接近目的坐标。
((View) getParent()).scrollTo(scroller.getCurrX(), scroller.getCurrY());
// 再次刷新 view 也等于是在循环执行此方法 直到 computeScrollOffset 判断到达目的坐标为止,
// 循环次数和每次移动的坐标距离相关,每次移动的坐标距离又跟目的坐标的距离和动画时长有关
//通常距离越长,动画时间越长,循环次数越多
invalidate();
}
}
}