前言

通過左右滑動屏幕來切換頁面，有4種方式：

(0) 使用ScrollLayout；

(1) 使用動畫；

(2) Activity 實現 OnTouchListener 和 OnGestureListener 接口；

(3) 使用 ViewPager；

本文將對上述各個方式逐一介紹。

(0)使用ScrollLayout

將scrolllayout 的布局方向設置為水平，當layout的水平尺寸大於手機屏幕時，即可實現左右滑動效果。有1款叫做 do it tomorrow 的應用，就是典型的代表。解壓後可以看到，其背景圖片其實是1張1280x960的圖片(如下圖)，隱藏滾動條，即有水平滑動的效果。

(1)使用動畫

這裏的動畫是指，使用Activity 中的 overridePendingTransition(,) 方法，具體能實現的動畫效果如下表：

我們以“右往左推出效果”為例，其中R.anim.slide_left 和 R.anim.slide_right 文件分別如下：

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

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%p"
4. android:duration="500" />
5. </set>

上述xml文件中，有3個值需要解釋：fromXDelta 是指頁面滑動的起點，toXDelta 是指頁面滑動的終點，duration 是指滑動耗時，單位為毫秒（1/1000 秒）。可以實現AnimLeftActivity 和 AnimRightActivity 之間的左右滑動。具體手機屏幕和 x 軸、y 軸的關系見下圖：

public class AnimLeftActivity extends Activity {

1. private Button btnStart = null;
3. @Override
4. public void onCreate(Bundle savedInstanceState) {
5. super.onCreate(savedInstanceState);
7. // 移除Title
8. requestWindowFeature(Window.FEATURE_NO_TITLE);
10. setContentView(R.layout.left_layout);
12. // 開始按鈕
13. btnStart = (Button) findViewById(R.id.btn_anim_left);
15. /**
16. * 開始測試按鈕 的監聽函數
17. *
18. * */
19. btnStart.setOnClickListener(new View.OnClickListener() {
21. public void onClick(View view) {
23. Intent i = new Intent(getApplicationContext(), AnimRightActivity.class);
24. startActivity(i);
26. // 設置切換動畫，從右邊進入，左邊退出
27. overridePendingTransition(R.anim.right_activity_enter_from_right, R.anim.left_activity_out_to_left);
29. finish();
30. }
31. );
32. }

1. public class AnimRightActivity extends Activity {
3. private Button btnStart = null;
5. public void onCreate(Bundle savedInstanceState) {
7. super.onCreate(savedInstanceState);
9. // 移除Title
10. requestWindowFeature(Window.FEATURE_NO_TITLE);
12. setContentView(R.layout.right_layout);
14. // 開始按鈕
15. btnStart = (Button) findViewById(R.id.btn_anim_right);
17. /**
18. * 開始測試按鈕 的監聽函數
19. *
20. * */
21. btnStart.setOnClickListener(new View.OnClickListener() {
23. public void onClick(View view) {
24. Intent i = new Intent(getApplicationContext(), AnimLeftActivity.class);
25. startActivity(i);
27. // 設置切換動畫，從右邊進入，左邊退出
28. overridePendingTransition(R.anim.left_activity_enter_from_left, R.anim.right_activity_out_to_left);
30. finish(); }
31. });
32. }
33. }

(2)Activity 實現 OnTouchListener 和 OnGestureListener 接口

1. public class GestureLeftActivity extends Activity implements OnTouchListener, OnGestureListener {
3. // 按鈕
4. private Button btnStart = null;
6. // 監聽左劃動作
7. private RelativeLayout rlLeft = null;
8. private GestureDetector gd = null;
10. // 最小的水平有效劃動距離和速度，超過該距離和速度才觸發劃動事件
11. private int slideMinDistance = 20;
12. private int slideMinVelocity = 0;
14. @Override
15. public void onCreate(Bundle savedInstanceState) {
16. super.onCreate(savedInstanceState);
18. // 移除Title
19. requestWindowFeature(Window.FEATURE_NO_TITLE);
21. setContentView(R.layout.left_layout);
23. btnStart = (Button) findViewById(R.id.btn_anim_left);
24. btnStart.setText("");
26. btnStart.setOnClickListener(new View.OnClickListener() {
28. public void onClick(View v) {
29. Toast.makeText(GestureLeftActivity.this, "請向左滑動", Toast.LENGTH_SHORT).show();
30. }
31. });
33. // 處理左劃事件
34. gd = new GestureDetector((OnGestureListener) this);
35. rlLeft = (RelativeLayout) findViewById(R.id.rl_left);
36. rlLeft.setOnTouchListener(this);
37. rlLeft.setLongClickable(true);
38. }
41. /**
42. * 滑動到手寫頁面
43. * @Title: slideToAnalyser
44. * @Description: TODO
45. * @param
46. * @return void
47. * @throws
48. */
49. private void slideToGestureRightActivity() {
50. Intent i = new Intent(getApplicationContext(), GestureRightActivity.class);
51. startActivity(i);
53. // 設置切換動畫，從右邊進入，左邊退出
54. overridePendingTransition(R.anim.right_activity_enter_from_right, R.anim.left_activity_out_to_left);
56. finish();
57. }
59. /*
60. * <p>Title: onDown</p>
61. * <p>Description: </p>
62. * @param arg0
63. * @return
64. * @see android.view.GestureDetector.OnGestureListener#onDown(android.view.MotionEvent)
65. */
66. public boolean onDown(MotionEvent arg0) {
68. // TODO Auto-generated method stub
69. return false;
70. }
73. /*
74. * <p>Title: onFling</p>
75. * <p>Description: </p>
76. * @param e1
77. * @param e2
78. * @param velocityX
79. * @param velocityY
80. * @return
81. * @see android.view.GestureDetector.OnGestureListener#onFling(android.view.MotionEvent, android.view.MotionEvent, float, float)
82. */
83. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
85. if (((e1.getX() - e2.getX()) > slideMinDistance) && Math.abs(velocityX) > slideMinVelocity) {
87. // 切換Activity
88. slideToGestureRightActivity();
89. Toast.makeText(this, "向左手勢", Toast.LENGTH_SHORT).show();
90. } else if (e2.getX() - e1.getX() > slideMinDistance && Math.abs(velocityX) > slideMinVelocity) {
92. // 切換Activity
93. // Intent intent = new Intent(ViewSnsActivity.this, UpdateStatusActivity.class);
94. // startActivity(intent);
95. Toast.makeText(this, "向右手勢", Toast.LENGTH_SHORT).show();
96. }
98. return false;
99. }
102. /*
103. * <p>Title: onLongPress</p>
104. * <p>Description: </p>
105. * @param e
106. * @see android.view.GestureDetector.OnGestureListener#onLongPress(android.view.MotionEvent)
107. */
110. public void onLongPress(MotionEvent e) {
112. // TODO Auto-generated method stub
114. }
117. /*
118. * <p>Title: onScroll</p>
119. * <p>Description: </p>
120. * @param e1
121. * @param e2
122. * @param distanceX
123. * @param distanceY
124. * @return
125. * @see android.view.GestureDetector.OnGestureListener#onScroll(android.view.MotionEvent, android.view.MotionEvent, float, float)
126. */
129. public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
131. // TODO Auto-generated method stub
132. return false;
133. }
136. /*
137. * <p>Title: onShowPress</p>
138. * <p>Description: </p>
139. * @param e
140. * @see android.view.GestureDetector.OnGestureListener#onShowPress(android.view.MotionEvent)
141. */
144. public void onShowPress(MotionEvent e) {
146. // TODO Auto-generated method stub
148. }
151. /*
152. * <p>Title: onSingleTapUp</p>
153. * <p>Description: </p>
154. * @param e
155. * @return
156. * @see android.view.GestureDetector.OnGestureListener#onSingleTapUp(android.view.MotionEvent)
157. */
160. public boolean onSingleTapUp(MotionEvent e) {
162. // TODO Auto-generated method stub
163. return false;
164. }
167. /*
168. * <p>Title: onTouch</p>
169. * <p>Description: </p>
170. * @param v
171. * @param event
172. * @return
173. * @see android.view.View.OnTouchListener#onTouch(android.view.View, android.view.MotionEvent)
174. */
177. public boolean onTouch(View v, MotionEvent event) {
179. // TODO Auto-generated method stub
180. return gd.onTouchEvent(event);
181. }
183. public boolean dispatchTouchEvent(MotionEvent ev) {
185. gd.onTouchEvent(ev);
187. // scroll.onTouchEvent(ev);
188. return super.dispatchTouchEvent(ev);
189. }
190. }

1. public class GestureRightActivity extends Activity implements OnTouchListener, OnGestureListener {
3. // 按鈕
4. private Button btnStart = null;
6. // 監聽左劃動作
7. private RelativeLayout rlRight = null;
8. private GestureDetector gd = null;
10. // 最小的水平有效劃動距離和速度，超過該距離和速度才觸發劃動事件
11. private int slideMinDistance = 20;
12. private int slideMinVelocity = 0;
14. @Override
15. public void onCreate(Bundle savedInstanceState) {
16. super.onCreate(savedInstanceState);
18. // 移除Title
19. requestWindowFeature(Window.FEATURE_NO_TITLE);
21. setContentView(R.layout.right_layout);
23. btnStart = (Button) findViewById(R.id.btn_anim_right);
24. btnStart.setText("");
26. btnStart.setOnClickListener(new View.OnClickListener() {
28. public void onClick(View v) {
29. Toast.makeText(GestureRightActivity.this, "請向右滑動", Toast.LENGTH_SHORT).show();
30. }
31. });
33. // 處理左劃事件
34. gd = new GestureDetector((OnGestureListener) this);
35. rlRight = (RelativeLayout) findViewById(R.id.rl_right);
36. rlRight.setOnTouchListener(this);
37. rlRight.setLongClickable(true);
38. }
41. /**
42. * 滑動到手寫頁面
43. * @Title: slideToAnalyser
44. * @Description: TODO
45. * @param
46. * @return void
47. * @throws
48. */
49. private void slideToGestureLeftActivity() {
50. Intent i = new Intent(getApplicationContext(), GestureLeftActivity.class);
51. startActivity(i);
53. // 設置切換動畫，從右邊進入，左邊退出
54. overridePendingTransition(R.anim.left_activity_enter_from_left, R.anim.right_activity_out_to_left);
56. finish();
57. }
59. /*
60. * <p>Title: onDown</p>
61. * <p>Description: </p>
62. * @param arg0
63. * @return
64. * @see android.view.GestureDetector.OnGestureListener#onDown(android.view.MotionEvent)
65. */
66. public boolean onDown(MotionEvent arg0) {
68. // TODO Auto-generated method stub
69. return false;
70. }
73. /*
74. * <p>Title: onFling</p>
75. * <p>Description: </p>
76. * @param e1
77. * @param e2
78. * @param velocityX
79. * @param velocityY
80. * @return
81. * @see android.view.GestureDetector.OnGestureListener#onFling(android.view.MotionEvent, android.view.MotionEvent, float, float)
82. */
83. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
85. if (((e1.getX() - e2.getX()) > slideMinDistance) && Math.abs(velocityX) > slideMinVelocity) {
86. Toast.makeText(this, "向左手勢", Toast.LENGTH_SHORT).show();
87. } else if (e2.getX() - e1.getX() > slideMinDistance && Math.abs(velocityX) > slideMinVelocity) {
89. // 切換Activity
90. slideToGestureLeftActivity();
91. Toast.makeText(this, "向右手勢", Toast.LENGTH_SHORT).show();
92. }
94. return false;
95. }
98. /*
99. * <p>Title: onLongPress</p>
100. * <p>Description: </p>
101. * @param e
102. * @see android.view.GestureDetector.OnGestureListener#onLongPress(android.view.MotionEvent)
103. */
106. public void onLongPress(MotionEvent e) {
108. // TODO Auto-generated method stub
110. }
113. /*
114. * <p>Title: onScroll</p>
115. * <p>Description: </p>
116. * @param e1
117. * @param e2
118. * @param distanceX
119. * @param distanceY
120. * @return
121. * @see android.view.GestureDetector.OnGestureListener#onScroll(android.view.MotionEvent, android.view.MotionEvent, float, float)
122. */
125. public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
127. // TODO Auto-generated method stub
128. return false;
129. }
132. /*
133. * <p>Title: onShowPress</p>
134. * <p>Description: </p>
135. * @param e
136. * @see android.view.GestureDetector.OnGestureListener#onShowPress(android.view.MotionEvent)
137. */
140. public void onShowPress(MotionEvent e) {
142. // TODO Auto-generated method stub
144. }
147. /*
148. * <p>Title: onSingleTapUp</p>
149. * <p>Description: </p>
150. * @param e
151. * @return
152. * @see android.view.GestureDetector.OnGestureListener#onSingleTapUp(android.view.MotionEvent)
153. */
156. public boolean onSingleTapUp(MotionEvent e) {
158. // TODO Auto-generated method stub
159. return false;
160. }
163. /*
164. * <p>Title: onTouch</p>
165. * <p>Description: </p>
166. * @param v
167. * @param event
168. * @return
169. * @see android.view.View.OnTouchListener#onTouch(android.view.View, android.view.MotionEvent)
170. */
173. public boolean onTouch(View v, MotionEvent event) {
175. // TODO Auto-generated method stub
176. return gd.onTouchEvent(event);
177. }
179. public boolean dispatchTouchEvent(MotionEvent ev) {
181. gd.onTouchEvent(ev);
183. // scroll.onTouchEvent(ev);
184. return super.dispatchTouchEvent(ev);
185. }
186. }

(3)使用 ViewPager

左右頁面滑動