Android手势识别ViewFlipper触摸动画

今天给大家介绍一下如何实现Android主页面的左右拖动效果。实现起来很简单，就是使用ViewFlipper来将您要来回拖动的View装在一起，然后与GestureDetector手势识别类来联动，确定要显示哪个View，加上一点点动画效果即可。比如当手指向左快速滑动时跳转到上一个View，手指向右快速滑动时跳转到下一个View，本例中使用图片作为各个View的页面，实现左右快速滑动显示不同的图片。 

Java代码：

Java代码  

1. <linearlayout android android:layout_height="fill_parent"  
2. android:layout_width="fill_parent"   
3. android:orientation="vertical"  
4. xmlns:android="http://schemas.android.com/apk/res/android">   
5.   
6. <viewflipper   
7. androidandroid:id="@+id/flipper"  
8. android:layout_below="@+id/CockpitLayout"  
9. android:layout_height="fill_parent"   
10. android:layout_width="fill_parent">  
11.   
12. <include android:id="@+id/firstlayout" layout="@layout/first">  
13. <include android:id="@+id/secondlayout" layout="@layout/second">   
14. <include android:id="@+id/thirdlayout" layout="@layout/third">   
15. <include android:id="@+id/fourthlayout" layout="@layout/fourth">   
16. </include>  
17.   
18. </include>  
19.   
20. </include>  
21.   
22. </include>  
23.   
24. </viewflipper>   
25.   
26. </linearlayout>   

                在ViewFlipper中放置多个layout（接下来会在不同的layout中来回滑动），ViewFlipper在同一个页面就显示其中一个layout。 

Java代码：

Java代码  

1. <linearlayout   
2. androidandroid:gravity="center_vertical"  
3. android:layout_height="fill_parent"   
4. android:layout_width="fill_parent"  
5. xmlns:android="http://schemas.android.com/apk/res/android">   
6.   
7. <imageview   
8. androidandroid:layout_height="wrap_content"  
9. android:layout_width="wrap_content"   
10. android:src="@drawable/v1">   
11. </imageview>  
12.   
13. </linearlayout>  

                接下来我们来看看 Activity，我们的 Activity需要实现两个接口 OnGestureListener,OnTouchListener。 

Java代码： 

Java代码  

1. import android.app.Activity;  
2. import android.os.Bundle;   
3. import android.view.GestureDetector;  
4. import android.view.MotionEvent;   
5. import android.view.View;   
6. import android.view.GestureDetector.OnGestureListener;   
7. import android.view.View.OnTouchListener;  
8. import android.view.animation.AccelerateInterpolator;  
9. import android.view.animation.Animation;  
10. import android.view.animation.TranslateAnimation;  
11. import android.widget.ViewFlipper;  
12.   
13. public class ViewFlipperDemo extends Activity implementsOnGestureListener,OnTouchListener{   
14. private ViewFlipper mFlipper;   
15. GestureDetector mGestureDetector;   
16. private int mCurrentLayoutState;   
17. private static final int FLING_MIN_DISTANCE = 100;   
18. private static final int FLING_MIN_VELOCITY = 200;   
19.   
20. @Override   
21. public void onCreate(Bundle savedInstanceState) {  
22.   
23. super.onCreate(savedInstanceState);   
24. setContentView(R.layout.main);   
25. mFlipper = (ViewFlipper) findViewById(R.id.flipper);   
26. //注册一个用于手势识别的类   
27. mGestureDetector = new GestureDetector(this);   
28. //给mFlipper设置一个listener   
29. mFlipper.setOnTouchListener(this);   
30. mCurrentLayoutState = 0; //允许长按住ViewFlipper,这样才能识别拖动等手势   
31. mFlipper.setLongClickable(true);   
32. }   
33.   
34. /** * 此方法在本例中未用到，可以指定跳转到某个页面 * @param switchTo */   
35. public void switchLayoutStateTo(int switchTo) {  
36.   
37. while (mCurrentLayoutState != switchTo) {  
38.   
39. if (mCurrentLayoutState > switchTo) {  
40.   
41. mCurrentLayoutState--;   
42. mFlipper.setInAnimation(inFromLeftAnimation());  
43. mFlipper.setOutAnimation(outToRightAnimation());   
44. mFlipper.showPrevious();   
45. }  
46.   
47. else {   
48. mCurrentLayoutState++;   
49. mFlipper.setInAnimation(inFromRightAnimation());  
50. mFlipper.setOutAnimation(outToLeftAnimation());   
51. mFlipper.showNext();   
52. }  
53. } ;  
54. }   
55. /** * 定义从右侧进入的动画效果 * @return */  
56. protected Animation inFromRightAnimation() {   
57. Animation inFromRight = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);  
58. inFromRight.setDuration(500);   
59. inFromRight.setInterpolator(new AccelerateInterpolator());   
60. return inFromRight;   
61. }   
62.   
63. /** * 定义从左侧退出的动画效果 * @return */   
64. protected Animation outToLeftAnimation() {   
65. Animation outtoLeft = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);   
66. outtoLeft.setDuration(500);   
67. outtoLeft.setInterpolator(new AccelerateInterpolator());   
68. return outtoLeft;   
69. }  
70.   
71. /** * 定义从左侧进入的动画效果 * @return */   
72. protected Animation inFromLeftAnimation() {   
73. Animation inFromLeft = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);   
74. inFromLeft.setDuration(500);  
75. inFromLeft.setInterpolator(new AccelerateInterpolator());   
76. return inFromLeft;   
77. }  
78.   
79. /** * 定义从右侧退出时的动画效果 * @return */   
80. protected Animation outToRightAnimation() {   
81.   
82. Animation outtoRight = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);   
83. outtoRight.setDuration(500);   
84. outtoRight.setInterpolator(new AccelerateInterpolator());   
85. return outtoRight;  
86. }   
87.   
88. public boolean onDown(MotionEvent e) {  
89.   
90. // TODO Auto-generated method stub return false;   
91. }  
92.   
93. /* * 用户按下触摸屏、快速移动后松开即触发这个事件 * e1：第1个ACTION_DOWN MotionEvent * e2：最后一个ACTION_MOVE MotionEvent * velocityX：X轴上的移动速度，像素/秒 * velocityY：Y轴上的移动速度，像素/秒 * 触发条件 ： * X轴的坐标位移大于FLING_MIN_DISTANCE，且移动速度大于FLING_MIN_VELOCITY个像素/秒 */  
94.   
95. public boolean onFling(MotionEvent e1, MotionEvent e2, floatvelocityX, float velocityY) {  
96.   
97. if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE && Math.abs(velocityX) > FLING_MIN_VELOCITY) {   
98.   
99. // 当像左侧滑动的时候   
100. //设置View进入屏幕时候使用的动画   
101. mFlipper.setInAnimation(inFromRightAnimation());   
102. //设置View退出屏幕时候使用的动画   
103. mFlipper.setOutAnimation(outToLeftAnimation());  
104. mFlipper.showNext();   
105. }   
106. else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE && Math.abs(velocityX) > FLING_MIN_VELOCITY) {   
107.   
108. // 当像右侧滑动的时候  
109. mFlipper.setInAnimation(inFromLeftAnimation());  
110. mFlipper.setOutAnimation(outToRightAnimation());   
111. mFlipper.showPrevious();   
112. }   
113. return false;   
114. }   
115.   
116. public void onLongPress(MotionEvent e) {  
117. // TODO Auto-generated method stub   
118. }   
119.   
120. public boolean onScroll(MotionEvent e1, MotionEvent e2, floatdistanceX, float distanceY) {  
121. return false;   
122. }  
123.   
124. public void onShowPress(MotionEvent e) {  
125. // TODO Auto-generated method stub   
126. }   
127.   
128. public boolean onSingleTapUp(MotionEvent e) {  
129. // TODO Auto-generated method stub return false;   
130. }   
131.   
132. public boolean onTouch(View v, MotionEvent event) {   
133. // 一定要将触屏事件交给手势识别类去处理（自己处理会很麻烦的）   
134. return mGestureDetector.onTouchEvent(event);   
135. }   
136. }