从头至尾一点点实现自己的ViewPager效果
对于ViewPager，应该没有人在项目中没使用过它，效果非常的赞，使用也非常简单，但是如果自己来实现这样的效果，我想并非三下五除二的事了，这里涉及到怎么自定义ViewGroup了，它相比自定义View还要复杂一些，所以这次从头自尾一点点实现这样的效果来对自定义ViewGoup有深刻的认识，知其原理才能做到随心所欲，下面开始：
先预览一下要实现的效果图：
下面则新建一个工程慢慢来实现它：
首先需要用到几张效果图，这里将这些图分别放到两个文件夹中，如下：
下面新建一个自定义的ViewGroup，将会一步步实现我们需要的效果:
MyScrollView.java:
public class MyScrollView extends ViewGroup { public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { } }
其中需要实现两个必实现的方法，接下来会一点点进行填充，接下来在布局文件中进行声明：
activity_main.xml:
<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:gravity="center_horizontal" android:orientation="vertical" tools:context=".MainActivity" > <com.example.myviewpager.MyScrollView android:id="@+id/myscroll_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
首先第一步先将六张图片添加到ViewGroup中，具体的如何排版先不用管：
MainActivity.java:
public class MainActivity extends Activity { // 图片资源ID 数组 private int[] ids = new int[] { R.drawable.a1, R.drawable.a2, R.drawable.a3, R.drawable.a4, R.drawable.a5, R.drawable.a6 }; private MyScrollView myscroll_view; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); myscroll_view = (MyScrollView) findViewById(R.id.myscroll_view); for (int i = 0; i < ids.length; i++) { ImageView image = new ImageView(this); image.setBackgroundResource(ids[i]); myscroll_view.addView(image); } } }
将元素添加进去之后，接下来就得对其布局进行控制，到底是怎么来显示这些图片呢？四大布局都有自己的布局规则，我们也得有我们自己的，这里就得去在MyScrollView的onLayout()做文章了，先来看下该方法：
接下来应该怎么来布局呢？有一些基础概念可以参考博文：http://www.cnblogs.com/webor2006/p/3596728.html，这里就直接把我们要布局的样子画出来：
上面是我们希望的布局效果，所以下面来实现一下：
这时来看下效果，应该就只显示第一张图，而且铺满整个屏幕，其它的图片都是在屏幕区域之外了：
下面则要实现通过的手指滑动来切换不同的图片，所以需要响应触摸事件，重写onTouchEvent方法，然后对事件进行解析，对于判断是否是移动、点击、长按等这些事件的逻辑代码几乎是一样的，所以对于这些事件的解析有必要抽象出来，所以google就提供了一个手势识别的工具类---GestureDetector，所以这次用它，可以省一些解析代码，而怎么自己来解析实际在上次的自定义滑动开机按钮上已经说明过，可参考：http://www.cnblogs.com/webor2006/p/4625461.html，下面来用它：
public class MyScrollView extends ViewGroup { private Context context; /** * 手势识别的工具类 */ private GestureDetector detector; public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); this.context = context; initView(); } private void initView() { detector = new GestureDetector(context, new OnGestureListener() { @Override public boolean onSingleTapUp(MotionEvent e) { return false; } @Override public void onShowPress(MotionEvent e) { } @Override /** * 响应手指在屏幕上的滑动事件 */ public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { return false; } @Override public void onLongPress(MotionEvent e) { } @Override /** * 发生快速滑动时的回调 */ public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { return false; } @Override public boolean onDown(MotionEvent e) { return false; } }); } @Override /** * 对子view进行布局，确定子view的位置 * changed 若为true ，说明布局发生了变化 * l\t\r\b\ 是指当前viewgroup 在其父view中的位置,一般在排列自己的位置时,基本上没啥用 */ protected void onLayout(boolean changed, int l, int t, int r, int b) { for (int i = 0; i < getChildCount(); i++) { View view = getChildAt(i); // 取得下标为I的子view /** * 父view 会根据子view的需求，和自身的情况，来综合确定子view的位置,(确定他的大小) */ // 指定子view的位置 , 左，上，右，下，是指在viewGround坐标系中的位置 view.layout(0 + i * getWidth(), 0, getWidth() + i * getWidth(), getHeight()); } } @Override public boolean onTouchEvent(MotionEvent event) { super.onTouchEvent(event); detector.onTouchEvent(event);//将手势的识别交由google的工具类完成了 return true; } }
接下来我们只要去实现相应的事件回调既可，大大简化工作量，首要的工作就是来响应手指的滑动，怎么让ViewGroup中的内容进行移动，这里需要用到一个新的方法：scrollBy()，直接上代码，超简单:
public class MyScrollView extends ViewGroup { private Context context; /** * 手势识别的工具类 */ private GestureDetector detector; public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); this.context = context; initView(); } private void initView() { detector = new GestureDetector(context, new OnGestureListener() { @Override public boolean onSingleTapUp(MotionEvent e) { return false; } @Override public void onShowPress(MotionEvent e) { } @Override /** * 响应手指在屏幕上的滑动事件 */ public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { /** * 移动当前view内容 移动一段距离 disX X方向移的距离 为正是，图片向左移动，为负时，图片向右移动 disY * Y方向移动的距离 */ scrollBy((int) distanceX, 0); return false; } @Override public void onLongPress(MotionEvent e) { } @Override /** * 发生快速滑动时的回调 */ public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { return false; } @Override public boolean onDown(MotionEvent e) { return false; } }); } @Override /** * 对子view进行布局，确定子view的位置 * changed 若为true ，说明布局发生了变化 * l\t\r\b\ 是指当前viewgroup 在其父view中的位置,一般在排列自己的位置时,基本上没啥用 */ protected void onLayout(boolean changed, int l, int t, int r, int b) { for (int i = 0; i < getChildCount(); i++) { View view = getChildAt(i); // 取得下标为I的子view /** * 父view 会根据子view的需求，和自身的情况，来综合确定子view的位置,(确定他的大小) */ // 指定子view的位置 , 左，上，右，下，是指在viewGround坐标系中的位置 view.layout(0 + i * getWidth(), 0, getWidth() + i * getWidth(), getHeight()); } } @Override public boolean onTouchEvent(MotionEvent event) { super.onTouchEvent(event); detector.onTouchEvent(event);// 将手势的识别交由google的工具类完成了 return true; } }
运行看下效果：
就用一句话就实现了滑动效果，挺强大滴，在继续实现之前，来看一个细节问题，也是之前提出来的一个问题：为什么要将六张图片分两个文件夹来存放，先来对比下两个文件夹下的图片效果：
对比下原图：
发现第二张图变模糊了，这是由于第一张图a1是放在mdpi中，a5放在hdpi中：
这是为什么呢？为什么放在高分辨率里面的图片反而变模糊了？这是由于当前模拟器是mdpi分辨率的，所以a1图片直接使用，不进行压缩，所以图片是清晰的；而当使用a5这张图时，由于它是高分辨率下的图片，当使用时发现模拟器不支持这么高的，所以系统对图片进行的压缩，然后再进行使用，所以这就是为什么第二张图片模糊的原因，这个知识点在实际的开发中肯定会碰到，所以单独将图片分开存放的原因也就是为了说明这个问题，好了，回到正题。
接着再对滑动的scrollBy方法进行说明一下，先看下它的系统实现：
所以需要对scrollTo进行一个了解：
关于scrollBy与scrollTo方法的区别，http://www.cnblogs.com/webor2006/p/4625461.html也有说明，这里贴出关键点：
public void scrollTo(int x, int y)
说明：在当前视图内容偏移至(x , y)坐标处，即显示(可视)区域位于(x , y)坐标处。
方法原型为： View.java类中
/** * 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; //回调onScrollChanged方法 onScrollChanged(mScrollX, mScrollY, oldX, oldY); if (!awakenScrollBars()) { invalidate(); //一般都引起重绘 } } }
public void scrollBy(int x, int y)
说明：在当前视图内容继续偏移(x , y)个单位，显示(可视)区域也跟着偏移(x,y)个单位。
方法原型为： View.java类中
/** * 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 */ // 看出原因了吧 。。 mScrollX 与 mScrollY 代表我们当前偏移的位置 ， 在当前位置继续偏移(x ,y)个单位 public void scrollBy(int x, int y) { scrollTo(mScrollX + x, mScrollY + y); }
下面继续完善功能，当我们滑过屏幕一半的位置时松手则切换下一张图片，否则还是回到当前图片，效果如下：
所以还需单独对触摸事件进行进一步处理，这里一步步来实现这样的效果。
首先在这里先只对UP事件写上一句这个代码：
看下效果：
有一点点这个效果，但是还需要接着细化，做一些判断。具体代码如下:
public class MyScrollView extends ViewGroup { private Context context; /** * 手势识别的工具类 */ private GestureDetector detector; /** * 当前的ID值 显示在屏幕上的子View的下标 */ private int currId = 0; /** * down 事件时的x坐标 */ private int firstX = 0; private int firstY = 0; public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); this.context = context; initView(); } private void initView() { detector = new GestureDetector(context, new OnGestureListener() { @Override public boolean onSingleTapUp(MotionEvent e) { return false; } @Override public void onShowPress(MotionEvent e) { } @Override /** * 响应手指在屏幕上的滑动事件 */ public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { /** * 移动当前view内容 移动一段距离 disX X方向移的距离 为正是，图片向左移动，为负时，图片向右移动 disY * Y方向移动的距离 */ scrollBy((int) distanceX, 0); /** * 将当前视图的基准点移动到某个点 坐标点 x 水平方向X坐标 Y 竖直方向Y坐标 scrollTo(x, y); */ return false; } @Override public void onLongPress(MotionEvent e) { } @Override /** * 发生快速滑动时的回调 */ public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { return false; } @Override public boolean onDown(MotionEvent e) { return false; } }); } @Override /** * 对子view进行布局，确定子view的位置 * changed 若为true ，说明布局发生了变化 * l\t\r\b\ 是指当前viewgroup 在其父view中的位置,一般在排列自己的位置时,基本上没啥用 */ protected void onLayout(boolean changed, int l, int t, int r, int b) { for (int i = 0; i < getChildCount(); i++) { View view = getChildAt(i); // 取得下标为I的子view /** * 父view 会根据子view的需求，和自身的情况，来综合确定子view的位置,(确定他的大小) */ // 指定子view的位置 , 左，上，右，下，是指在viewGround坐标系中的位置 view.layout(0 + i * getWidth(), 0, getWidth() + i * getWidth(), getHeight()); } } @Override public boolean onTouchEvent(MotionEvent event) { super.onTouchEvent(event); detector.onTouchEvent(event);// 将手势的识别交由google的工具类完成了 // 添加自己的事件解析 switch (event.getAction()) { case MotionEvent.ACTION_DOWN: firstX = (int) event.getX(); break; case MotionEvent.ACTION_MOVE: break; case MotionEvent.ACTION_UP: int nextId = 0; if (event.getX() - firstX > getWidth() / 2) { // 手指向右滑动，超过屏幕的1/2 // 当前的currid - 1 nextId = currId - 1; } else if (firstX - event.getX() > getWidth() / 2) { // 手指向左滑动，超过屏幕的1/2 // 当前的currid // + 1 nextId = currId + 1; } else { nextId = currId; } moveToDest(nextId); break; } return true; } /** * 移动到指定的屏幕上 * * @param nextId * 屏幕 的下标 */ public void moveToDest(int nextId) { /* * 对 nextId 进行判断 ，确保 是在合理的范围 即 nextId >=0 && next <=getChildCount()-1 */ // 确保 currId>=0 currId = (nextId >= 0) ? nextId : 0; // 确保 currId<=getChildCount()-1 currId = (nextId <= getChildCount() - 1) ? nextId : (getChildCount() - 1); scrollTo(currId * getWidth(), 0); /* * 刷新当前view onDraw()方法 的执行 */ invalidate(); } }
这时来看下效果：
现在的效果已经很接近ViewPager了，但上图中发现一个BUG，就是向右滑动第一张图时，居然不可以切换，下面来解决下：
再次运行：
BUG成功修复，现在已经可以正常的滑动切换了，但是其中还是有一些细节是需要进一步完善的，所以接下来继续进行细化，首先细化的切换的动画，如下：
而目前我们“scrollTo(currId * getWidth(), 0);”就是瞬间移动，没有任何的过渡，所以接下来要改良它，实际上要让动画平滑的过渡，可以在这段距离上多来一些scrollTo，所以先得到这段要移动的距离：
接下来，需要在这段距离中不断的进行计算并scrollTo，这里新建一个类用来计算位移：
MyScroller.java:
public class MyScroller { private int startX; private int startY; private int distanceX; private int distanceY; /** * 开始执行动画的时间 */ private long startTime; /** * 判断是否正在执行动画 true 是还在运行 false 已经停止 */ private boolean isFinish; public MyScroller(Context ctx) { } /** * 开移移动 * * @param startX * 开始时的X坐标 * @param startY * 开始时的Y坐标 * @param disX * X方向 要移动的距离 * @param disY * Y方向 要移动的距离 */ public void startScroll(int startX, int startY, int disX, int disY) { this.startX = startX; this.startY = startY; this.distanceX = disX; this.distanceY = disY; this.startTime = SystemClock.uptimeMillis();// 为什么不用"System.currentTimeMillis()",因为这个值太大了,是从1970算起的, // 而SystemClock.uptimeMillis()是指开机算起,效率要大大高于前者,计算位移足够了 this.isFinish = false; } }
MyScrollView.java:
public class MyScrollView extends ViewGroup { private Context context; /** * 手势识别的工具类 */ private GestureDetector detector; /** * 当前的ID值 显示在屏幕上的子View的下标 */ private int currId = 0; /** * down 事件时的x坐标 */ private int firstX = 0; private int firstY = 0; private MyScroller myScroller; public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); this.context = context; initView(); } private void initView() { myScroller = new MyScroller(context); detector = new GestureDetector(context, new OnGestureListener() { @Override public boolean onSingleTapUp(MotionEvent e) { return false; } @Override public void onShowPress(MotionEvent e) { } @Override /** * 响应手指在屏幕上的滑动事件 */ public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { /** * 移动当前view内容 移动一段距离 disX X方向移的距离 为正是，图片向左移动，为负时，图片向右移动 disY * Y方向移动的距离 */ scrollBy((int) distanceX, 0); /** * 将当前视图的基准点移动到某个点 坐标点 x 水平方向X坐标 Y 竖直方向Y坐标 scrollTo(x, y); */ return false; } @Override public void onLongPress(MotionEvent e) { } @Override /** * 发生快速滑动时的回调 */ public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { return false; } @Override public boolean onDown(MotionEvent e) { return false; } }); } @Override /** * 对子view进行布局，确定子view的位置 * changed 若为true ，说明布局发生了变化 * l\t\r\b\ 是指当前viewgroup 在其父view中的位置,一般在排列自己的位置时,基本上没啥用 */ protected void onLayout(boolean changed, int l, int t, int r, int b) { for (int i = 0; i < getChildCount(); i++) { View view = getChildAt(i); // 取得下标为I的子view /** * 父view 会根据子view的需求，和自身的情况，来综合确定子view的位置,(确定他的大小) */ // 指定子view的位置 , 左，上，右，下，是指在viewGround坐标系中的位置 view.layout(0 + i * getWidth(), 0, getWidth() + i * getWidth(), getHeight()); } } @Override public boolean onTouchEvent(MotionEvent event) { super.onTouchEvent(event); detector.onTouchEvent(event);// 将手势的识别交由google的工具类完成了 // 添加自己的事件解析 switch (event.getAction()) { case MotionEvent.ACTION_DOWN: firstX = (int) event.getX(); break; case MotionEvent.ACTION_MOVE: break; case MotionEvent.ACTION_UP: int nextId = 0; if (event.getX() - firstX > getWidth() / 2) { // 手指向右滑动，超过屏幕的1/2 // 当前的currid - 1 nextId = currId - 1; } else if (firstX - event.getX() > getWidth() / 2) { // 手指向左滑动，超过屏幕的1/2 // 当前的currid // + 1 nextId = currId + 1; } else { nextId = currId; } moveToDest(nextId); break; } return true; } /** * 移动到指定的屏幕上 * * @param nextId * 屏幕 的下标 */ public void moveToDest(int nextId) { /* * 对 nextId 进行判断 ，确保 是在合理的范围 即 nextId >=0 && next <=getChildCount()-1 */ if (nextId < 0) nextId = 0; // 确保 currId>=0 currId = (nextId >= 0) ? nextId : 0; // 确保 currId<=getChildCount()-1 currId = (nextId <= getChildCount() - 1) ? nextId : (getChildCount() - 1); // 瞬间移动 // scrollTo(currId * getWidth(), 0); int distance = currId * getWidth() - getScrollX(); // 最终的位置 - 现在的位置 = // 要移动的距离 // 设置运行的时间 myScroller.startScroll(getScrollX(), 0, distance, 0); /* * 刷新当前view onDraw()方法 的执行 */ invalidate(); } }
接下来要实现平滑的过渡，需要用到一个核心方法：computeScroll():
接下来它的实现代码如下：
MyScroller.java:
public class MyScroller { private int startX; private int startY; private int distanceX; private int distanceY; /** * 开始执行动画的时间 */ private long startTime; /** * 判断是否正在执行动画 true 是还在运行 false 已经停止 */ private boolean isFinish; /** * 默认运行的时间 毫秒值 */ private int duration = 500; /** * 当前的X值 */ private long currX; /** * 当前的Y值 */ private long currY; public long getCurrX() { return currX; } public MyScroller(Context ctx) { } /** * 开移移动 * * @param startX * 开始时的X坐标 * @param startY * 开始时的Y坐标 * @param disX * X方向 要移动的距离 * @param disY * Y方向 要移动的距离 */ public void startScroll(int startX, int startY, int disX, int disY) { this.startX = startX; this.startY = startY; this.distanceX = disX; this.distanceY = disY; this.startTime = SystemClock.uptimeMillis();// 为什么不用"System.currentTimeMillis()",因为这个值太大了,是从1970算起的, // 而SystemClock.uptimeMillis()是指开机算起,效率要大大高于前者,计算位移足够了 this.isFinish = false; } /** * 计算一下当前的运行状况 返回值： true 还在运行 false 运行结束 */ public boolean computeScrollOffset() { if (isFinish) { return false; } // 获得所用的时间 long passTime = SystemClock.uptimeMillis() - startTime; // 如果时间还在允许的范围内 if (passTime < duration) { // 当前的位置 = 开始的位置 + 移动的距离（距离 = 速度*时间） currX = startX + distanceX * passTime / duration; currY = startY + distanceY * passTime / duration; } else { currX = startX + distanceX; currY = startY + distanceY; isFinish = true; } return true; } }
以上的算法还是很容易理解，这里就不多解释，接下来运行看一下效果：
从结果中可以看到切换是慢慢过渡的，上面由于截图的原因可能看的不是很清楚，自己运行来观察就很明显，下面来打一下log，来观察一下computeScroll()方法会执行多少次：
可以发现切换由多个平移动作组成，而且这个方法还跟手机性能有关，如果手机性能好，这个方法执行的次数也更多，关于这个平滑移动的效果其实还不是太好，没用像ViewPager那样的带有加速度效果，要实现跟它一样的该怎么办呢？其实很简单，可以采用系统的android.widget.Scroller，我们为啥要自己实现MyScroller，也就是为了引出它，它的原理就跟咱们自己实现的差不多，只是系统的更加复杂，考虑的东西比较多，所以下面改用系统的来替换：
public class MyScrollView extends ViewGroup { private Context context; /** * 手势识别的工具类 */ private GestureDetector detector; /** * 当前的ID值 显示在屏幕上的子View的下标 */ private int currId = 0; /** * down 事件时的x坐标 */ private int firstX = 0; private int firstY = 0; // private MyScroller myScroller; private Scroller myScroller; public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); this.context = context; initView(); } private void initView() { // myScroller = new MyScroller(context); myScroller = new Scroller(context); detector = new GestureDetector(context, new OnGestureListener() { @Override public boolean onSingleTapUp(MotionEvent e) { return false; } @Override public void onShowPress(MotionEvent e) { } @Override /** * 响应手指在屏幕上的滑动事件 */ public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { /** * 移动当前view内容 移动一段距离 disX X方向移的距离 为正是，图片向左移动，为负时，图片向右移动 disY * Y方向移动的距离 */ scrollBy((int) distanceX, 0); /** * 将当前视图的基准点移动到某个点 坐标点 x 水平方向X坐标 Y 竖直方向Y坐标 scrollTo(x, y); */ return false; } @Override public void onLongPress(MotionEvent e) { } @Override /** * 发生快速滑动时的回调 */ public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { return false; } @Override public boolean onDown(MotionEvent e) { return false; } }); } @Override /** * 对子view进行布局，确定子view的位置 * changed 若为true ，说明布局发生了变化 * l\t\r\b\ 是指当前viewgroup 在其父view中的位置,一般在排列自己的位置时,基本上没啥用 */ protected void onLayout(boolean changed, int l, int t, int r, int b) { for (int i = 0; i < getChildCount(); i++) { View view = getChildAt(i); // 取得下标为I的子view /** * 父view 会根据子view的需求，和自身的情况，来综合确定子view的位置,(确定他的大小) */ // 指定子view的位置 , 左，上，右，下，是指在viewGround坐标系中的位置 view.layout(0 + i * getWidth(), 0, getWidth() + i * getWidth(), getHeight()); } } @Override public boolean onTouchEvent(MotionEvent event) { super.onTouchEvent(event); detector.onTouchEvent(event);// 将手势的识别交由google的工具类完成了 // 添加自己的事件解析 switch (event.getAction()) { case MotionEvent.ACTION_DOWN: firstX = (int) event.getX(); break; case MotionEvent.ACTION_MOVE: break; case MotionEvent.ACTION_UP: int nextId = 0; if (event.getX() - firstX > getWidth() / 2) { // 手指向右滑动，超过屏幕的1/2 // 当前的currid - 1 nextId = currId - 1; } else if (firstX - event.getX() > getWidth() / 2) { // 手指向左滑动，超过屏幕的1/2 // 当前的currid // + 1 nextId = currId + 1; } else { nextId = currId; } moveToDest(nextId); break; } return true; } /** * 移动到指定的屏幕上 * * @param nextId * 屏幕 的下标 */ public void moveToDest(int nextId) { /* * 对 nextId 进行判断 ，确保 是在合理的范围 即 nextId >=0 && next <=getChildCount()-1 */ if (nextId < 0) nextId = 0; // 确保 currId>=0 currId = (nextId >= 0) ? nextId : 0; // 确保 currId<=getChildCount()-1 currId = (nextId <= getChildCount() - 1) ? nextId : (getChildCount() - 1); // 瞬间移动 // scrollTo(currId * getWidth(), 0); int distance = currId * getWidth() - getScrollX(); // 最终的位置 - 现在的位置 = // 要移动的距离 // 设置运行的时间 myScroller.startScroll(getScrollX(), 0, distance, 0); /* * 刷新当前view onDraw()方法 的执行 */ invalidate(); } /** * invalidate(); 会导致 computeScroll（）这个方法的执行 */ @Override public void computeScroll() { if (myScroller.computeScrollOffset()) { int newX = (int) myScroller.getCurrX(); scrollTo(newX, 0); invalidate(); } } }
其它的调用跟咱们的一模一样，这时看到的效果就会跟ViewPager一样，有个加速度，由于截屏看的不是很清楚，这里就不贴了，自行运行就知道了。
接下来关于滑动切换还有一个细节需要进行处理，就是目前我们必须要滑动到屏幕中间才会进行切换，而ViewPager要比这个任性，当快速滑动而没有过屏幕中间时也会进行切换，像这样的效果该如何实现呢？对于手势的解析我们已经用过了GestureDetector这个类了，实际上快速滑动的它也已经有现成的了，我们只要去实现相应的逻辑既可，这就是这个手势工具类的方便之处，如下：
public class MyScrollView extends ViewGroup { private Context context; /** * 手势识别的工具类 */ private GestureDetector detector; /** * 当前的ID值 显示在屏幕上的子View的下标 */ private int currId = 0; /** * down 事件时的x坐标 */ private int firstX = 0; private int firstY = 0; // private MyScroller myScroller; private Scroller myScroller; /** * 判断是否发生快速滑动 */ protected boolean isFling; public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); this.context = context; initView(); } private void initView() { // myScroller = new MyScroller(context); myScroller = new Scroller(context); detector = new GestureDetector(context, new OnGestureListener() { @Override public boolean onSingleTapUp(MotionEvent e) { return false; } @Override public void onShowPress(MotionEvent e) { } @Override /** * 响应手指在屏幕上的滑动事件 */ public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { /** * 移动当前view内容 移动一段距离 disX X方向移的距离 为正是，图片向左移动，为负时，图片向右移动 disY * Y方向移动的距离 */ scrollBy((int) distanceX, 0); /** * 将当前视图的基准点移动到某个点 坐标点 x 水平方向X坐标 Y 竖直方向Y坐标 scrollTo(x, y); */ return false; } @Override public void onLongPress(MotionEvent e) { } @Override /** * 发生快速滑动时的回调,这里主要关注velocityX,当它>0时表示向右滑动,<0时表示向左滑动 */ public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { isFling = true; if (velocityX > 0 && currId > 0) { // 快速向右滑动 currId--; } else if (velocityX < 0 && currId < getChildCount() - 1) { // 快速向左滑动 currId++; } moveToDest(currId); return false; } @Override public boolean onDown(MotionEvent e) { return false; } }); } @Override /** * 对子view进行布局，确定子view的位置 * changed 若为true ，说明布局发生了变化 * l\t\r\b\ 是指当前viewgroup 在其父view中的位置,一般在排列自己的位置时,基本上没啥用 */ protected void onLayout(boolean changed, int l, int t, int r, int b) { for (int i = 0; i < getChildCount(); i++) { View view = getChildAt(i); // 取得下标为I的子view /** * 父view 会根据子view的需求，和自身的情况，来综合确定子view的位置,(确定他的大小) */ // 指定子view的位置 , 左，上，右，下，是指在viewGround坐标系中的位置 view.layout(0 + i * getWidth(), 0, getWidth() + i * getWidth(), getHeight()); } } @Override public boolean onTouchEvent(MotionEvent event) { super.onTouchEvent(event); detector.onTouchEvent(event);// 将手势的识别交由google的工具类完成了 // 添加自己的事件解析 switch (event.getAction()) { case MotionEvent.ACTION_DOWN: firstX = (int) event.getX(); break; case MotionEvent.ACTION_MOVE: break; case MotionEvent.ACTION_UP: if (!isFling) {// 在没有发生快速滑动的时候，才执行按位置判断currid int nextId = 0; if (event.getX() - firstX > getWidth() / 2) { // 手指向右滑动，超过屏幕的1/2 // 当前的currid - 1 nextId = currId - 1; } else if (firstX - event.getX() > getWidth() / 2) { // 手指向左滑动，超过屏幕的1/2 // 当前的currid // + 1 nextId = currId + 1; } else { nextId = currId; } moveToDest(nextId); } isFling = false; break; } return true; } /** * 移动到指定的屏幕上 * * @param nextId * 屏幕 的下标 */ public void moveToDest(int nextId) { /* * 对 nextId 进行判断 ，确保 是在合理的范围 即 nextId >=0 && next <=getChildCount()-1 */ if (nextId < 0) nextId = 0; // 确保 currId>=0 currId = (nextId >= 0) ? nextId : 0; // 确保 currId<=getChildCount()-1 currId = (nextId <= getChildCount() - 1) ? nextId : (getChildCount() - 1); // 瞬间移动 // scrollTo(currId * getWidth(), 0); int distance = currId * getWidth() - getScrollX(); // 最终的位置 - 现在的位置 = // 要移动的距离 // 设置运行的时间 myScroller.startScroll(getScrollX(), 0, distance, 0); /* * 刷新当前view onDraw()方法 的执行 */ invalidate(); } /** * invalidate(); 会导致 computeScroll（）这个方法的执行 */ @Override public void computeScroll() { if (myScroller.computeScrollOffset()) { int newX = (int) myScroller.getCurrX(); scrollTo(newX, 0); invalidate(); } } }
这时再看下效果：
这时整个滑动效果就跟ViewPager的一模一样了，效果非常得赞，至此一个完整的滑动效果就实现了，接下来添加一些导航的效果，如：
所以先在布局中添加一个单选按钮：
activity_main.xml:
<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:gravity="center_horizontal" android:orientation="vertical" tools:context=".MainActivity" > <RadioGroup android:id="@+id/radioGroup" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > </RadioGroup> <com.example.myviewpager.MyScrollView android:id="@+id/myscroll_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
MainActivity.java:
public class MainActivity extends Activity { // 图片资源ID 数组 private int[] ids = new int[] { R.drawable.a1, R.drawable.a2, R.drawable.a3, R.drawable.a4, R.drawable.a5, R.drawable.a6 }; private MyScrollView myscroll_view; private RadioGroup radioGroup; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); myscroll_view = (MyScrollView) findViewById(R.id.myscroll_view); radioGroup = (RadioGroup) findViewById(R.id.radioGroup); for (int i = 0; i < ids.length; i++) { ImageView image = new ImageView(this); image.setBackgroundResource(ids[i]); myscroll_view.addView(image); // 添加radioButton RadioButton rbtn = new RadioButton(this); rbtn.setId(i); radioGroup.addView(rbtn); if (i == 0) { rbtn.setChecked(true); } } } }
这时则需要给MyScrollView添加相应的监听事件：
public class MyScrollView extends ViewGroup { private Context context; /** * 手势识别的工具类 */ private GestureDetector detector; /** * 当前的ID值 显示在屏幕上的子View的下标 */ private int currId = 0; /** * down 事件时的x坐标 */ private int firstX = 0; private int firstY = 0; // private MyScroller myScroller; private Scroller myScroller; /** * 判断是否发生快速滑动 */ protected boolean isFling; private MyPageChangedListener pageChangedListener; public void setPageChangedListener(MyPageChangedListener pageChangedListener) { this.pageChangedListener = pageChangedListener; } public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); this.context = context; initView(); } private void initView() { // myScroller = new MyScroller(context); myScroller = new Scroller(context); detector = new GestureDetector(context, new OnGestureListener() { @Override public boolean onSingleTapUp(MotionEvent e) { return false; } @Override public void onShowPress(MotionEvent e) { } @Override /** * 响应手指在屏幕上的滑动事件 */ public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { /** * 移动当前view内容 移动一段距离 disX X方向移的距离 为正是，图片向左移动，为负时，图片向右移动 disY * Y方向移动的距离 */ scrollBy((int) distanceX, 0); /** * 将当前视图的基准点移动到某个点 坐标点 x 水平方向X坐标 Y 竖直方向Y坐标 scrollTo(x, y); */ return false; } @Override public void onLongPress(MotionEvent e) { } @Override /** * 发生快速滑动时的回调,这里主要关注velocityX,当它>0时表示向右滑动,<0时表示向左滑动 */ public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { isFling = true; if (velocityX > 0 && currId > 0) { // 快速向右滑动 currId--; } else if (velocityX < 0 && currId < getChildCount() - 1) { // 快速向左滑动 currId++; } moveToDest(currId); return false; } @Override public boolean onDown(MotionEvent e) { return false; } }); } @Override /** * 对子view进行布局，确定子view的位置 * changed 若为true ，说明布局发生了变化 * l\t\r\b\ 是指当前viewgroup 在其父view中的位置,一般在排列自己的位置时,基本上没啥用 */ protected void onLayout(boolean changed, int l, int t, int r, int b) { for (int i = 0; i < getChildCount(); i++) { View view = getChildAt(i); // 取得下标为I的子view /** * 父view 会根据子view的需求，和自身的情况，来综合确定子view的位置,(确定他的大小) */ // 指定子view的位置 , 左，上，右，下，是指在viewGround坐标系中的位置 view.layout(0 + i * getWidth(), 0, getWidth() + i * getWidth(), getHeight()); } } @Override public boolean onTouchEvent(MotionEvent event) { super.onTouchEvent(event); detector.onTouchEvent(event);// 将手势的识别交由google的工具类完成了 // 添加自己的事件解析 switch (event.getAction()) { case MotionEvent.ACTION_DOWN: firstX = (int) event.getX(); break; case MotionEvent.ACTION_MOVE: break; case MotionEvent.ACTION_UP: if (!isFling) {// 在没有发生快速滑动的时候，才执行按位置判断currid int nextId = 0; if (event.getX() - firstX > getWidth() / 2) { // 手指向右滑动，超过屏幕的1/2 // 当前的currid - 1 nextId = currId - 1; } else if (firstX - event.getX() > getWidth() / 2) { // 手指向左滑动，超过屏幕的1/2 // 当前的currid // + 1 nextId = currId + 1; } else { nextId = currId; } moveToDest(nextId); } isFling = false; break; } return true; } /** * 移动到指定的屏幕上 * * @param nextId * 屏幕 的下标 */ public void moveToDest(int nextId) { /* * 对 nextId 进行判断 ，确保 是在合理的范围 即 nextId >=0 && next <=getChildCount()-1 */ if (nextId < 0) nextId = 0; // 确保 currId>=0 currId = (nextId >= 0) ? nextId : 0; // 确保 currId<=getChildCount()-1 currId = (nextId <= getChildCount() - 1) ? nextId : (getChildCount() - 1); // 瞬间移动 // scrollTo(currId * getWidth(), 0); // 触发listener事件 if (pageChangedListener != null) { pageChangedListener.moveToDest(currId); } int distance = currId * getWidth() - getScrollX(); // 最终的位置 - 现在的位置 = // 要移动的距离 // 设置运行的时间 myScroller.startScroll(getScrollX(), 0, distance, 0); /* * 刷新当前view onDraw()方法 的执行 */ invalidate(); } /** * invalidate(); 会导致 computeScroll（）这个方法的执行 */ @Override public void computeScroll() { if (myScroller.computeScrollOffset()) { int newX = (int) myScroller.getCurrX(); scrollTo(newX, 0); invalidate(); } } /** * 页面改时时的监听接口 */ public interface MyPageChangedListener { void moveToDest(int currid); } }
接下来则注册监听，当滑动时相应的选项按钮也会进行更新：
public class MainActivity extends Activity { // 图片资源ID 数组 private int[] ids = new int[] { R.drawable.a1, R.drawable.a2, R.drawable.a3, R.drawable.a4, R.drawable.a5, R.drawable.a6 }; private MyScrollView myscroll_view; private RadioGroup radioGroup; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); myscroll_view = (MyScrollView) findViewById(R.id.myscroll_view); radioGroup = (RadioGroup) findViewById(R.id.radioGroup); for (int i = 0; i < ids.length; i++) { ImageView image = new ImageView(this); image.setBackgroundResource(ids[i]); myscroll_view.addView(image); // 添加radioButton RadioButton rbtn = new RadioButton(this); rbtn.setId(i); radioGroup.addView(rbtn); if (i == 0) { rbtn.setChecked(true); } } myscroll_view.setPageChangedListener(new MyPageChangedListener() { @Override public void moveToDest(int currid) { ((RadioButton) radioGroup.getChildAt(currid)).setChecked(true); } }); radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { myscroll_view.moveToDest(checkedId); } }); } }
这时看下效果：
这样就实现了事件的监听了，只是发现切换的速度有点快，比如我从第一个切到最后一次，希望有一个过渡，要实现它其实很简单，稍加修改一下参数既可：
/** * 移动到指定的屏幕上 * * @param nextId * 屏幕 的下标 */ public void moveToDest(int nextId) { /* * 对 nextId 进行判断 ，确保 是在合理的范围 即 nextId >=0 && next <=getChildCount()-1 */ if (nextId < 0) nextId = 0; // 确保 currId>=0 currId = (nextId >= 0) ? nextId : 0; // 确保 currId<=getChildCount()-1 currId = (nextId <= getChildCount() - 1) ? nextId : (getChildCount() - 1); // 瞬间移动 // scrollTo(currId * getWidth(), 0); // 触发listener事件 if (pageChangedListener != null) { pageChangedListener.moveToDest(currId); } int distance = currId * getWidth() - getScrollX(); // 最终的位置 - 现在的位置 = // 要移动的距离 // myScroller.startScroll(getScrollX(), 0, distance, 0); // 设置运行的时间 myScroller .startScroll(getScrollX(), 0, distance, 0, Math.abs(distance)); /* * 刷新当前view onDraw()方法 的执行 */ invalidate(); }
这时再看效果：
这样切换就会有一定的时间过渡，上面截图效果不是很流畅，可以真实运行查看一下。
而对于ViewPager而言，每个页面的内容肯定不只是一张图片，而是可以是复杂的界面，所以接下来我们添加一个ViewGroup，准备布局：
temp.xml:
<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:background="@android:color/darker_gray" android:gravity="center_horizontal" android:orientation="vertical" tools:context=".MainActivity" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large Text" android:textAppearance="?android:attr/textAppearanceLarge" /> <ProgressBar android:id="@+id/progressBar1" style="?android:attr/progressBarStyleLarge" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <ScrollView android:id="@+id/scrollView1" android:layout_width="match_parent" android:layout_height="wrap_content" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large TextLarge TextLarge TextLarge TextLarge TextLarge TextLarge TextLarge TextLarge Text" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large TextLarge TextLarge TextLarge TextLarge TextLarge TextLarge Text" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large TextLarge TextLarge TextLarge TextLarge TextLarge Text" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large TextLarge TextLarge TextLarge TextLarge TextLarge TextLarge Text" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large TextLarge TextLarge TextLarge TextLarge TextLarge TextLarge Text" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large TextLarge TextLarge TextLarge TextLarge TextLarge TextLarge Text" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large TextLarge TextLarge TextLarge TextLarge TextLarge TextLarge Text" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large TextLarge TextLarge TextLarge TextLarge TextLarge TextLarge Text" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large TextLarge TextLarge TextLarge TextLarge TextLarge TextLarge Text" android:textAppearance="?android:attr/textAppearanceLarge" /> </LinearLayout> </ScrollView> </LinearLayout>
它的内容预览如下：
其中为了说明一个滑动冲突的问题，这里故意弄了个ScrollView，这时添加到MyScrollView中：
public class MainActivity extends Activity { // 图片资源ID 数组 private int[] ids = new int[] { R.drawable.a1, R.drawable.a2, R.drawable.a3, R.drawable.a4, R.drawable.a5, R.drawable.a6 }; private MyScrollView myscroll_view; private RadioGroup radioGroup; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); myscroll_view = (MyScrollView) findViewById(R.id.myscroll_view); radioGroup = (RadioGroup) findViewById(R.id.radioGroup); for (int i = 0; i < ids.length; i++) { ImageView image = new ImageView(this); image.setBackgroundResource(ids[i]); myscroll_view.addView(image); } myscroll_view.setPageChangedListener(new MyPageChangedListener() { @Override public void moveToDest(int currid) { ((RadioButton) radioGroup.getChildAt(currid)).setChecked(true); } }); radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { myscroll_view.moveToDest(checkedId); } }); // 给自定义viewGroup添加测试的布局 View temp = getLayoutInflater().inflate(R.layout.temp, null); myscroll_view.addView(temp, 2); for (int i = 0; i < myscroll_view.getChildCount(); i++) { //添加radioButton RadioButton rbtn = new RadioButton(this); rbtn.setId(i); radioGroup.addView(rbtn); if(i == 0){ rbtn.setChecked(true); } } } }
这时看下效果：
发现其中添加的内容只看到了一个背景，里面的内容为什么没有显示出来呢？这是由于里面的内容没有计算大小，所以这里涉及到ViewGroup的另外一个重要方法：onMeasure()，这个方法在自定义View中有接触过，具体写法如下：
这里再看下我们添加的ViewGroup内容有没有显示出来：
这是为啥呢？实际上ViewGroup不单只是测量自己的大小，还得测量它子View的大小：
但是为啥没添加ViewGroup之前，添加的几个ImageView却能正常显示呢？ViewGroup也没有重写onMeasure方法呀，原因是由于在onLayout中强行指定了位置：
说到这两个方法，需要谈一下view.getMeasuredWidth()和view.getWidth()了：
说到view.getWidth()方法，在实际开发中可能经常会碰到在onCreate()去获得View.getWdith()=0的情况，原因就是如此，因为该view还没有执行onLayout方法确定位置，通过查看这个方法的源码也很容易理解：
另外还需解释一下onMeasure方法中的参数:
只拿widhMeasureSpec来进行说明，由于这是一个整型，总共有32位，而在测量时这个数值肯定是用不完的，所以android工程师将这个数表示了多层函义：
而上面这个规则则就是在super.onMeasure来指定的，看源码如下：
而这时看下MeasureSpec.getSize()和MeasureSpec.getMode的源码实现，就是位操作：
现在添加的ViewGroup内容正常的显示出来了，但是还存在一个问题：
其中用ScrollView包裹的内容上下可以滑动，但是左右没法切换，这就是ScrollView与触摸事件冲突的问题了，这个在实际开发中也是经常会碰到的，接下来解决它：
对于触摸事件我们已经用了onTouchEvent()，接下来先重写另外一个相关的事件：
这时将它返回值改为true:
这时直观看一下这时的效果：
这时发现新添加的ViewGroup不支持上下滑动了，而且界面中的Button也不响应点击事件了，这里就涉及到Android的事件传递机制了，理解好它也就很容易的解决滑动冲突问题了，如下图：
这时如果点击Button，它的整个事件传递机制会是如下：
a、首先ViewGroup A先收到这个事件，然后遍历它里面的子View，也就是ViewGroup B、ViewGroup C；
b、接着判断当前的触摸的区域是在B上面还是在C上面，经过判断是在C上面，接着把事件交给ViewGroup C进行处理；
c、同理，ViewGroup C里面也有两个孩子，也就是ViewGroup D、ViewGroup E，最终把事件会交给ViewGroup D处理；
d、最终事件会到达Button，然后由它消费掉;
以上是一个大致的事件传递机制，关于这些网上有大量的文章进行介绍，下面用一张图对其进行描述：
而默认情况下是会一级级往下传递事件，但是事件是可以中断掉的，也就是onInterceptTouchEvent()这个方法，传不传给下一个由它来决定，上面当它返回true的时候，则自定义的ViewGroup就收不到事件了，所以里面的按钮，ScrollView的滑动事件都无法响应了；而如果返回false，则事件会一级级传递下去，最终会传递到自定义的ViewGroup，这时就不会响应MyScrollView的触摸事件了，所以就造成了可以上下滑，而不能左右滑了。用一个图来将事件的传递机制描述一下：
理解了事件传递机制之后，解决ScrollView的滑动冲突就比较简单了，如果检测当前的手势是上下滑的，则不拦截事件，由本身ViewGroup来处理；如果是左右滑动时，则拦截事件，由我们自己的MyScrollView来处理事件，具体代码如下：
运行看下效果：
这样就成功的解决了滑动冲突，但是目前程序还存在一个BUG，就是滑动的时候会跳动：
这是为什么呢？这个BUG隐藏的很深，先来打LOG来分析一下：
/** * 是否中断事件的传递 * 返回true的时候中断事件,执行自己的onTouchEvent方法 * 返回false的时候,默认处理,不中断,也不会执行自己的onTouchEvent方法 */ @Override public boolean onInterceptTouchEvent(MotionEvent ev) { boolean result = false; switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: Log.d("cexo", "onInterceptTouchEvent ACTION_DOWN"); firstX = (int) ev.getX(); firstY = (int) ev.getY(); break; case MotionEvent.ACTION_MOVE: Log.d("cexo", "onInterceptTouchEvent ACTION_MOVE"); // 手指在屏幕上水平移的绝对值 int disX = (int) Math.abs(ev.getX() - firstX); // 手指在屏幕上竖直移的绝对值 int disY = (int) Math.abs(ev.getY() - firstY); if (disX > disY && disX > 10)// disX > 10是为了防止手指抖动,需要满足一定距离才可以 result = true; else result = false; break; case MotionEvent.ACTION_UP: Log.d("cexo", "onInterceptTouchEvent ACTION_UP"); break; } return result; } @Override public boolean onTouchEvent(MotionEvent event) { super.onTouchEvent(event); detector.onTouchEvent(event);// 将手势的识别交由google的工具类完成了 // 添加自己的事件解析 switch (event.getAction()) { case MotionEvent.ACTION_DOWN: Log.d("cexo", "onTouchEvent ACTION_DOWN"); firstX = (int) event.getX(); break; case MotionEvent.ACTION_MOVE: Log.d("cexo", "onTouchEvent ACTION_MOVE"); break; case MotionEvent.ACTION_UP: Log.d("cexo", "onTouchEvent ACTION_UP"); if (!isFling) {// 在没有发生快速滑动的时候，才执行按位置判断currid int nextId = 0; if (event.getX() - firstX > getWidth() / 2) { // 手指向右滑动，超过屏幕的1/2 // 当前的currid - 1 nextId = currId - 1; } else if (firstX - event.getX() > getWidth() / 2) { // 手指向左滑动，超过屏幕的1/2 // 当前的currid // + 1 nextId = currId + 1; } else { nextId = currId; } moveToDest(nextId); } isFling = false; break; } return true; }
运行看日志：
这样肯定在滑动监听时就会出现逻辑问题，如下：
所以解决这个BUG的代码如下：
再编译运行：
至此，这里就一步步实现了跟ViewPager类似的效果，里面涉及到的知识点还不少，需好好消化，自定义控件，下次继续走起~~
