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>   

<linearlayout android android:layout_height="fill_parent"
android:layout_width="fill_parent" 
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"> 

<viewflipper 
androidandroid:id="@+id/flipper"
android:layout_below="@+id/CockpitLayout"
android:layout_height="fill_parent" 
android:layout_width="fill_parent">

<include android:id="@+id/firstlayout" layout="@layout/first">
<include android:id="@+id/secondlayout" layout="@layout/second"> 
<include android:id="@+id/thirdlayout" layout="@layout/third"> 
<include android:id="@+id/fourthlayout" layout="@layout/fourth"> 
</include>

</include>

</include>

</include>

</viewflipper> 

</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>  

<linearlayout 
androidandroid:gravity="center_vertical"
android:layout_height="fill_parent" 
android:layout_width="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"> 

<imageview 
androidandroid:layout_height="wrap_content"
android:layout_width="wrap_content" 
android:src="@drawable/v1"> 
</imageview>

</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. }