Android手势识别ViewFlipper触摸动画

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

Java代码：

Java代码

1. <linearlayoutandroidandroid:layout_height="fill_parent"
2. android:layout_width="fill_parent"
3. android:orientation="vertical"
4. xmlns:android="http://schemas.android.com/apk/res/android">
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">
12. <includeandroid:id="@+id/firstlayout"layout="@layout/first">
13. <includeandroid:id="@+id/secondlayout"layout="@layout/second">
14. <includeandroid:id="@+id/thirdlayout"layout="@layout/third">
15. <includeandroid:id="@+id/fourthlayout"layout="@layout/fourth">
16. </include>
18. </include>
20. </include>
22. </include>
24. </viewflipper>
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">
7. <imageview
8. androidandroid:layout_height="wrap_content"
9. android:layout_width="wrap_content"
10. android:src="@drawable/v1">
11. </imageview>
13. </linearlayout>

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

Java代码：

Java代码

1. importandroid.app.Activity;
2. importandroid.os.Bundle;
3. importandroid.view.GestureDetector;
4. importandroid.view.MotionEvent;
5. importandroid.view.View;
6. importandroid.view.GestureDetector.OnGestureListener;
7. importandroid.view.View.OnTouchListener;
8. importandroid.view.animation.AccelerateInterpolator;
9. importandroid.view.animation.Animation;
10. importandroid.view.animation.TranslateAnimation;
11. importandroid.widget.ViewFlipper;
13. publicclassViewFlipperDemoextendsActivityimplementsOnGestureListener,OnTouchListener{
14. privateViewFlippermFlipper;
15. GestureDetectormGestureDetector;
16. privateintmCurrentLayoutState;
17. privatestaticfinalintFLING_MIN_DISTANCE=100;
18. privatestaticfinalintFLING_MIN_VELOCITY=200;
20. @Override
21. publicvoidonCreate(BundlesavedInstanceState){
23. super.onCreate(savedInstanceState);
24. setContentView(R.layout.main);
25. mFlipper=(ViewFlipper)findViewById(R.id.flipper);
26. //注册一个用于手势识别的类
27. mGestureDetector=newGestureDetector(this);
28. //给mFlipper设置一个listener
29. mFlipper.setOnTouchListener(this);
30. mCurrentLayoutState=0;//允许长按住ViewFlipper,这样才能识别拖动等手势
31. mFlipper.setLongClickable(true);
32. }
34. /***此方法在本例中未用到，可以指定跳转到某个页面*@paramswitchTo*/
35. publicvoidswitchLayoutStateTo(intswitchTo){
37. while(mCurrentLayoutState!=switchTo){
39. if(mCurrentLayoutState>switchTo){
41. mCurrentLayoutState--;
42. mFlipper.setInAnimation(inFromLeftAnimation());
43. mFlipper.setOutAnimation(outToRightAnimation());
44. mFlipper.showPrevious();
45. }
47. else{
48. mCurrentLayoutState++;
49. mFlipper.setInAnimation(inFromRightAnimation());
50. mFlipper.setOutAnimation(outToLeftAnimation());
51. mFlipper.showNext();
52. }
53. };
54. }
55. /***定义从右侧进入的动画效果*@return*/
56. protectedAnimationinFromRightAnimation(){
57. AnimationinFromRight=newTranslateAnimation(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(newAccelerateInterpolator());
60. returninFromRight;
61. }
63. /***定义从左侧退出的动画效果*@return*/
64. protectedAnimationoutToLeftAnimation(){
65. AnimationouttoLeft=newTranslateAnimation(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(newAccelerateInterpolator());
68. returnouttoLeft;
69. }
71. /***定义从左侧进入的动画效果*@return*/
72. protectedAnimationinFromLeftAnimation(){
73. AnimationinFromLeft=newTranslateAnimation(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(newAccelerateInterpolator());
76. returninFromLeft;
77. }
79. /***定义从右侧退出时的动画效果*@return*/
80. protectedAnimationoutToRightAnimation(){
82. AnimationouttoRight=newTranslateAnimation(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(newAccelerateInterpolator());
85. returnouttoRight;
86. }
88. publicbooleanonDown(MotionEvente){
90. //TODOAuto-generatedmethodstubreturnfalse;
91. }
93. /**用户按下触摸屏、快速移动后松开即触发这个事件*e1：第1个ACTION_DOWNMotionEvent*e2：最后一个ACTION_MOVEMotionEvent*velocityX：X轴上的移动速度，像素/秒*velocityY：Y轴上的移动速度，像素/秒*触发条件：*X轴的坐标位移大于FLING_MIN_DISTANCE，且移动速度大于FLING_MIN_VELOCITY个像素/秒*/
95. publicbooleanonFling(MotionEvente1,MotionEvente2,floatvelocityX,floatvelocityY){
97. if(e1.getX()-e2.getX()>FLING_MIN_DISTANCE&&Math.abs(velocityX)>FLING_MIN_VELOCITY){
99. //当像左侧滑动的时候
100. //设置View进入屏幕时候使用的动画
101. mFlipper.setInAnimation(inFromRightAnimation());
102. //设置View退出屏幕时候使用的动画
103. mFlipper.setOutAnimation(outToLeftAnimation());
104. mFlipper.showNext();
105. }
106. elseif(e2.getX()-e1.getX()>FLING_MIN_DISTANCE&&Math.abs(velocityX)>FLING_MIN_VELOCITY){
108. //当像右侧滑动的时候
109. mFlipper.setInAnimation(inFromLeftAnimation());
110. mFlipper.setOutAnimation(outToRightAnimation());
111. mFlipper.showPrevious();
112. }
113. returnfalse;
114. }
116. publicvoidonLongPress(MotionEvente){
117. //TODOAuto-generatedmethodstub
118. }
120. publicbooleanonScroll(MotionEvente1,MotionEvente2,floatdistanceX,floatdistanceY){
121. returnfalse;
122. }
124. publicvoidonShowPress(MotionEvente){
125. //TODOAuto-generatedmethodstub
126. }
128. publicbooleanonSingleTapUp(MotionEvente){
129. //TODOAuto-generatedmethodstubreturnfalse;
130. }
132. publicbooleanonTouch(Viewv,MotionEventevent){
133. //一定要将触屏事件交给手势识别类去处理（自己处理会很麻烦的）
134. returnmGestureDetector.onTouchEvent(event);
135. }
136. }