Android中實現滑動翻頁—使用ViewFlipper

有一些場景，我們需要向用戶展示一系列的頁面。比如我們正在開發一個看漫畫的應用，可能就需要向用戶展示一張一張的漫畫圖片，用戶使用手指滑動屏幕，可以在前一幅漫畫和後一幅漫畫之間切換。這個時候ViewFlipper就是一個很好的選擇。

1）View切換的控件—ViewFlipper介紹

ViewFilpper類繼承於ViewAnimator類。而ViewAnimator類繼承於FrameLayout。

查看ViewAnimator類的源碼可以看出此類的作用主要是為其中的View切換提供動畫效果。該類有如下幾個和動畫相關的方法。

setInAnimation：設置View進入屏幕時候使用的動畫。該方法有兩個重載方法，即可以直接傳入Animation對象，也可以傳入定義的Animation文件的resourceID。

setOutAnimation：設置View退出屏幕時候使用的動畫。使用方法和setInAnimation方法一樣。

showNext：調用該方法可以顯示FrameLayout裡面的下一個View。

showPrevious：調用該方法可以來顯示FrameLayout裡面的上一個View。

查看ViewFlipper的源碼可以看到，ViewFlipper主要用來實現View的自動切換。該類提供了如下幾個主要的方法。

setFilpInterval：設置View切換的時間間隔。參數為毫秒。

startFlipping：開始進行View的切換，時間間隔是上述方法設置的間隔數。切換會循環進行。

stopFlipping：停止View切換。

setAutoStart：設置是否自動開始。如果設置為“true”，當ViewFlipper顯示的時候View的切換會自動開始。

一般情況下，我們都會使用ViewFilpper類實現View的切換，而不使用它的父類ViewAnimator類。

2）實現滑動—GestureDetector介紹

如果想要實現滑動翻頁的效果，就要了解另外一個類：Android.view.GestureDetector類。GestureDetector類中可以用來檢測各種手勢事件。該類有兩個回調接口，分別用來通知具體的事件。

GestureDetector.OnDoubleTapListener：用來通知DoubleTap事件，類似於PC上面的鼠標的雙擊事件。

GestureDetector.OnGestureListener：用來通知普通的手勢事件，該接口有六個回調方法，具體的可以查看API。這裡想要實現滑動的判斷，就需要用到其中的onFling()方法。

3）具體的實現

下面的代碼片段詳細說明了如何實現滑動翻頁。

1. public class ViewFlipperActivity extends Activity implements OnGestureListener {
3. private static final int FLING_MIN_DISTANCE = 100;
4. private ViewFlipper flipper;
5. private GestureDetector detector;
7. @Override
8. protected void onCreate(Bundle savedInstanceState) {
9. super.onCreate(savedInstanceState);
10. setContentView(R.layout.viewflipper);
11. // 注冊一個GestureDetector
12. detector = new GestureDetector(this);
13. flipper = (ViewFlipper) findViewById(R.id.ViewFlipper);
14. ImageView image1 = new ImageView(this);
15. image1.setBackgroundResource(R.drawable.image1);
16. // 增加第一個view
17. flipper.addView(image1);
18. ImageView image2 = new ImageView(this);
19. image2.setBackgroundResource(R.drawable.image2);
20. // 增加第二個view
21. flipper.addView(image2);
22. }
24. @Override
25. public boolean onTouchEvent(MotionEvent event) {
26. // 將觸屏事件交給手勢識別類處理
27. return this.detector.onTouchEvent(event);
28. }
30. @Override
31. public boolean onDown(MotionEvent e) {
32. return false;
33. }
35. @Override
36. public void onShowPress(MotionEvent e) {
37. }
39. @Override
40. public boolean onSingleTapUp(MotionEvent e) {
41. return false;
42. }
44. @Override
45. public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
46. float distanceY) {
47. return false;
48. }
50. @Override
51. public void onLongPress(MotionEvent e) {
52. }
54. @Override
55. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
56. float velocityY) {
57. if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE) {
58. //設置View進入和退出的動畫效果
59. this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,
60. R.anim.left_in));
61. this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,
62. R.anim.left_out));
63. this.flipper.showNext();
64. return true;
65. }
66. if (e1.getX() - e2.getX() < -FLING_MIN_DISTANCE) {
67. this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,
68. R.anim.right_in));
69. this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,
70. R.anim.right_out));
71. this.flipper.showPrevious();
72. return true;
73. }
74. return false;
75. }
76. }

在這段代碼裡，創建了兩個IamgeView（用來顯示圖片），加入到了ViewFlipper中。程序運行後，當用手指在屏幕上向左滑動，會顯示前一個圖片，用手指在屏幕上向右滑動，會顯示下一個圖片。實現滑動切換的主要代碼都在onFling()方法中，用戶按下觸摸屏，快速移動後松開，就會觸發這個事件。在這段代碼示例中，對手指滑動的距離進行了計算，如果滑動距離大於100像素，就做切換動作，否則不做任何切換動作。

可以看到，onFling()方法有四個參數，e1和e2上面代碼用到了，比較好理解。參數velocityX和velocityY是做什麼用的呢？velocityX和velocityY實際上是X軸和Y軸上的移動速度，單位是像素/秒。結合這兩個參數，可以判斷滑動的速度，從而做更多的處理。

為了顯示出滑動的效果，這裡調用了ViewFlipper的setInAnimation()和setOutAnimation()方法設置了View進入和退出的動畫。對於動畫的使用，這裡不再贅述，也不再給出具體的XML文件代碼了。

另外，在上面的代碼基礎上說些額外的話題。

在Xml布局文件中，我們既可以設置像素px，也可以設置dp（或者dip）。

一般情況下，我們都會選擇使用dp，這樣可以保證不同屏幕分辨率的手機上布局一致。但是在代碼中，一般是無法直接使用dp的。

拿上面的代碼為例，代碼中定義了滑動的距離閥值為100像素。這就會導致不同分辨率的手機上效果有差別。比如在240X320的機型上，和在480X800的機型上，想要切換View，需要手指滑動的距離是不同的。所以，一般情況下，建議在代碼中，也不要用像素，也用dp。

那麼既然無法直接用dp，就需要從px轉換成dp了。其實px和dp之間是有公式可以相互轉換的。前面（http://www.linuxidc.com/Linux/2011-11/47896.htm）已經寫過了，可以直接參考。