Android学习笔记之滑动翻页（屏幕切换）

时间：2023-03-08 20:42:33
Android学习笔记之滑动翻页（屏幕切换）

如何实现手机上手动滑动翻页效果呢？呵呵，在这里我们就给你们介绍一下吧。

一般实现这个特效会用到一个控件：ViewFlipper

<1>View切换的控件—ViewFlipper

这个控件是什么呢？请注意观看博文Android学习笔记之ViewFilpper 。

除了这个ViewFlipper，我们还需要了解一下ViewAnimator。它主要是为其中的View切换提供动画效果。

还会用到几个方法：

setInAnimation：设置View进入屏幕时候使用的动画。该方法有两个重载方法，即可以直接传入Animation对象，也可以传入定义的Animation文件的resourceID。

setOutAnimation：设置View退出屏幕时候使用的动画。使用方法和setInAnimation方法一样。

showNext：调用该方法可以显示FrameLayout里面的下一个View。

showPrevious：调用该方法可以来显示FrameLayout里面的上一个View。

以及它的属性：

属性名称

描述

Android:inAnimation

（译者注：设置View进入屏幕时候使用的动画）

android:outAnimation

（译者注：设置View离开屏幕时候使用的动画）

第一个属性对应着第一个方法，第二个属性对应第二个方法。

<2>实现滑动

实现滑动就必须介绍一下GestureDetector：

GestureDetector类中可以用来检测各种手势事件。

该类有两个回调接口，分别用来通知具体的事件。

GestureDetector.OnDoubleTapListener：用来通知DoubleTap事件，类似于鼠标的双击事件，该接口有如下三个回调函数：
1.   onDoubleTap(MotionEvent e)：通知DoubleTap手势，
2.   onDoubleTapEvent(MotionEvent e)：通知DoubleTap手势中的事件，包含down、up和move事件（这里指的是在双击之间发生的事件，例如在同一个地方双击会产生DoubleTap手势，而在DoubleTap手势里面还会发生down和up事件，这两个事件由该函数通知）；
3.   onSingleTapConfirmed(MotionEvent e)：用来判定该次点击是SingleTap而不是DoubleTap，如果连续点击两次就是DoubleTap手势，如果只点击一次，系统等待一段时间后没有收到第二次点击则判定该次点击为SingleTap而不是DoubleTap，然后触发SingleTapConfirmed事件。
GestureDetector.OnGestureListener：用来通知普通的手势事件，该接口有如下六个回调函数：
1.   onDown(MotionEvent e)：down事件；
2.   onSingleTapUp(MotionEvent e)：一次点击up事件；
3.   onShowPress(MotionEvent e)：down事件发生而move或则up还没发生前触发该事件；
4.   onLongPress(MotionEvent e)：长按事件；
5.   onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)：滑动手势事件；
6.   onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)：在屏幕上拖动事件。
本次仅用到了OnGestureListener类中的onFling方法。  其他手势事件各位可以自己回去试验。
  1. public boolean onDown(MotionEvent arg0)
  2. {
  3. return false;
  4. }
  5. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
  6. float velocityY)
  7. {
  8. return false;
  9. }
  10. public void onLongPress(MotionEvent e)
  11. {
  12. }
  13. public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
  14. float distanceY)
  15. {
  16. return false;
  17. }
  18. public void onShowPress(MotionEvent e)
  19. {
  20. }
  21. public boolean onSingleTapUp(MotionEvent e)
  22. {
  23. return false;
  24. }

要实现屏幕切换的话，首先需要定义一个GestureDetector：

private GestureDetector mGestureDetector;
并在onCreate函数中初始化：
mGestureDetector = new GestureDetector(this);
同时Activity要继承OnGestureListener接口，并实现其中的onFling方法。
另外Activity的onTouchEvent事件也要实现！！
另外本例View切换时还有动画效果。使用Animation类实现，相关的函数：
  • setInAnimation：设置View进入屏幕时候使用的动画，该函数有两个版本:
一个接受单个参数，类型为android.view.animation.Animation；
一个接受两个参数，类型为Context和int，分别为Context对象和定义Animation的resourceID。
  • setOutAnimation: 设置View退出屏幕时候使用的动画，参数setInAnimation函数一样。
  • showNext： 调用该函数来显示FrameLayout里面的下一个View。
  • showPrevious： 调用该函数来显示FrameLayout里面的上一个View。

<4>范例

  1. package xiaosi.ViewFlipper;
  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.view.GestureDetector;
  5. import android.view.GestureDetector.OnGestureListener;
  6. import android.view.MotionEvent;
  7. import android.view.ViewGroup.LayoutParams;
  8. import android.view.animation.AnimationUtils;
  9. import android.widget.ImageView;
  10. import android.widget.ViewFlipper;
  11. public class ViewFlipperActivity extends Activity implements OnGestureListener
  12. {
  13. /** Called when the activity is first created. */
  14. private int[] imageID = { R.drawable.a, R.drawable.b, R.drawable.c,
  15. R.drawable.d, R.drawable.e, R.drawable.f, R.drawable.g,
  16. R.drawable.h };
  17. private ViewFlipper viewFlipper = null;
  18. private GestureDetector gestureDetector = null;
  19. @Override
  20. public void onCreate(Bundle savedInstanceState)
  21. {
  22. super.onCreate(savedInstanceState);
  23. setContentView(R.layout.main);
  24. viewFlipper = (ViewFlipper) findViewById(R.id.viewflipper);
  25. // 生成GestureDetector对象，用于检测手势事件
  26. gestureDetector = new GestureDetector(this);
  27. // 添加用于切换的图片
  28. for (int i = 0; i < imageID.length; i++)
  29. {
  30. // 定义一个ImageView对象
  31. ImageView image = new ImageView(this);
  32. image.setImageResource(imageID[i]);
  33. // 充满父控件
  34. image.setScaleType(ImageView.ScaleType.FIT_XY);
  35. // 添加到viewFlipper中
  36. viewFlipper.addView(image, new LayoutParams(
  37. LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
  38. }
  39. }
  40. public boolean onDown(MotionEvent arg0)
  41. {
  42. return false;
  43. }
  44. public boolean onFling(MotionEvent arg0, MotionEvent arg1, float arg2,
  45. float arg3)
  46. {
  47. //对手指滑动的距离进行了计算，如果滑动距离大于120像素，就做切换动作，否则不做任何切换动作。
  48. // 从左向右滑动
  49. if (arg0.getX() - arg1.getX() > 120)
  50. {
  51. // 添加动画
  52. this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,
  53. R.anim.push_left_in));
  54. this.viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,
  55. R.anim.push_left_out));
  56. this.viewFlipper.showNext();
  57. return true;
  58. }// 从右向左滑动
  59. else if (arg0.getX() - arg1.getX() < -120)
  60. {
  61. this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,
  62. R.anim.push_right_in));
  63. this.viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,
  64. R.anim.push_right_out));
  65. this.viewFlipper.showPrevious();
  66. return true;
  67. }
  68. return true;
  69. }
  70. public void onLongPress(MotionEvent e)
  71. {}
  72. public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
  73. float distanceY)
  74. {
  75. return false;
  76. }
  77. public void onShowPress(MotionEvent e)
  78. {}
  79. public boolean onSingleTapUp(MotionEvent e)
  80. {
  81. return false;
  82. }
  83. @Override
  84. public boolean onTouchEvent(MotionEvent event)
  85. {
  86. return this.gestureDetector.onTouchEvent(event);
  87. }
  88. }

main.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. android:orientation="vertical" >
  6. <ViewFlipper
  7. android:id="@+id/viewflipper"
  8. android:layout_width="fill_parent"
  9. android:layout_height="fill_parent"/>
  10. </LinearLayout>

在res目录下创建动画文件：

Android学习笔记之滑动翻页（屏幕切换）

push_left_in.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3. <translate android:fromXDelta="100%p" android:toXDelta="0"
  4. android:duration="500" />
  5. <alpha android:fromAlpha="0.1" android:toAlpha="1.0"
  6. android:duration="500" />
  7. </set>

push_left_out.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3. <translate android:fromXDelta="0" android:toXDelta="-100%p"
  4. android:duration="500" />
  5. <alpha android:fromAlpha="1.0" android:toAlpha="0.1"
  6. android:duration="500" />
  7. </set>

push_right_in.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3. <translate android:fromXDelta="-100%p" android:toXDelta="0"
  4. android:duration="500" />
  5. <alpha android:fromAlpha="0.1" android:toAlpha="1.0"
  6. android:duration="500" />
  7. </set>

push_right_out.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3. <translate android:fromXDelta="0" android:toXDelta="100%p"
  4. android:duration="500" />
  5. <alpha android:fromAlpha="1.0" android:toAlpha="0.1"
  6. android:duration="500" />
  7. </set>

Android学习笔记之滑动翻页（屏幕切换）Android学习笔记之滑动翻页（屏幕切换）

Android学习笔记之滑动翻页（屏幕切换）

在这段代码里，创建了多个IamgeView（用来显示图片），用一个for循环来添加到了ViewFlipper中。程序运行后，当用手指在屏幕上向左滑动，会显示下一个图片，用手指在屏幕上向右滑动，会显示前一个图片。实现滑动切换的主要代码都在onFling()方法中，用户按下触摸屏，快速移动后松开，就会触发这个事件。在这段代码示例中，对手指滑动的距离进行了计算，如果滑动距离大于120像素，就做切换动作，否则不做任何切换动作。

可以看到，onFling()方法有四个参数，arg0和arg1上面代码用到了，比较好理解。参数arg3和arg4是做什么用的呢？arg3和arg4实际上是X轴和Y轴上的移动速度，单位是像素/秒。结合这两个参数，可以判断滑动的速度，从而做更多的处理。

为了显示出滑动的效果，这里调用了ViewFlipper的setInAnimation()和setOutAnimation()方法设置了View进入和退出的动画。

源代码下载（完整工程）：点击打开链接