自定义View

TODO / By / 2016-02-01

http://leoray.leanote.com/post/viewgroup-custom

 

自定义组件最详细实例讲解（7步实现自定义ViewGroup）
UI 自定义View red    2016-01-16 15:24:44    968    0    0

本文实现的效果如下：

一个自定义ViewGroup，左右滑动切换不同的页面，类似一个特别简化的ViewPager（当然，如果你设置的子View的宽度不是一个屏幕的宽度，那滑动出来就是另外一种效果了，当然，建议自己学示例的时候先按最普通的效果来），他涉及到的内容如下：
1. Scroller:弹性滑动,水平滑动到一半的时候,放开以后View滑动到一个页面完整显示的位置(这里的页面指的是一个子View)，滑动超过一半则滑动到下一页或者上一页，没有超过则回到当前页面；
2. VelocityTracker:用来检测速度,如果水平速度达到一定阈值则切换页面；
3. onInterceptTouchEvent:拦截机制,这里用来解决滑动冲突,当一个TouchSlop滑动的水平位移大于垂直位移的时候就由当前组件处理触摸事件，否则交给子View去处理，比如子View是一个ListView的时候。
4. 自定义ViewGroup：需要自己实现onMeasure（尤其要处理wrap_content的情况），自己去实现onLayout（需要去调用每一个子View的layout函数去布局子View）

本文的例子和《开发艺术探索》上的例子几乎一模一样，不过我们这里会一步步的是实现这个虽然不是特别复杂但是还是牵涉了很多知识点的自定义View。
虽然看着不复杂，但是要完全自己去写那还真不一定能写出来（就算你已经看过了源代码）。
其实每一个步骤的内容写完以后都可以跑一跑看看效果。

相关内容可以查看我的另外的一些博文：
1. 《View的事件基础知识》会介绍上面提到的VelocityTracker，Scroller，坐标体系等
2. 《View的事件分发机制》和View以及ViewGroup源码解析会有拦截，测量布局等相关内容。
建议先看这几篇文章，可以有一个概念的理解和简单的应用。

当然，里面有一块内容未介绍，就是自定义属性。不过这块比较简单，我们后面会有一个自定义View的文章，里面会介绍这个内容。

1. 新建HorizontalView继承ViewGroup

这个很简单了，创建一个类HorizontalView继承ViewGroup，调用父类构造方法，实现抽象方法等。

  2. import android.content.Context;
  3. import android.util.AttributeSet;
  4. import android.view.ViewGroup;
  6. /**
  7. * Created by leoray on 16/1/15.
  8. */
  9. public class HorizontalView extends ViewGroup{
  10. //1. 至少要调用一个父类的构造方法
  11. public HorizontalView(Context context) {
  12. super(context);
  13. }
  15. public HorizontalView(Context context, AttributeSet attrs) {
  16. super(context, attrs);
  17. }
  19. public HorizontalView(Context context, AttributeSet attrs, int defStyleAttr) {
  20. super(context, attrs, defStyleAttr);
  21. }
  23. public HorizontalView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
  24. super(context, attrs, defStyleAttr, defStyleRes);
  25. }
  26. //2. 至少要实现抽象方法onLayout,我们这里先空实现了
  27. @Override
  28. protected void onLayout(boolean changed, int l, int t, int r, int b) {
  30. }
  31. }

2. 处理wrap_content的情况

为什么先处理这个呢？因为这个最简单，方法也是通用的。在设置在ViewGroup的layout_width和layout_height 为wrap_content 的时候，如果不设置一个指定的值，那么他的效果和match_parent是一样的，所以我们需要判断layout_width和layout_height为wrap_content（也就是widthMode或者heightMode为AT_MOST）的时候设置默认值。这里将它设置为第一个子元素的宽和高。

  2. import android.content.Context;
  3. import android.util.AttributeSet;
  4. import android.view.View;
  5. import android.view.ViewGroup;
  7. /**
  8. * 可以水平滑动的ViewGroup
  9. * Created by leoray on 16/1/15.
  10. */
  11. public class HorizontalView extends ViewGroup {
  13. //...这里是那几个构造方法的代码
  15. //这里需要测量这个ViewGroup的宽和高
  16. @Override
  17. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  18. super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  19. //得到宽和高的MODE和SIZE
  20. int widthMode = MeasureSpec.getMode(widthMeasureSpec);
  21. int widthSize = MeasureSpec.getSize(widthMeasureSpec);
  22. int heightMode = MeasureSpec.getMode(heightMeasureSpec);
  23. int heightSize = MeasureSpec.getSize(heightMeasureSpec);
  24. //测量所有子元素，先执行，不然后面拿不到第一个子元素的测量宽/高
  25. measureChildren(widthMeasureSpec, heightMeasureSpec);
  26. //处理wrap_content的情况
  27. if (getChildCount() == 0) { //如果没有子元素，就设置宽高都为0（简化处理）
  28. setMeasuredDimension(0, 0);
  29. }
  30. //宽和高都是AT_MOST，则设置宽为第一个子元素的宽度乘以子元素的个数（这里默认每个子元素都和第一个元素一样的宽度）；高度设置为第一个元素的高度；
  31. //当然，我们最后用的时候子元素的宽度和高度就是屏幕的宽度和高度
  32. else if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {
  33. View childOne = getChildAt(0);
  34. int childWidth = childOne.getMeasuredWidth();
  35. int childHeight = childOne.getMeasuredHeight();
  36. setMeasuredDimension(childWidth * getChildCount(), childHeight);
  37. }
  38. //这里只有宽度是AT_MOST，那就设置高度为系统测量的高度，宽度和第一个if中的一样
  39. else if (widthMode == MeasureSpec.AT_MOST) {
  40. View childOne = getChildAt(0);
  41. int childWidth = childOne.getMeasuredWidth();
  42. setMeasuredDimension(childWidth * getChildCount(), heightSize);
  43. }
  44. //这里只有高度是AT_MOST，那就设置宽度为系统测量的宽度，高度和第一个if中的一样
  45. else if (heightMode == MeasureSpec.AT_MOST) {
  46. int childHeight = getChildAt(0).getMeasuredHeight();
  47. setMeasuredDimension(widthSize, childHeight);
  48. }
  49. //宽度和高度都不是AT_MOST的情况在super方法中已经设置了：宽高都是系统测量的结果；
  50. }
  52. //...这里还是onLayout的空实现的代码
  53. }

3. 实现onLayout去布局子元素

  2. import android.content.Context;
  3. import android.util.AttributeSet;
  4. import android.view.MotionEvent;
  5. import android.view.View;
  6. import android.view.ViewGroup;
  7. import android.widget.Scroller;
  9. /**
  10. * 可以水平滑动的ViewGroup
  11. * Created by leoray on 16/1/15.
  12. */
  13. public class HorizontalView extends ViewGroup {
  14. //... 这里省略了那几个构造方法代码和onMeasure的代码
  16. //这里实现布局，主要是对子View进行布局，因为每一种布局方式子View的布局都是不同的，所以这个是ViewGroup唯一一个抽象方法，需要我们自己去实现
  17. @Override
  18. protected void onLayout(boolean changed, int l, int t, int r, int b) {
  19. int childCount = getChildCount(); //子元素的个数
  20. int left = 0; //左边的距离
  21. View child;
  22. //遍历布局子元素
  23. for (int i = 0; i < childCount; i++) {
  24. child = getChildAt(i);
  25. int width = child.getMeasuredWidth();
  26. //调用每个子元素的layout方法去布局这个子元素，这里相当于默认第一个子元素占满了屏幕，后面的子元素就是在第一个屏幕后面紧挨着和屏幕一样大小的后续元素，所以left是一直累加的，top保持0，bottom保持第一个元素的高度，right就是left+元素的宽度
  27. child.layout(left, 0, left + width, child.getMeasuredHeight());
  28. left += width;
  29. }
  30. }
  31. }

就像下面这张图一样，每个子View的布局的四个坐标就按照第一个View来设置的。第一个大的虚线框是手机屏幕。
布局方式图示

3. 处理滑动冲突，实现onInterceptTouchEvent

上图中我们做好的测量和布局，但是我们只能看到第一个子View，那么怎么看到第二个，第三个及后面的View，怎么在这些View中切换呢？就需要通过滑动了。
但是我这里没有直接先去写滑动，而是先去处理滑动冲突，主要有两个原因：
1. 滑动冲突的逻辑很简单，好写
2. 因为他原本的测试的例子子View都是一个ListView，这样，我滑动的时候肯定是要先保证我的父View能拦截到触摸事件，不然默认都跑到子View去了
这里ViewGroup是水平滑动，里面的ListView是垂直滑动，一般我们设置的逻辑是：
1. 如果我们检测到的滑动方向是水平的话，就让父View拦截用来进行View的滑动切换
2. 如果检测到方向是垂直的话，就不进行拦截，交给子View去处理，比如ListView的垂直滑动

当然，也有些逻辑是触摸起始位置在边缘且是水平方向才会进行页面的切换，因为子View可能也需要水平方向的滑动事件。

我们这里就直接选择第一种处理逻辑。

  2. import android.content.Context;
  3. import android.util.AttributeSet;
  4. import android.view.MotionEvent;
  5. import android.view.View;
  6. import android.view.ViewGroup;
  7. import android.widget.Scroller;
  9. /**
  10. * 可以水平滑动的ViewGroup
  11. * Created by leoray on 16/1/15.
  12. */
  13. public class HorizontalView extends ViewGroup {
  15. //... 这里省略了构造函数的代码
  17. int lastInterceptX; //记录上一次触摸的位置
  18. int lastInterceptY;
  20. @Override
  21. public boolean onInterceptHoverEvent(MotionEvent event) {
  22. //处理滑动冲突,也就是什么时候返回true的问题
  23. //规则:开始滑动时水平距离超过垂直距离的时候
  24. boolean intercept = false;
  25. int x = (int) event.getX();
  26. int y = (int) event.getY();
  27. switch (event.getAction()) {
  28. case MotionEvent.ACTION_DOWN:
  29. break;
  30. case MotionEvent.ACTION_MOVE:
  31. int deltaX = x - lastInterceptX; //水平方向滑动的距离（有正有负）
  32. int deltaY = y - lastInterceptY; //垂直方向滑动的距离（有正有负）
  33. if (Math.abs(deltaX) - Math.abs(deltaY) > 0) { //水平方向距离更长，说明用户是想水平滑动的，所以拦截
  34. intercept = true;
  35. }
  36. break;
  37. case MotionEvent.ACTION_UP:
  38. break;
  39. }
  40. //因为一个滑动事件是先经过的DOWN,所以在MOVE的时候,这两个值已经设置过了
  41. lastInterceptX = x;
  42. lastInterceptY = y;
  44. return intercept;
  45. }
  47. @Override
  48. public boolean onTouchEvent(MotionEvent event) {
  49. return super.onTouchEvent(event);
  50. }
  52. //... 这里省略了onMeasure和onLayout的代码
  53. }

4. 滑动页面

上面一节已经确保了我们执行水平滑动的时候由当前父View去进行事件处理，这里就会进入onTouchEvent事件。然后我们需要进行滑动切换页面。
我们先不去实现切换页面，先实现怎么样让页面滑动，也就是手指拖动的时候页面也跟着移动，这里用到了scrollTo/scrollBy这样的方法，第一个方法是将View滑动到指定的位置，第二个是将View滑动指定的距离。

  2. import android.content.Context;
  3. import android.util.AttributeSet;
  4. import android.view.MotionEvent;
  5. import android.view.View;
  6. import android.view.ViewGroup;
  7. import android.widget.Scroller;
  9. /**
  10. * 可以水平滑动的ViewGroup
  11. * Created by leoray on 16/1/15.
  12. */
  13. public class HorizontalView extends ViewGroup {
  15. //...这里省略了构造方法和onInterceptTouchEvent方法的代码
  17. int lastX; //记录上一次触摸事件的位置
  18. int lastY;
  20. @Override
  21. public boolean onTouchEvent(MotionEvent event) {
  22. //得到本次触摸的位置
  23. int x = (int) event.getX();
  24. int y = (int) event.getY();
  26. switch (event.getAction()) {
  27. case MotionEvent.ACTION_DOWN:
  28. break;
  29. case MotionEvent.ACTION_MOVE:
  30. int deltaX = x - lastX; //手指滑动的距离
  31. //调用该方法让View也对应的移动指定的距离，这样就实现了跟随手指滑动的效果，垂直方向不移动
  32. scrollBy(-deltaX, 0);
  33. break;
  34. case MotionEvent.ACTION_UP:
  35. break;
  36. }
  39. lastX = x; //存储当前位置为上一次位置
  40. lastY = y;
  41. //return super.onTouchEvent(event);
  42. // 这里不能调用父类的方法,因为ViewGroup是没有去实现onTouchEvent的方法的,所以super调用的是View的实现;
  43. // 而View的默认实现是没有点击长按等事件导致在DOWN的时候就直接返回false了,导致没有执行MOVE和UP方法
  44. return true;
  46. }
  48. //这里省略了onMeasure和onLayout的代码
  49. }

如果你执行当前状态的代码去测试的话，你会发现又一个问题。我按下滑动的时候，刚按下，整个View瞬间跳到了我手指按下的地方然后开始跟随手指滑动，这是为什么呢？
其实原因很简单，我这里执行了scrollBy()让水平方向移动了deltaX个单位，说明问题就出在计算这个deltaX上了。其实原因在于lastX的值的设置上，这个和ViewGroup的拦截机制相关，我们前面在MOVE的时候拦截了触摸事件，但是在DOWN的时候是返回false的，所以DOWN时候的触摸事件被子View消耗掉了，所以onTouchEvent中是无法看到DOWN的，所以lastX就不会像在onInterceptTouchEvent中一样，在DOWN的时候被赋值，然后第一个MOVE的时候就可以判断当前的滑动式水平还是垂直了。由于onTouchEvent中没有DOWN事件了，第一个MOVE的时候，lastX=0，而第一个MOVE的getX就是当前鼠标的位置，两个值相减得到的还是x,而不是一个TouchSlop，所以View内容就立即滑动到了当前手指的位置，解决办法就是将lastX和lastY在onInterceptTouchEvent中也进行赋值，因为DOWN事件在onInterceptTouchEvent中也可以得到，这种，第一个MOVE拿到的也是一个TouchSlop：

  2. import android.content.Context;
  3. import android.util.AttributeSet;
  4. import android.util.Log;
  5. import android.view.MotionEvent;
  6. import android.view.View;
  7. import android.view.ViewGroup;
  8. import android.widget.Scroller;
  10. /**
  11. * 可以水平滑动的ViewGroup
  12. * Created by leoray on 16/1/15.
  13. */
  14. public class HorizontalView extends ViewGroup {
  17. int lastInterceptX;
  18. int lastInterceptY;
  21. @Override
  22. public boolean onInterceptTouchEvent(MotionEvent event) {
  23. //...这里省略了方法体内一对代码
  24. lastInterceptX = x; //因为先经过的DOWN,所以在MOVE的时候,这两个值已经有了
  25. lastInterceptY = y;
  26. lastX=x; //**这里加了关键的两行代码**
  27. lastY=y;
  28. return intercept;
  29. }
  31. int lastX;
  32. int lastY;
  33. int currentIndex = 0; //当前子元素
  35. private Scroller scroller;
  37. @Override
  38. public boolean onTouchEvent(MotionEvent event) {
  39. int x = (int) event.getX();
  40. int y = (int) event.getY();
  42. switch (event.getAction()) {
  43. case MotionEvent.ACTION_DOWN:
  44. Log.d("HV", "TouchEvent.DOWN");
  45. break;
  46. case MotionEvent.ACTION_MOVE:
  47. Log.d("HV", "TouchEvent.MOVE");
  48. int deltaX = x - lastX; //跟随手指滑动
  49. scrollBy(-deltaX, 0);
  50. break;
  51. case MotionEvent.ACTION_UP: //释放手指以后开始自动滑动到目标位置
  52. Log.d("HV", "TouchEvent.UP");
  54. break;
  55. }
  56. lastX = x;
  57. lastY = y;
  58. return super.onTouchEvent(event);
  60. }
  62. //...这里省略了测量onMeasure和布局onLayout的代码
  63. }

5. 滑动到下/上一个页面

处理逻辑：
1. 如果当前页面是第一个页面，向右滑动任意单位后均弹性滑动回当前页面
2. 如果当前页面是最后一个页面，向左滑动任意单位均弹性滑动回当前页面
3. 如果向左滑动滑动超过宽度（也就是屏幕）的一半则跳转到下一个页面
4. 如果向右滑动超过宽度的一般则跳转到上一个页面

方法是在ACTION_UP中进行处理，因为只有在滑动完成释放的时候，我们才会让页面去自动滑动到下/上一个View或者滑动回当前View。

5.1 弹性滑动测试

这里需要用到一个新的内容Scroller，弹性滑动，他的使用方法很通用，主要需要设置三个地方，然后在ACTION_UP的时候调用一次，如下面代码中的1-4个步骤：

  1. package com.leishengwei.viewstudy;
  3. import android.content.Context;
  4. import android.util.AttributeSet;
  5. import android.util.Log;
  6. import android.view.MotionEvent;
  7. import android.view.View;
  8. import android.view.ViewGroup;
  9. import android.widget.Scroller;
  11. /**
  12. * 可以水平滑动的ViewGroup
  13. * Created by leoray on 16/1/15.
  14. */
  15. public class HorizontalView extends ViewGroup {
  16. //1.1 声明Scroller对象，1.2在init()方法内
  17. public HorizontalView(Context context) {
  18. super(context);
  19. init();
  20. }
  22. public HorizontalView(Context context, AttributeSet attrs) {
  23. super(context, attrs);
  24. init();
  25. }
  27. public HorizontalView(Context context, AttributeSet attrs, int defStyleAttr) {
  28. super(context, attrs, defStyleAttr);
  29. init();
  31. }
  33. public HorizontalView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
  34. super(context, attrs, defStyleAttr, defStyleRes);
  35. init();
  37. }
  39. private Scroller scroller;
  40. public void init() {
  41. //1.2 在构造函数中初始化Scroller
  42. scroller = new Scroller(getContext());
  43. }
  45. //...这里省略了onInterceptTouchEvent的代码
  47. int lastX;
  48. int lastY;
  52. @Override
  53. public boolean onTouchEvent(MotionEvent event) {
  54. int x = (int) event.getX();
  55. int y = (int) event.getY();
  57. switch (event.getAction()) {
  58. case MotionEvent.ACTION_DOWN:
  59. Log.d("HV", "TouchEvent.DOWN");
  60. break;
  61. case MotionEvent.ACTION_MOVE:
  62. Log.d("HV", "TouchEvent.MOVE");
  63. int deltaX = x - lastX; //跟随手指滑动
  64. scrollBy(-deltaX, 0);
  65. break;
  66. case MotionEvent.ACTION_UP: //释放手指以后开始自动滑动到目标位置
  67. Log.d("HV", "TouchEvent.UP");
  68. //这里我们先测试一下，每次都滑动到第一个子View的位置，也就是(0,0)的位置，可以再去运行一下，看是不是每次滑动释放以后，View都滑动到了最初始的状态
  69. smoothScrollTo(0, 0);
  70. break;
  71. }
  72. lastX = x;
  73. lastY = y;
  74. return super.onTouchEvent(event);
  76. }
  78. //...这里省略了 onLayout和onMeasure的代码
  80. //2. 重写这个方法，执行如下内容
  81. @Override
  82. public void computeScroll() {
  83. super.computeScroll();
  84. //2.1 先计算当前Scroller的偏移
  85. if (scroller.computeScrollOffset()) {
  86. //2.2 然后调用我们熟悉的scrollTo将View移动到getCurrX,getCurrY的位置
  87. scrollTo(scroller.getCurrX(), scroller.getCurrY());
  88. //2.3 通知刷新界面
  89. postInvalidate();
  90. }
  91. }
  92. //3. 这个是工具方法，弹性滑动到指定位置
  93. public void smoothScrollTo(int destX, int destY) {
  94. //3.1 调用startScroll
  95. scroller.startScroll(getScrollX(), getScrollY(), destX - getScrollX(), destY - getScrollY(), 1000);
  96. //3.2 刷新
  97. invalidate();
  98. }
  100. }

5.2 滑动到其他页面

然后就是具体的切换逻辑实现了。新代码主要是在onTouchEvent中的ACTION_UP部分
1. 首先我们需要一个页面索引来记录当前的页面（也就是子View的index），用这个currentIndex可以快速计算出需要切换的页面需要滑动的目标位置。
2. 然后就是数学问题了，判断怎么样才会切换页面并且调用方法去切换

  2. import android.content.Context;
  3. import android.util.AttributeSet;
  4. import android.util.Log;
  5. import android.view.MotionEvent;
  6. import android.view.View;
  7. import android.view.ViewGroup;
  8. import android.widget.Scroller;
  10. /**
  11. * 可以水平滑动的ViewGroup
  12. * Created by leoray on 16/1/15.
  13. */
  14. public class HorizontalView extends ViewGroup {
  17. //... 省略构造函数，init方法，onInterceptTouchEvent
  18. int lastInterceptX;
  19. int lastInterceptY;
  22. int lastX;
  23. int lastY;
  24. int currentIndex = 0; //当前子元素
  25. int childWidth = 0; //子元素的宽度，这个我们可以在onLayout或者onMeasure中进行赋值 ，只要保证在measure结束之后，把他设置为第一个子View的宽度即可（本例中在下面的`onLayout`中进行设置）
  26. private Scroller scroller;
  28. @Override
  29. public boolean onTouchEvent(MotionEvent event) {
  30. int x = (int) event.getX();
  31. int y = (int) event.getY();
  33. switch (event.getAction()) {
  34. case MotionEvent.ACTION_DOWN:
  35. Log.d("HV", "TouchEvent.DOWN");
  36. break;
  37. case MotionEvent.ACTION_MOVE:
  38. Log.d("HV", "TouchEvent.MOVE");
  39. int deltaX = x - lastX; //跟随手指滑动
  40. Log.d("HV", "move:" + -deltaX);
  41. scrollBy(-deltaX, 0);
  42. break;
  43. case MotionEvent.ACTION_UP: //释放手指以后开始自动滑动到目标位置
  44. Log.d("HV", "TouchEvent.UP");
  45. //这里都是逻辑实现代码，需要自己思考了，比如我们计算的这个distance
  46. int distance = getScrollX() - currentIndex * childWidth; //相对于当前View滑动的距离,正为向左,负为向右
  47. if (Math.abs(distance) > childWidth / 2) {//必须滑动的距离要大于1/2个宽度,否则不会切换到其他页面
  48. if (distance > 0) { //切换到下一个页面
  49. currentIndex++;
  50. } else { //切换到上一个页面
  51. currentIndex--;
  52. }
  53. }
  54. currentIndex = currentIndex < 0 ? 0 : currentIndex > getChildCount() - 1 ? getChildCount() - 1 : currentIndex; //这里保证边界值
  55. smoothScrollTo(currentIndex * childWidth, 0); //滑动到指定位置，每一个子View的滑动位置设置其实很简单
  56. break;
  57. }
  58. lastX = x;
  59. lastY = y;
  60. return super.onTouchEvent(event);
  62. }
  64. //...省略onMeasure,computeScroll,smoothScrollTo方法
  67. @Override
  68. protected void onLayout(boolean changed, int l, int t, int r, int b) {
  69. int childCount = getChildCount();
  70. int left = 0; //左边的距离
  71. View child;
  72. //遍历布局子元素
  73. for (int i = 0; i < childCount; i++) {
  74. child = getChildAt(i);
  75. int width = child.getMeasuredWidth();
  76. childWidth = width; //**新代码： 赋值为子元素的宽度**
  77. child.layout(left, 0, left + width, child.getMeasuredHeight());
  78. left += width;
  79. }
  80. }
  81. }

这样，就实现了页面之间的滑动切换了。

6. 快速滑动进行切换

这里增加一个逻辑，就是我们不需要滑动超过一般才切换到上/下一个页面，如果滑动速度很快的话，我们也可以判定为用户想要滑动到其他页面，这样的体验也是好的。
这部分也是在onTouchEvent中的ACTION_UP部分，处理逻辑如下：
1. 检测当前滑动的速度，如果超过一定的阈值则就算滑动没有超过一半也进行页面切换；
2. 向左快速滑动则切换到下一个子View；
3. 向右快速滑动则切换到上一个子View。

这里又需要用到一个新的内容：VelocityTracker，用来测试滑动速度的。使用方法也很简单，首先在构造函数中进行初始化，也就是前面的init方法中增加一条语句（首先声明成员变量）：

  1. ...
  2. private VelocityTracker tracker;
  3. ...
  4. public void init() {
  5. scroller = new Scroller(getContext());
  6. tracker=VelocityTracker.obtain();
  7. }
  8. ...

然后的代码就在onTouchEvent中的ACTION_UP部分了：

  1. ...
  2. @Override
  3. public boolean onTouchEvent(MotionEvent event) {
  4. ...
  5. case MotionEvent.ACTION_UP: //释放手指以后开始自动滑动到目标位置
  6. Log.d("HV", "TouchEvent.UP");
  7. int distance = getScrollX() - currentIndex * childWidth; //相对于当前View滑动的距离,正为向左,负为向右
  8. if (Math.abs(distance) > childWidth / 2) {//必须滑动的距离要大于1/2个宽度,否则不会切换到其他页面
  9. if (distance > 0) {
  10. currentIndex++;
  11. } else {
  12. currentIndex--;
  13. }
  14. }
  15. //**新代码主要是增加了一个else部分**
  16. else {
  17. //调用该方法计算1000ms内滑动的平均速度 tracker.computeCurrentVelocity(1000);
  18. float xV = tracker.getXVelocity(); //获取到水平方向上的速度
  19. if (Math.abs(xV) > 50) { //如果速度的绝对值大于50的话，就认为是快速滑动，就执行切换页面
  20. if (xV > 0) { //大于0切换上一个页面
  21. currentIndex--;
  22. } else { //小于0切换到下一个页面（子View）
  23. currentIndex++;
  24. }
  25. }
  26. }
  27. currentIndex = currentIndex < 0 ? 0 : currentIndex > getChildCount() - 1 ? getChildCount() - 1 : currentIndex;
  28. smoothScrollTo(currentIndex * childWidth, 0);
  29. //最后要进行的是VelocityTracker#clear重置速度计算器
  30. tracker.clear();
  31. break;

…

7. 优化：弹性滑动过程中再次触摸屏幕阻止页面继续滑动的情况

例如，当我们快速向左滑动切换到下一个页面的情况，在手指释放（ACTION_UP）以后，页面会弹性滑动到下一个页面，可能需要一秒才完成滑动，这个时间内，我们再次触摸屏幕，希望能拦截这次滑动，然后再次去操作页面。
这部分的方法如下：
要实现在弹性滑动过程中再次触摸拦截，肯定要在onInterceptTouchEvent中的ACTION_DOWN中去判断，如果在ACTION_DOWN的时候，scroller还没有完成，说明上一次的滑动还正在进行中，则直接终端scroller并且返回true，表示在DOWN的时候就拦截事件，那么后续的MOVE，UP都不会传递到子View中去了。

  1. ...
  3. @Override
  4. public boolean onInterceptTouchEvent(MotionEvent event) {
  5. //处理滑动冲突,也就是什么时候返回true的问题
  6. //规则:开始滑动时水平距离超过垂直距离的时候
  7. boolean intercept = false;
  8. int x = (int) event.getX();
  9. int y = (int) event.getY();
  10. switch (event.getAction()) {
  11. case MotionEvent.ACTION_DOWN: //DOWN返回false,导致onTouchEvent中无法获取到DOWN
  12. intercept = false;
  13. Log.d("HV", "Intercept.DOWN");
  14. //**新代码**
  15. if (!scroller.isFinished()) { //如果动画还没有执行完成,则打断,这种情况肯定还是由父组件处理触摸事件所以返回true
  16. scroller.abortAnimation();
  17. intercept = true;
  18. }
  19. break;
  20. case MotionEvent.ACTION_MOVE:
  21. Log.d("HV", "Intercept.MOVE");
  22. int deltaX = x - lastInterceptX;
  23. int deltaY = y - lastInterceptY;
  24. if (Math.abs(deltaX) - Math.abs(deltaY) > 0) { //水平方向距离长 MOVE中返回true一次,后续的MOVE和UP都不会收到此请求
  25. intercept = true;
  26. Log.d("HV", "intercepted");
  27. } else {
  28. intercept = false;
  29. }
  30. break;
  31. case MotionEvent.ACTION_UP:
  32. Log.d("HV", "Intercept.UP");
  33. intercept = false;
  34. break;
  35. }
  37. //因为DOWN返回true,所以onTouchEvent中无法获取DOWN事件,所以这里要负责设置lastX,lastY
  38. lastX = x;
  39. lastY = y;
  40. lastInterceptX = x; //因为先经过的DOWN,所以在MOVE的时候,这两个值已经有了
  41. lastInterceptY = y;
  43. return intercept;
  44. }
  46. ...

测试代码的话，可以试着往这个自定义View中添加三四个ListView，每个ListView最好设置一个HeaderView来标识这个ListView是第几个页面，然后随机添加一些列表项进去，最后添加到一个Activity中去就可以了。子View的宽设置为MATCH_PARENT就是一个滑动切换页面了，你要是想试着设置为固定值也可以看看效果了。

完整的源码

  2. import android.content.Context;
  3. import android.util.AttributeSet;
  4. import android.util.Log;
  5. import android.view.MotionEvent;
  6. import android.view.VelocityTracker;
  7. import android.view.View;
  8. import android.view.ViewGroup;
  9. import android.widget.Scroller;
  11. /**
  12. * 可以水平滑动的ViewGroup
  13. * 总有有以下几个知识点:
  14. * 1. VelocityTracker:用来检测速度,如果水平速度达到一定阈值则切换页面
  15. * 2. Scroller:弹性滑动,水平滑动到一半的时候,放开以后View滑动到标准的某个页面的位置
  16. * 3. onInterceptTouchEvent:拦截机制,也是解决滑动冲突,当水平位移大于垂直位移的时候就有当前组件处理触摸事件而不是子View
  17. * 4. 自定义ViewGroup：需要自己实现onMeasure（尤其要处理wrap_content的情况），自己去实现onLayout（需要去调用每一个子View的layout函数去布局子View）
  18. * Created by leoray on 16/1/15.
  19. */
  20. public class HorizontalView extends ViewGroup {
  23. public HorizontalView(Context context) {
  24. super(context);
  25. init();
  26. }
  28. public HorizontalView(Context context, AttributeSet attrs) {
  29. super(context, attrs);
  30. init();
  31. }
  33. public HorizontalView(Context context, AttributeSet attrs, int defStyleAttr) {
  34. super(context, attrs, defStyleAttr);
  35. init();
  37. }
  39. public HorizontalView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
  40. super(context, attrs, defStyleAttr, defStyleRes);
  41. init();
  43. }
  45. public void init() {
  46. scroller = new Scroller(getContext());
  47. tracker = VelocityTracker.obtain();
  48. }
  50. int lastInterceptX;
  51. int lastInterceptY;
  53. //todo intercept的拦截逻辑
  55. @Override
  56. public boolean onInterceptTouchEvent(MotionEvent event) {
  57. //处理滑动冲突,也就是什么时候返回true的问题
  58. //规则:开始滑动时水平距离超过垂直距离的时候
  59. boolean intercept = false;
  60. int x = (int) event.getX();
  61. int y = (int) event.getY();
  62. switch (event.getAction()) {
  63. case MotionEvent.ACTION_DOWN: //DOWN返回false,导致onTouchEvent中无法获取到DOWN
  64. intercept = false;
  65. Log.d("HV", "Intercept.DOWN");
  66. if (!scroller.isFinished()) { //如果动画还没有执行完成,则打断,这种情况肯定还是由父组件处理触摸事件所以返回true
  67. scroller.abortAnimation();
  68. intercept = true;
  69. }
  70. break;
  71. case MotionEvent.ACTION_MOVE:
  72. Log.d("HV", "Intercept.MOVE");
  73. int deltaX = x - lastInterceptX;
  74. int deltaY = y - lastInterceptY;
  75. if (Math.abs(deltaX) - Math.abs(deltaY) > 0) { //水平方向距离长 MOVE中返回true一次,后续的MOVE和UP都不会收到此请求
  76. intercept = true;
  77. Log.d("HV", "intercepted");
  78. } else {
  79. intercept = false;
  80. }
  81. break;
  82. case MotionEvent.ACTION_UP:
  83. Log.d("HV", "Intercept.UP");
  84. intercept = false;
  85. break;
  86. }
  88. //因为DOWN返回true,所以onTouchEvent中无法获取DOWN事件,所以这里要负责设置lastX,lastY
  89. lastX = x;
  90. lastY = y;
  91. lastInterceptX = x; //因为先经过的DOWN,所以在MOVE的时候,这两个值已经有了
  92. lastInterceptY = y;
  94. return intercept;
  95. }
  97. int lastX;
  98. int lastY;
  99. int currentIndex = 0; //当前子元素
  100. int childWidth = 0;
  101. private Scroller scroller;
  102. private VelocityTracker tracker; //增加速度检测,如果速度比较快的话,就算没有滑动超过一半的屏幕也可以
  104. @Override
  105. public boolean onTouchEvent(MotionEvent event) {
  107. tracker.addMovement(event);
  109. int x = (int) event.getX();
  110. int y = (int) event.getY();
  112. switch (event.getAction()) {
  113. case MotionEvent.ACTION_DOWN:
  114. Log.d("HV", "TouchEvent.DOWN");
  115. if (!scroller.isFinished()) {
  116. scroller.abortAnimation();
  117. }
  118. break;
  119. case MotionEvent.ACTION_MOVE:
  120. Log.d("HV", "TouchEvent.MOVE");
  121. int deltaX = x - lastX; //跟随手指滑动
  122. Log.d("HV", "move:" + -deltaX);
  123. scrollBy(-deltaX, 0);
  124. break;
  125. case MotionEvent.ACTION_UP: //释放手指以后开始自动滑动到目标位置
  126. Log.d("HV", "TouchEvent.UP");
  127. int distance = getScrollX() - currentIndex * childWidth; //相对于当前View滑动的距离,正为向左,负为向右
  128. if (Math.abs(distance) > childWidth / 2) {//必须滑动的距离要大于1/2个宽度,否则不会切换到其他页面
  129. if (distance > 0) {
  130. currentIndex++;
  131. } else {
  132. currentIndex--;
  133. }
  134. } else {
  135. tracker.computeCurrentVelocity(1000);
  136. float xV = tracker.getXVelocity();
  137. if (Math.abs(xV) > 50) {
  138. if (xV > 0) {
  139. currentIndex--;
  140. } else {
  141. currentIndex++;
  142. }
  143. }
  144. }
  145. currentIndex = currentIndex < 0 ? 0 : currentIndex > getChildCount() - 1 ? getChildCount() - 1 : currentIndex;
  146. smoothScrollTo(currentIndex * childWidth, 0);
  147. tracker.clear();
  148. break;
  149. }
  150. lastX = x;
  151. lastY = y;
  152. // return super.onTouchEvent(event);
  153. // 这里不能调用父类的方法,因为ViewGroup是没有去实现onTouchEvent的方法的,所以super调用的是View的实现;
  154. // 而View的默认实现是没有点击长按等事件导致在DOWN的时候就直接返回false了,导致没有执行MOVE和UP方法
  155. return true;
  157. }
  159. @Override
  160. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  161. super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  162. int widthMode = MeasureSpec.getMode(widthMeasureSpec);
  163. int widthSize = MeasureSpec.getSize(widthMeasureSpec);
  164. int heightMode = MeasureSpec.getMode(heightMeasureSpec);
  165. int heightSize = MeasureSpec.getSize(heightMeasureSpec);
  166. //测量所有子元素
  167. measureChildren(widthMeasureSpec, heightMeasureSpec);
  168. //处理wrap_content的情况
  169. if (getChildCount() == 0) {
  170. setMeasuredDimension(0, 0);
  171. } else if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {
  172. View childOne = getChildAt(0);
  173. int childWidth = childOne.getMeasuredWidth();
  174. int childHeight = childOne.getMeasuredHeight();
  175. setMeasuredDimension(childWidth * getChildCount(), childHeight);
  176. } else if (widthMode == MeasureSpec.AT_MOST) {
  177. View childOne = getChildAt(0);
  178. int childWidth = childOne.getMeasuredWidth();
  179. setMeasuredDimension(childWidth * getChildCount(), heightSize);
  180. } else if (heightMode == MeasureSpec.AT_MOST) {
  181. int childHeight = getChildAt(0).getMeasuredHeight();
  182. setMeasuredDimension(widthSize, childHeight);
  183. }
  184. }
  186. //scroller的标准用法步骤
  187. @Override
  188. public void computeScroll() {
  189. super.computeScroll();
  190. if (scroller.computeScrollOffset()) {
  191. scrollTo(scroller.getCurrX(), scroller.getCurrY());
  192. postInvalidate();
  193. }
  194. }
  196. //scroller的标准用法步骤
  197. public void smoothScrollTo(int destX, int destY) {
  198. scroller.startScroll(getScrollX(), getScrollY(), destX - getScrollX(), destY - getScrollY(), 1000);
  199. invalidate();
  200. }
  202. //不要问我当前View参数中的四个位置是哪儿来的
  203. @Override
  204. protected void onLayout(boolean changed, int l, int t, int r, int b) {
  205. int childCount = getChildCount();
  206. int left = 0; //左边的距离
  207. View child;
  208. //遍历布局子元素
  209. for (int i = 0; i < childCount; i++) {
  210. child = getChildAt(i);
  211. int width = child.getMeasuredWidth();
  212. childWidth = width; //赋值给子元素宽度变量
  213. child.layout(left, 0, left + width, child.getMeasuredHeight());
  214. left += width;
  215. }
  216. }
  217. }