0
点赞
收藏
分享

微信扫一扫

android 滑动效果入门篇(一)—— ViewFlipper (转)


ndroid 滑动效果入门篇(一)—— ViewFlipper


ViewFilpper   是Android官方提供的一个View容器类,继承于ViewAnimator类,用于实现页面切换,也可以设定时间间隔,让它自动播放。
又ViewAnimator继承至于FrameLayout的,所以ViewFilpper的Layout里面可以放置多个View,继承关系如下:

android 滑动效果入门篇(一)—— ViewFlipper (转)_java


本示例通过ViewFlipper和GestureDetector.OnGestureListener实现自动播放和手势滑屏事件 ,先看效果:

 

android 滑动效果入门篇(一)—— ViewFlipper (转)_人工智能_02


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

 

举报

相关推荐

0 条评论