ndroid 滑动效果入门篇(一)—— ViewFlipper
ViewFilpper 是Android官方提供的一个View容器类,继承于ViewAnimator类,用于实现页面切换,也可以设定时间间隔,让它自动播放。
又ViewAnimator继承至于FrameLayout的,所以ViewFilpper的Layout里面可以放置多个View,继承关系如下:
本示例通过ViewFlipper和GestureDetector.OnGestureListener实现自动播放和手势滑屏事件 ,先看效果:
Activity
1. import
2. import
3. import
4. import
5. import
6. import
7. import
8. import
9. import
10.
11. public class ViewFlipperActivity extends Activity implements
12. private int
13. R.drawable.img3, R.drawable.img4, R.drawable.img5 };
14.
15. private GestureDetector gestureDetector = null
16. private ViewFlipper viewFlipper = null
17.
18. private Activity mActivity = null
19.
20. @Override
21. public void
22. super
23. setContentView(R.layout.main);
24.
25. this
26.
27. viewFlipper = (ViewFlipper) findViewById(R.id.viewflipper);
28. new GestureDetector( this ); // 声明检测手势事件
29.
30. for ( int i = 0 ; i < imgs.length; i++) { // 添加图片源
31. new ImageView( this
32. iv.setImageResource(imgs[i]);
33. iv.setScaleType(ImageView.ScaleType.FIT_XY);
34. new
35. }
36.
37. true ); // 设置自动播放功能(点击事件,前自动播放)
38. 3000
39. if
40. viewFlipper.startFlipping();
41. }
42. }
43.
44. @Override
45. public boolean
46. // 点击事件后,停止自动播放
47. false
48. return gestureDetector.onTouchEvent(event); // 注册手势事件
49. }
50.
51. @Override
52. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float
53. if (e2.getX() - e1.getX() > 120 ) { // 从左向右滑动(左进右出)
54. // 向右滑动左侧进入的渐变效果(alpha 0.1 -> 1.0)
55. // 向右滑动右侧滑出的渐变效果(alpha 1.0 -> 0.1)
56.
57. viewFlipper.setInAnimation(rInAnim);
58. viewFlipper.setOutAnimation(rOutAnim);
59. viewFlipper.showPrevious();
60. return true
61. else if (e2.getX() - e1.getX() < - 120 ) { // 从右向左滑动(右进左出)
62. // 向左滑动左侧进入的渐变效果(alpha 0.1 -> 1.0)
63. // 向左滑动右侧滑出的渐变效果(alpha 1.0 -> 0.1)
64.
65. viewFlipper.setInAnimation(lInAnim);
66. viewFlipper.setOutAnimation(lOutAnim);
67. viewFlipper.showNext();
68. return true
69. }
70. return true
71. }
72.
73. @Override
74. public boolean
75. return false
76. }
77.
78. @Override
79. public void
80. }
81.
82. @Override
83. public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float
84. return false
85. }
86.
87. @Override
88. public void
89. }
90.
91. @Override
92. public boolean
93. return false
94. }
95. }
main.xml
1. <? xml version = "1.0" encoding = "utf-8" ?>
2. < LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
3. android:layout_width = "fill_parent"
4. android:layout_height = "fill_parent"
5. android:orientation = "vertical" >
6.
7. < ViewFlipper
8. android:id = "@+id/viewflipper"
9. android:layout_width = "fill_parent"
10. android:layout_height = "fill_parent" />
11.
12. </ LinearLayout >
示例分析
一、自动播放
ViewFlipper控件,是ImageView的容器,用于添加显示的图片资源,主要功能有两个:添加显示View和自动播放View
通过实现父类android.view.ViewGroup的addView(View child, ViewGroup.LayoutParams params)
启动自动播放View ,可以通过设置如下三个成员函数实现:
1、 setAutoStart(true),设置是否自动播放功能,true为自动播放,false为不自动播放,开启自动播放设为true
2、 setFlipInterval(int milliseconds),设置View播放的时间间隔,如3000(3秒)
3、 startFlipping(),开始自动播放
停止自动播放View ,设置成员函数如下:
1、 stopFlipping(),停止自动播放
2、 setAutoStart(false),停止自动播放,设为false
二、手势滑屏
手势滑动屏幕动画,是通过android.view.GestureDetector类检测各种手势事件实现的,该类有两个回调接口(Interface)
A、GestureDetector.OnDoubleTapListener ,用来通知DoubleTap双击事件,类似于鼠标的双击事件,接口三个抽象回调函数如下
1、onDoubleTap(MotionEvent e)
2、onDoubleTapEvent(MotionEvent e)
3、onSingleTapConfirmed(MotionEvent e)
B、GestureDetector.OnGestureListener ,用来通知普通的手势事件(down、longPress、scroll、up等),接口具体的六个抽象回调函数如下
1、onDown(MotionEvent e):down事件,表示按下事件
2、onSingleTapUp(MotionEvent e):一次点击up事件,表示按下后的抬起事件
3、onShowPress(MotionEvent e):down事件发生而move或则up还没发生前触发该事件,此事件一般用于通知用户press按击事件已发生
4、onLongPress(MotionEvent e):长按事件,down事件后up事件前的一段时间间隔后(由系统分配,也可自定义),如果仍然按住屏幕则视为长按事件
5、onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY):滑动手势事件,例如scroll事件后突然up,fling的速度大小由e每秒x和y改变大小决定
6、onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY):在屏幕上拖动事件,即down按下点——scroll拖动——up抬起点的move移动事件
本示例的滑动屏幕动画,仅用到了上面的GestureDetector.OnGestureListener 及其onFling
1、Activity实现android.view.GestureDetector.OnGestureListener 监听接口,并声明gestureDetector = new GestureDetector(this); 用于监听手势事件
2、在Activity的成员函数onTouchEvent(MotionEvent event)中,注册GestureDetector.OnGestureListener
3、在GestureDetector.OnGestureListener 回调函数onFling
三、屏幕渐变效果
1、 当手势从左向右滑动时,图片是左进右出
if (e2.getX() - e1.getX() > 120) ,即up终点(e2)与down起点(e1)的滑动距离大于120,来检测从左向右滑动事件
push_left_in.xml
1. <? xml version = "1.0" encoding = "utf-8" ?>
2. < set xmlns:android = "http://schemas.android.com/apk/res/android" >
3. < translate
4. android:duration = "1500"
5. android:fromXDelta = "100%p"
6. android:toXDelta = "0" />
7.
8. < alpha
9. android:duration = "1500"
10. android:fromAlpha = "0.1"
11. android:toAlpha = "1.0" />
12. </ set >
push_left_out.xml
1. <? xml version = "1.0" encoding = "utf-8" ?>
2. < set xmlns:android = "http://schemas.android.com/apk/res/android" >
3. < translate
4. android:duration = "1500"
5. android:fromXDelta = "0"
6. android:toXDelta = "-100%p" />
7.
8. < alpha
9. android:duration = "1500"
10. android:fromAlpha = "1.0"
11. android:toAlpha = "0.1" />
12. </ set >
2、 当手势从右向左滑动时,图片是右进左出
if (e2.getX() - e1.getX() < -120) ,即up终点(e2)与down起点(e1)的滑动距离小于-120,来检测从右向左滑动事件
push_right_in.xml
1. <? xml version = "1.0" encoding = "utf-8" ?>
2. < set xmlns:android = "http://schemas.android.com/apk/res/android" >
3. < translate
4. android:duration = "1500"
5. android:fromXDelta = "-100%p"
6. android:toXDelta = "0" />
7.
8. < alpha
9. android:duration = "1500"
10. android:fromAlpha = "0.1"
11. android:toAlpha = "1.0" />
12. </ set >
push_right_out.xml —— 右出渐变效果
1. <? xml version = "1.0" encoding = "utf-8" ?>
2. < set xmlns:android = "http://schemas.android.com/apk/res/android" >
3. < translate
4. android:duration = "1500"
5. android:fromXDelta = "0"
6. android:toXDelta = "100%p" />
7.
8. < alpha
9. android:duration = "1500"
10. android:fromAlpha = "1.0"
11. android:toAlpha = "0.1" />
12. </ set >
其中,android:duration表示渐变持续时间;translate表示位移变换;alpha表示透明度变换
translate
android:fromXDelta="-100%p" android:toXDelta="0" 表示图片从左进入,从不可见到可见
android:fromXDelta="0" android:toXDelta="100%p" 表示图片从右滑出,从可见到不可见
alpha
android:fromAlpha="1.0" android:toAlpha="0.1" 表示图片从不透明(1.0)到透明(0.1)
android:fromAlpha="0.1" android:toAlpha="1.0" 表示图片从透明(0.1)到不透明(1.0)
源码下载
推荐参考:
ViewFlipper
GestureDetector.OnDoubleTapListener
GestureDetector.OnGestureListener