Android手势识别ViewFlipper触摸动画

2010-11-01 09:46 ideasandroid ideasandroid 我要评论(0) 字号： T | T 今天给大家介绍一下如何实现Android主页面的左右拖动效果。使用ViewFlipper来将您要来回拖动的View装在一起，然后与GestureDetector手势识别类来联动，确定要显示哪个View，加上一点点动画效果即可。 标签： View Android AD： 限时报名参加“甲骨文全球大会・2010・北京”及“JavaOne和甲骨文开发者大会2010”

  • 索 引
  • [显示]
我们曾介绍过“ 在Android开发中使用Gallery实现'多级联动'”和“ 在Android中实现service动态更新UI界面”。今天给大家介绍一下如何实现Android主页面的左右拖动效果。实现起来很简单，就是使用ViewFlipper来将您要来回拖动的View装在一起，然后与GestureDetector手势识别类来联动，确定要显示哪个View，加上一点点动画效果即可。比如当手指向左快速滑动时跳转到上一个View，手指向右快速滑动时跳转到下一个View，本例中使用图片作为各个View的页面，实现左右快速滑动显示不同的图片。
Android View 首先来看看我们的layout，如下所示： 
                    
                            
  1. <linearlayoutandroidandroid:layout_height="fill_parent"android:layout_width="fill_parent"android:orientation="vertical"xmlns:android="http://schemas.android.com/apk/res/android">
    2.                         
  2. <viewflipperandroidandroid:id="@+id/flipper"android:layout_below="@+id/CockpitLayout"android:layout_height="fill_parent"android:layout_width="fill_parent">
    3.                         
  3. <includeandroid:id="@+id/firstlayout"layout="@layout/first">
    4.                         
  4. <includeandroid:id="@+id/secondlayout"layout="@layout/second">
    5.                         
  5. <includeandroid:id="@+id/thirdlayout"layout="@layout/third">
    6.                         
  6. <includeandroid:id="@+id/fourthlayout"layout="@layout/fourth">
    7.                         
  7. </include></include></include></include></viewflipper>
    8.                         
  8. </linearlayout>
    9.                         
    10.
如上所示，在ViewFlipper中放置多个layout（接下来会在不同的layout中来回滑动），ViewFlipper在同一个页面就显示其中一个layout。 ViewFlipper中的四个layout很简单，我们就放置一张图片，如下所示： 
                    
                            
  1. <linearlayoutandroidandroid:gravity="center_vertical"android:layout_height="fill_parent"android:layout_width="fill_parent"xmlns:android="http://schemas.android.com/apk/res/android">
    2.                         
  2. <imageviewandroidandroid:layout_height="wrap_content"android:layout_width="wrap_content"android:src="@drawable/v1">
    3.                         
  3. </imageview></linearlayout>
    4.                         
    5.
接下来我们来看看Activity，我们的Activity需要实现两个接口OnGestureListener,OnTouchListener。具体的代码如下所示，代码中都有相应的注释，这里就不再详述。 
                    
                            
  1. packagecom.ideasandroid.demo; 
    2.                         
  2. importandroid.app.Activity; 
    3.                         
  3. importandroid.os.Bundle; 
    4.                         
  4. importandroid.view.GestureDetector; 
    5.                         
  5. importandroid.view.MotionEvent; 
    6.                         
  6. importandroid.view.View; 
    7.                         
  7. importandroid.view.GestureDetector.OnGestureListener; 
    8.                         
  8. importandroid.view.View.OnTouchListener; 
    9.                         
  9. importandroid.view.animation.AccelerateInterpolator; 
    10.                         
  10. importandroid.view.animation.Animation; 
    11.                         
  11. importandroid.view.animation.TranslateAnimation; 
    12.                         
  12. importandroid.widget.ViewFlipper; 
    13.                         
  13. publicclassViewFlipperDemoextendsActivityimplementsOnGestureListener,OnTouchListener{ 
    14.                         
  14. privateViewFlippermFlipper; 
    15.                         
  15. GestureDetectormGestureDetector; 
    16.                         
  16. privateintmCurrentLayoutState; 
    17.                         
  17. privatestaticfinalintFLING_MIN_DISTANCE=100; 
    18.                         
  18. privatestaticfinalintFLING_MIN_VELOCITY=200; 
    19.                         
  19.  
    20.                         
  20. @Override 
    21.                         
  21. publicvoidonCreate(BundlesavedInstanceState){ 
    22.                         
  22. super.onCreate(savedInstanceState); 
    23.                         
  23. setContentView(R.layout.main); 
    24.                         
  24. mFlipper=(ViewFlipper)findViewById(R.id.flipper); 
    25.                         
  25. //注册一个用于手势识别的类 
    26.                         
  26. mGestureDetector=newGestureDetector(this); 
    27.                         
  27. //给mFlipper设置一个listener 
    28.                         
  28. mFlipper.setOnTouchListener(this); 
    29.                         
  29. mCurrentLayoutState=0; 
    30.                         
  30. //允许长按住ViewFlipper,这样才能识别拖动等手势 
    31.                         
  31. mFlipper.setLongClickable(true); 
    32.                         
  32. } 
    33.                         
  33.  
    34.                         
  34. /** 
    35.                         
  35. *此方法在本例中未用到，可以指定跳转到某个页面 
    36.                         
  36. *@paramswitchTo 
    37.                         
  37. */ 
    38.                         
  38. publicvoidswitchLayoutStateTo(intswitchTo){ 
    39.                         
  39. while(mCurrentLayoutState!=switchTo){ 
    40.                         
  40. if(mCurrentLayoutState>switchTo){ 
    41.                         
  41. mCurrentLayoutState--; 
    42.                         
  42. mFlipper.setInAnimation(inFromLeftAnimation()); 
    43.                         
  43. mFlipper.setOutAnimation(outToRightAnimation()); 
    44.                         
  44. mFlipper.showPrevious(); 
    45.                         
  45. }else{ 
    46.                         
  46. mCurrentLayoutState++; 
    47.                         
  47. mFlipper.setInAnimation(inFromRightAnimation()); 
    48.                         
  48. mFlipper.setOutAnimation(outToLeftAnimation()); 
    49.                         
  49. mFlipper.showNext(); 
    50.                         
  50. } 
    51.                         
  51.  
    52.                         
  52. } 
    53.                         
  53. ; 
    54.                         
  54. } 
    55.                         
  55.  
    56.                         
  56. /** 
    57.                         
  57. *定义从右侧进入的动画效果 
    58.                         
  58. *@return 
    59.                         
  59. */ 
    60.                         
  60. protectedAnimationinFromRightAnimation(){ 
    61.                         
  61. AnimationinFromRight=newTranslateAnimation( 
    62.                         
  62. Animation.RELATIVE_TO_PARENT,+1.0f, 
    63.                         
  63. Animation.RELATIVE_TO_PARENT,0.0f, 
    64.                         
  64. Animation.RELATIVE_TO_PARENT,0.0f, 
    65.                         
  65. Animation.RELATIVE_TO_PARENT,0.0f); 
    66.                         
  66. inFromRight.setDuration(500); 
    67.                         
  67. inFromRight.setInterpolator(newAccelerateInterpolator()); 
    68.                         
  68. returninFromRight; 
    69.                         
  69. } 
    70.                         
  70.  
    71.                         
  71. /** 
    72.                         
  72. *定义从左侧退出的动画效果 
    73.                         
  73. *@return 
    74.                         
  74. */ 
    75.                         
  75. protectedAnimationoutToLeftAnimation(){ 
    76.                         
  76. AnimationouttoLeft=newTranslateAnimation( 
    77.                         
  77. Animation.RELATIVE_TO_PARENT,0.0f, 
    78.                         
  78. Animation.RELATIVE_TO_PARENT,-1.0f, 
    79.                         
  79. Animation.RELATIVE_TO_PARENT,0.0f, 
    80.                         
  80. Animation.RELATIVE_TO_PARENT,0.0f); 
    81.                         
  81. outtoLeft.setDuration(500); 
    82.                         
  82. outtoLeft.setInterpolator(newAccelerateInterpolator()); 
    83.                         
  83. returnouttoLeft; 
    84.                         
  84. } 
    85.                         
  85.  
    86.                         
  86. /** 
    87.                         
  87. *定义从左侧进入的动画效果 
    88.                         
  88. *@return 
    89.                         
  89. */ 
    90.                         
  90. protectedAnimationinFromLeftAnimation(){ 
    91.                         
  91. AnimationinFromLeft=newTranslateAnimation( 
    92.                         
  92. Animation.RELATIVE_TO_PARENT,-1.0f, 
    93.                         
  93. Animation.RELATIVE_TO_PARENT,0.0f, 
    94.                         
  94. Animation.RELATIVE_TO_PARENT,0.0f, 
    95.                         
  95. Animation.RELATIVE_TO_PARENT,0.0f); 
    96.                         
  96. inFromLeft.setDuration(500); 
    97.                         
  97. inFromLeft.setInterpolator(newAccelerateInterpolator()); 
    98.                         
  98. returninFromLeft; 
    99.                         
  99. } 
    100.                         
  100.  
    101.                         
  101. /** 
    102.                         
  102. *定义从右侧退出时的动画效果 
    103.                         
  103. *@return 
    104.                         
  104. */ 
    105.                         
  105. protectedAnimationoutToRightAnimation(){ 
    106.                         
  106. AnimationouttoRight=newTranslateAnimation( 
    107.                         
  107. Animation.RELATIVE_TO_PARENT,0.0f, 
    108.                         
  108. Animation.RELATIVE_TO_PARENT,+1.0f, 
    109.                         
  109. Animation.RELATIVE_TO_PARENT,0.0f, 
    110.                         
  110. Animation.RELATIVE_TO_PARENT,0.0f); 
    111.                         
  111. outtoRight.setDuration(500); 
    112.                         
  112. outtoRight.setInterpolator(newAccelerateInterpolator()); 
    113.                         
  113. returnouttoRight; 
    114.                         
  114. } 
    115.                         
  115.  
    116.                         
  116. publicbooleanonDown(MotionEvente){ 
    117.                         
  117. //TODOAuto-generatedmethodstub 
    118.                         
  118. returnfalse; 
    119.                         
  119. } 
    120.                         
  120.  
    121.                         
  121. /* 
    122.                         
  122. *用户按下触摸屏、快速移动后松开即触发这个事件 
    123.                         
  123. *e1：第1个ACTION_DOWNMotionEvent 
    124.                         
  124. *e2：最后一个ACTION_MOVEMotionEvent 
    125.                         
  125. *velocityX：X轴上的移动速度，像素/秒 
    126.                         
  126. *velocityY：Y轴上的移动速度，像素/秒 
    127.                         
  127. *触发条件： 
    128.                         
  128. *X轴的坐标位移大于FLING_MIN_DISTANCE，且移动速度大于FLING_MIN_VELOCITY个像素/秒 
    129.                         
  129. */ 
    130.                         
  130. publicbooleanonFling(MotionEvente1,MotionEvente2,floatvelocityX, 
    131.                         
  131. floatvelocityY){ 
    132.                         
  132. if(e1.getX()-e2.getX()>FLING_MIN_DISTANCE 
    133.                         
  133. &&Math.abs(velocityX)>FLING_MIN_VELOCITY){ 
    134.                         
  134. //当像左侧滑动的时候 
    135.                         
  135. //设置View进入屏幕时候使用的动画 
    136.                         
  136. mFlipper.setInAnimation(inFromRightAnimation()); 
    137.                         
  137. //设置View退出屏幕时候使用的动画 
    138.                         
  138. mFlipper.setOutAnimation(outToLeftAnimation()); 
    139.                         
  139. mFlipper.showNext(); 
    140.                         
  140. }elseif(e2.getX()-e1.getX()>FLING_MIN_DISTANCE 
    141.                         
  141. &&Math.abs(velocityX)>FLING_MIN_VELOCITY){ 
    142.                         
  142. //当像右侧滑动的时候 
    143.                         
  143. mFlipper.setInAnimation(inFromLeftAnimation()); 
    144.                         
  144. mFlipper.setOutAnimation(outToRightAnimation()); 
    145.                         
  145. mFlipper.showPrevious(); 
    146.                         
  146. } 
    147.                         
  147. returnfalse; 
    148.                         
  148. } 
    149.                         
  149.  
    150.                         
  150. publicvoidonLongPress(MotionEvente){ 
    151.                         
  151. //TODOAuto-generatedmethodstub 
    152.                         
  152.  
    153.                         
  153. } 
    154.                         
  154.  
    155.                         
  155. publicbooleanonScroll(MotionEvente1,MotionEvente2,floatdistanceX, 
    156.                         
  156. floatdistanceY){ 
    157.                         
  157. returnfalse; 
    158.                         
  158. } 
    159.                         
  159.  
    160.                         
  160. publicvoidonShowPress(MotionEvente){ 
    161.                         
  161. //TODOAuto-generatedmethodstub 
    162.                         
  162.  
    163.                         
  163. } 
    164.                         
  164.  
    165.                         
  165. publicbooleanonSingleTapUp(MotionEvente){ 
    166.                         
  166. //TODOAuto-generatedmethodstub 
    167.                         
  167. returnfalse; 
    168.                         
  168. } 
    169.                         
  169. publicbooleanonTouch(Viewv,MotionEventevent){ 
    170.                         
  170. //一定要将触屏事件交给手势识别类去处理（自己处理会很麻烦的） 
    171.                         
  171. returnmGestureDetector.onTouchEvent(event); 
    172.                         
  172. } 
    173.                         
  173. } 
    174.                         
    175.
希望本文对您有所帮助！ 【编辑推荐】
  1. 在Android开发中使用Gallery实现“多级联动”
  2. 在Android中实现service动态更新UI界面
  3. Android数据库事务浅析
  4. Android的UI设计与后台线程交互
  5. Android触屏textview及listview对比验证
【责任编辑： 立方 TEL：（010）68476606】
0人 了这篇文章
类别：未分类┆阅读( 0)┆评论( 0) ┆ 返回博主首页┆ 返回博客首页 上一篇 利用SSIS打造MySQL监控工具 下一篇 项目管理学习笔记四：立项管理

更多相关文章

  1. Android动画详细探究
  2. Android中使用ViewPager制作广告栏滚屏效果
  3. 利用百度词典API和Volley网络库开发的android词典应用
  4. Android之UI学习篇二：TextVeiw显示表情和跑马灯效果
  5. 代码讲解Android(安卓)Scroller、VelocityTracker
  6. 从零开始打造一个Android(安卓)3D立体旋转容器
  7. Android取消RecyclerView、ListView、ScrollView、HorizontalScr
  8. ListView的优化就这么多了
  9. Android(安卓)自定义阴影效果详解及实例

随机推荐

  1. Uber开源Marmaray：基于Hadoop的通用数据摄
  2. 贝叶斯之父Judea Pearl推荐：机器学习因果
  3. 日均万亿事件：Netflix怎么做实时流处理？
  4. 最有趣的机器学习可视化图集
  5. 暴力堆数据没用！NLP和语音技术突破难在哪？
  6. DeepMind PotArt多任务深度强化学习获突
  7. 大数据凉了？No，流式计算浪潮才刚刚开始！
  8. 作为普通Ruby开发，我如何从零转型机器学习
  9. 一文看懂Pinterest如何构建时间序列数据
  10. 6大最常用的Java机器学习库一览