View的滑动方式
View的滑动是Android自定义控件的基础，同时在开发中我们也难免会遇到View的滑动处理。其实不管是哪种滑动方式，其基本思想都是类似的：当点击事件传到View时，系统记下触摸点的坐标，手指移动时系统记下移动后触摸的坐标并算出偏移量，并通过偏移量来修改View的坐标。
一、坐标系
Android系统中有两种坐标系，分别为Android坐标系和View坐标系。了解这两种坐标系能够帮助我们实现View的各种操作，比如我们要实现View的滑动，必须要知道这个View的位置，才能去操作，首先我们来看看Android坐标系。
1.Android坐标系
在Android中，将屏幕左上角的顶点作为Android坐标系的原点，这个原点向右是X轴正方向，向下是Y 轴正方向。另外在触控事件中，使用getRawX()和getRawY()方法获得的坐标也是 Android坐标系的坐标。
2.View坐标系
View坐标系以当前控件左上角为坐标原点,向左为 X 轴正方向,向下为 Y 轴正方向,MotionEvent 的 getX()、getY() 方法获取的是点击位置在视图坐标系中的坐标,View 的 mLeft、mTop 等属性也是 View 在父控件的视图坐标系中的坐标。它与Android坐标系并不冲突，两者是共同存在的，它们一起来帮助开发者更好地控制View。
坐标系
二、滑动原理
View 的滑动原理,其实滑动的原理与动画效果的实现非常相似,都是通过不断改变 View 的坐标来实现这一效果。所以要实现滑动效果就必须要监听用户的触摸事件,并根据事件传入的坐标,动态且不断的改变 View 的坐标,从而实现 View 跟随用户触摸的滑动而滑动。
三、滑动方式
实现View滑动有很多种 方法，在这里主要讲解6种滑动方法，分别是layout()、offsetLeftAndRight()与 offsetTopAndBottom()、LayoutParams、动画、scollTo 与 scollBy，以及Scroller。
1.layout()
View进行绘制的时候会调用onLayout()方法来设置显示的位置，因此我们同样也可以通过修改View 的left、top、right、bottom这4种属性来控制View的位置。
首先我们要自定义一个View，在 onTouchEvent()方法中获取触摸点的坐标，代码如下所示：
public class CustomView extends View {
int lastX;
int lastY;
public CustomView(Context context) {
super(context);
}
public CustomView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
public CustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
// 记录触摸点坐标
int x = (int) event.getX();
int y = (int) event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//当按下的时候执行
lastX = x;
lastY = y;
break;
case MotionEvent.ACTION_MOVE:
//当移动的时候执行
// 计算偏移量
int offsetX = x - lastX;
int offsetY = y - lastY;
// 在当前left、top、right、bottom的基础上加上偏移量来控制View的位置
layout(getLeft() + offsetX,
getTop() + offsetY,
getRight() + offsetX,
getBottom() + offsetY);
break;
case MotionEvent.ACTION_UP:
//当抬起的时候执行
break;
}
return true;
}
}
我们需要自定义一个CustomView 继承自View，需要重写onTouchEvent()方法。
在MotionEvent.ACTION_DOWN事件中获取当前触摸点的坐标位置，然后在MotionEvent.ACTION_MOVE事件中计算偏移量，再调用layout()方法重新放置这个CustomView的位置即可。在每次移动时都会调用layout()方法对屏幕重新布局，从而达到移动View的效果。
在布局文件中引用CustomView即可：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:orientation="vertical"
tools:context=".ui.CustomActivity">
<com.example.monkey.myapplication.view.CustomView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@color/colorPrimary" />
</LinearLayout>
具体效果，可以自己动手试试。
2.offsetLeftAndRight()与 offsetTopAndBottom()
这两种方法和layout()方法的效果差不多，其使用方式也差不多。我们将ACTION_MOVE中的代码替 换成如下代码：
case MotionEvent.ACTION_MOVE:
//当移动的时候执行
// 计算偏移量
int offsetX = x - lastX;
int offsetY = y - lastY;
// // 在当前left、top、right、bottom的基础上加上偏移量来控制View的位置
// layout(getLeft() + offsetX,
// getTop() + offsetY,
// getRight() + offsetX,
// getBottom() + offsetY);
//左右偏移
offsetLeftAndRight(offsetX);
//上下偏移
offsetTopAndBottom(offsetY);
break;
3.LayoutParams
LayoutParams主要保存了一个View的布局参数，因此我们可以通过LayoutParams来改变View的布局参 数从而达到改变View位置的效果。同样，我们将 ACTION_MOVE中的代码替换成如下代码：
case MotionEvent.ACTION_MOVE:
//当移动的时候执行
// 计算偏移量
int offsetX = x - lastX;
int offsetY = y - lastY;
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) getLayoutParams();
layoutParams.leftMargin = getLeft() + offsetX;
layoutParams.topMargin = getTop() + offsetY;
setLayoutParams(layoutParams);
break;
前面我们的布局文件，因为父控件是 LinearLayout，所以我们用了 LinearLayout.LayoutParams。如果父控件是RelativeLayout， 则要使用RelativeLayout.LayoutParams。否则会报错
java.lang.ClassCastException: android.widget.LinearLayout$LayoutParams cannot be cast to android.widget.RelativeLayout$LayoutParams
at com.example.monkey.myapplication.view.CustomView.onTouchEvent(CustomView.java:60)
at android.view.View.dispatchTouchEvent(View.java:11788)
当然除了使用布局的LayoutParams外，我们还可以用 ViewGroup.MarginLayoutParams来实现。因为LinearLayout和RelativeLayout都是ViewGroup的子类。
ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) getLayoutParams();
layoutParams.leftMargin = getLeft() + offsetX;
layoutParams.topMargin = getTop() + offsetY;
setLayoutParams(layoutParams);
4.scollTo 与 scollBy
ScrollTo(dx,dy)指移动到一个具体的坐标点(dx,dy)，而ScrollBy(dx,dy)则表示移动的增量为dx,dy。我们将 ACTION_MOVE中的代码替换成如下代码：
case MotionEvent.ACTION_MOVE:
//当移动的时候执行
// 计算偏移量
int offsetX = x - lastX;
int offsetY = y - lastY;
((View) getParent()).scrollBy(-offsetX, -offsetY);
break;
首先scrollBy移动的是View的内容content，而不是View本身，如TextView的content为文本，ImageView的content为drawable，而ViewGroup的content是View或是ViewGroup，所以要移动当前View本身，我们就需要通过它的ViewGroup改变自己的内容从而改变View本身的位置。其次，我们真正操作的是View的父控件ViewGroup，要让View往左（上/右/下）移，应该要让ViewGroup往相反方向移动，也就是右（下/左/上），即偏移量就是相反的（负的）。所以要实现 CustomView 随手指移动的效果，就需要将偏移量设置为负值。若是正数，则会向相反的方向移动。
我们通过ScrollTo和ScrollBy的源码看下其区别：
/**
* Set the scrolled position of your view. This will cause a call to
* {@link #onScrollChanged(int, int, int, int)} and the view will be
* invalidated.
* @param x the x position to scroll to
* @param y the y position to scroll to
*/
public void scrollTo(int x, int y) {
if (mScrollX != x || mScrollY != y) {
int oldX = mScrollX;
int oldY = mScrollY;
mScrollX = x;
mScrollY = y;
invalidateParentCaches();
//回调方法，通知状态改变
onScrollChanged(mScrollX, mScrollY, oldX, oldY);
if (!awakenScrollBars()) {
postInvalidateOnAnimation();//重新绘制
}
}
}
/**
* Move the scrolled position of your view. This will cause a call to
* {@link #onScrollChanged(int, int, int, int)} and the view will be
* invalidated.
* @param x the amount of pixels to scroll by horizontally
* @param y the amount of pixels to scroll by vertically
*/
public void scrollBy(int x, int y) {
scrollTo(mScrollX + x, mScrollY + y);
}
通过源码可以看到scrollBy()里面调用了ScrollTo()，传入的参数是mScrollX+x,也就是说这次x是一个增量，所以scrollBy实现的效果就是，在当前位置上，再偏移x距离 。这是ScrollTo()和ScrollBy()的重要区别。
- scrollTo与scrollBy都会使View立即重绘，所以移动是瞬间发生的
- scrollTo(x,y)：指哪打哪，效果为View的左上角滚动到（x,y）位置，但由于View相对与父View是静止的所以最终转换为相对的View的内容滑动到（-x,-y）的位置。
- scrollBy(x,y): 此时的x,y为偏移量，既在原有的基础上再次滚动
5.Scroller
通过上面的学习我们知道scrollTo与scrollBy可以实现滑动的效果，但是滑动的效果都是瞬间完成的，在事件执行的时候平移就已经完成了，这样的效果会让人感觉突兀，Google建议使用自然过渡的动画来实现移动效果。因此，Scroller类这样应运而生了。Scroller本身是不能实现View的滑动的，它需要与View的computeScroll()方法配合才能实现弹性滑动的效果。
public class CustomView extends View {
int lastX;
int lastY;
Scroller mScroller;
public CustomView(Context context) {
this(context,null);
}
public CustomView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public CustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mScroller = new Scroller(context);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
// 记录触摸点坐标
int x = (int) event.getX();
int y = (int) event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//当按下的时候执行
lastX = x;
lastY = y;
break;
case MotionEvent.ACTION_MOVE:
//当移动的时候执行
// 计算偏移量
int offsetX = x - lastX;
int offsetY = y - lastY;
smoothScrollBy(-offsetX,-offsetY);
break;
case MotionEvent.ACTION_UP:
//当抬起的时候执行
break;
}
return true;
}
public void smoothScrollBy(int dx,int dy){
mScroller.startScroll(mScroller.getFinalX(),mScroller.getFinalY(),dx,dy,2000);
invalidate(); // 必须调用改方法通知View重绘以便computeScroll方法被调用。
}
@Override
public void computeScroll() {
super.computeScroll();
// 判断Scroller滑动是否执行完毕
if (mScroller.computeScrollOffset()) {
((View) getParent()).scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
// 通过重绘让系统调用onDraw，onDraw中又会调用computeScroll，如此不断循环，直到Scroller执行完毕
invalidate();
}
}
Android为View的滑动提供了Scroller辅助类，它本身并不能导致View滑动，需要借助computeScroll和ScrollTo方法完成View的滑动。使用Scroller类完成View的平滑。
- 首先要创建Scroller类。
- 然后重写computeScroll方法，这里需要注意的是computeScroll方法在onDraw中会被调用，因此需要调用invalidate方法通知View调用onDraw重绘，然后再调用computeScroll完成View的滑动，过程为invalidate->onDraw->computeScroll->invalidate->…，无限循环直到mScroller的computeScrollOffset返回false，也就是滑动完成。
- 调用Scroller类的startScroll方法开启滚动过程。
6.动画
使用动画来实现View的滑动主要通过改变View的translationX和translationY参数来实现，使用动画的好处在于滑动效果是平滑的。这里我们使用属性动画来移动view，我们让 CustomView在5000ms内沿着X轴向右平移300像素，具体实现如下：
CustomView customview = findViewById(R.id.customview);
ObjectAnimator.ofFloat(customview,"translationX",0,300).setDuration(5000).start();
也可以使用补间动画实现，在这里就不做多介绍了。
本文到这里就结束了，如果有不对的地方，还望指正。
参考资料
《Android进阶之光》
