ViewFlipper的使用例子（视觉效果不错）

用ViewFlipper可以实现图片切换。

屏幕切换指的是在同一个Activity内屏幕见的切换，最长见的情况就是在一个FrameLayout内有多个页面，比如一个系统设置页面；一个个性化设置页面。

android.widget.ViewAnimator类继承至FrameLayout，ViewAnimator类的作用是为FrameLayout里面的View切换提供动画效果。该类有如下几个和动画相关的函数：

setInAnimation：设置View进入屏幕时候使用的动画，该函数有两个版本，一个接受单个参数，类型 为 android.view.animation.Animation，一个接受两个参数，类型为Context和int，分别为Context对象和定义Animation的resourceID。
setOutAnimation: 设置View退出屏幕时候使用的动画，参数setInAnimation函数一样。
showNext： 调用该函数来显示FrameLayout里面的下一个View。
showPrevious： 调用该函数来显示FrameLayout里面的上一个View。

一般不直接使用ViewAnimator，而是使用它的两个子类ViewFlipper和ViewSwitcher。ViewFlipper可以用来指定FrameLayout内多个View之间的切换效果，可以一次指定也可以每次切换的时候都指定单独的效果。该类额外提供了如下几个函数：

isFlipping：用来判断View切换是否正在进行
setFilpInterval：设置View之间切换的时间间隔
startFlipping：使用上面设置的时间间隔来开始切换所有的View，切换会循环进行
stopFlipping: 停止View切换

 ViewSwitcher

Switcher特指在两个View之间切换。可以通过该类指定一个ViewSwitcher.ViewFactory 工程类来创建这两个View。该类也具有两个子类ImageSwitcher、TextSwitcher分别用于图片和文本切换。

 

ViewFlipper
ViewFlipper是继承至FrameLayout的，所以它是一个Layout里面可以放置多个View。在示例中定义一个ViewFlipper，里面包含三个ViewGroup作为示例的三个屏幕，每个ViewGroup中包含一个按钮和一张图片，点击按钮则显示下一个屏幕。

例子如下：

 

res\layout\main.xml

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout      
3.     xmlns:android="http://schemas.android.com/apk/res/android"     
4.     android:orientation="vertical"       
5.     android:layout_width="fill_parent"     
6.     android:layout_height="fill_parent">  
7.      <ViewFlipper android:id="@+id/flipper"     
8.        android:layout_width="fill_parent"       
9.        android:layout_height="fill_parent"     
10.        android:persistentDrawingCache="animation"     
11.        android:flipInterval="1000"     
12.        android:inAnimation="@anim/push_left_in"     
13.        android:outAnimation="@anim/push_left_out">       
14.        <LinearLayout      
15.            android:orientation="vertical"     
16.            android:layout_width="fill_parent"       
17.            android:layout_height="fill_parent">      
18.            <Button      
19.               android:text="Next"       
20.               android:id="@+id/Button_next1"     
21.               android:layout_width="fill_parent"       
22.               android:layout_height="wrap_content">      
23.            </Button>      
24.            <ImageView      
25.               android:id="@+id/p_w_picpath1"       
26.               android:src="@drawable/p_w_picpath1"     
27.               android:layout_width="fill_parent"     
28.               android:layout_height="wrap_content">      
29.            </ImageView>      
30.        </LinearLayout>      
31.        <LinearLayout      
32.            android:orientation="vertical"     
33.            android:layout_width="fill_parent"       
34.            android:layout_height="fill_parent">      
35.            <Button      
36.               android:text="Next"       
37.               android:id="@+id/Button_next2"     
38.               android:layout_width="fill_parent"       
39.               android:layout_height="wrap_content">      
40.            </Button>      
41.            <ImageView      
42.               android:id="@+id/p_w_picpath2"       
43.               android:src="@drawable/p_w_picpath2"     
44.               android:layout_width="fill_parent"     
45.               android:layout_height="wrap_content">      
46.            </ImageView>      
47.        </LinearLayout>      
48.        <LinearLayout      
49.            android:orientation="vertical"     
50.            android:layout_width="fill_parent"       
51.            android:layout_height="fill_parent">      
52.            <Button      
53.               android:text="Next"       
54.               android:id="@+id/Button_next3"     
55.               android:layout_width="fill_parent"       
56.               android:layout_height="wrap_content">      
57.            </Button>      
58.            <ImageView      
59.               android:id="@+id/p_w_picpath3"       
60.               android:src="@drawable/p_w_picpath3"     
61.               android:layout_width="fill_parent"     
62.               android:layout_height="wrap_content">      
63.            </ImageView>      
64.        </LinearLayout>      
65.     </ViewFlipper>       
66. </LinearLayout> 

 在Layout定义中指定动画的相关属性就可以了，通过persistentDrawingCache指定缓存策略；flipInterval指定每个View动画之间的时间间隔；inAnimation和outAnimation分别指定View进出使用的动画效果。动画效果定义如下：

res\anim\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:fromXDelta="100%p"       
5.     android:toXDelta="0"       
6.     android:duration="500"/>      
7.     <alpha      
8.     android:fromAlpha="0.0"       
9.     android:toAlpha="1.0"     
10.     android:duration="500" />      
11. </set>  

 res\anim\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:fromXDelta="0"       
5.     android:toXDelta="-100%p"       
6.     android:duration="500"/>      
7.     <alpha      
8.     android:fromAlpha="1.0"       
9.     android:toAlpha="0.0"       
10.     android:duration="500" />      
11. </set>     

Activity

1. import android.app.Activity;  
2. import android.os.Bundle;  
3. import android.view.GestureDetector;  
4. import android.view.GestureDetector.OnDoubleTapListener;  
5. import android.view.GestureDetector.OnGestureListener;  
6. import android.view.MotionEvent;  
7. import android.view.View;  
8. import android.view.View.OnTouchListener;  
9. import android.widget.Button;  
10. import android.widget.ViewFlipper;  
11.  
12. public class MyViewFlipperActivity extends Activity implements OnGestureListener , OnDoubleTapListener{  
13.      
14.     private ViewFlipper mViewFlipper;      
15.     private  GestureDetector mGestureDetector;  
16.       
17.     public void onCreate(Bundle savedInstanceState) {      
18.         super.onCreate(savedInstanceState);      
19.         setContentView(R.layout.main);      
20.               
21.          mGestureDetector = new GestureDetector(this);   ///  
22.  
23.         Button buttonNext1 = (Button) findViewById(R.id.Button_next1);      
24.         mViewFlipper = (ViewFlipper) findViewById(R.id.flipper);    
25.           
26.         buttonNext1.setOnClickListener(new View.OnClickListener()   
27.         {      
28.             public void onClick(View view) {      
29.         //在layout中定义的属性，也可以在代码中指定      
30.            //  mViewFlipper.setInAnimation(getApplicationContext(), R.anim.push_left_in);      
31.           //  mViewFlipper.setOutAnimation(getApplicationContext(), R.anim.push_left_out);      
32.           //  mViewFlipper.setPersistentDrawingCache(ViewGroup.PERSISTENT_ALL_CACHES);      
33.           //  mViewFlipper.setFlipInterval(1000);      
34.                 mViewFlipper.showNext();      
35.  
36.  
37.                 //调用下面的函数将会循环显示mViewFlipper内的所有View。（不停地在切换图片）  
38.               mViewFlipper.startFlipping();      
39.         }      
40.         });      
41.        
42.         Button buttonNext2 = (Button) findViewById(R.id.Button_next2);      
43.         buttonNext2.setOnClickListener(new View.OnClickListener() {      
44.             public void onClick(View view) {      
45.                 mViewFlipper.showNext();   
46.         }      
47.        
48.         });    
49.           
50.         Button buttonNext3 = (Button) findViewById(R.id.Button_next3);      
51.         buttonNext3.setOnClickListener(new View.OnClickListener() {      
52.             public void onClick(View view) {      
53.                 mViewFlipper.showNext();   
54.         }      
55.        
56.         });      
57.        
58.     }  
59.  
60.  public boolean onDoubleTap(MotionEvent e) {  //双击的时候触发，  
61.  
62.       如果在上面使用了mViewFlipper.startFlipping();    图片将不停在切换，但是如果我们双击屏幕，将停止不停切换，变为正常的情况下，用手势或者按钮切换，当我们再次双击的时候，又不停地切换了。  
63.  
64.   if(mViewFlipper.isFlipping()) {      
65.             mViewFlipper.stopFlipping();      
66.         }else {      
67.             mViewFlipper.startFlipping();      
68.         }      
69.         return true;    
70.  }  
71.  
72.  public boolean onDoubleTapEvent(MotionEvent e) {  
73.   return false;  
74.  }  
75.  
76.  public boolean onSingleTapConfirmed(MotionEvent e) {  
77.   return false;  
78.  }  
79.  
80.  public boolean onDown(MotionEvent e) {  
81.   return false;  
82.  }  
83.  
84.    
85.  public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
86.    float velocityY)   
87.  {  
88.  
89.      // e1：第1个ACTION_DOWN MotionEvent     
90.      // e2：最后一个ACTION_MOVE MotionEvent     
91.      // velocityX：X轴上的移动速度，像素/秒     
92.      // velocityY：Y轴上的移动速度，像素/秒     
93.  
94.  
95.   if(e1.getX() > e2.getX()+10) {       //向左划超过10px  
96.            mViewFlipper.showNext();      
97.         }  
98.      else if(e1.getX() < e2.getX()+10) {     //向右划超过10px  
99.             mViewFlipper.setInAnimation(getApplicationContext(), R.anim.push_left_in);      
100.             mViewFlipper.setOutAnimation(getApplicationContext(), R.anim.push_left_out);      
101.             mViewFlipper.showPrevious();      
102.             mViewFlipper.setInAnimation(getApplicationContext(), R.anim.push_left_in);      
103.             mViewFlipper.setOutAnimation(getApplicationContext(), R.anim.push_left_out);      
104.         }  
105.         else {      
106.             return false;      
107.         }      
108.         return true;      
109.  
110.  }  
111.  
112.  public void onLongPress(MotionEvent e) {  
113.  }  
114.  
115.  public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,  
116.    float distanceY) {  
117.   return false;  
118.  }  
119.  
120.  public void onShowPress(MotionEvent e) {  
121.  }  
122.  
123.  public boolean onSingleTapUp(MotionEvent e) {  
124.   return false;  
125.  }  
126.  
127.  public boolean onTouchEvent(MotionEvent event) {    ///加载监听，这个函数是Activity内有的函数。mGestureDetector.onTouchEvent(event);   
128.  }   
129.  
130.    
131.  
132. /*我们也可以使用接口OnTouchListener的方法public boolean onTouch(View v, MotionEvent event)  
133.  
134. *主要我们在类中implements OnTouchListener了这个接口就行了  
135.  
136. * 这两种方法很类似，都说不出有什么区别，  
137.  
138. *如果我们的类没有继承Activity，但是想添加监听，我就建议先implements OnTouchListener  
139.  
140. *实现它的方法onTouch(View v, MotionEvent event)来加载监听  
141.  
142. * 如果继承了Activity类，那就直接使用public boolean onTouchEvent(MotionEvent event) 吧。  
143.  
144. */ 
145.  
146. }  

运行效果：

当在屏幕上向左划，或者向右划，图片都会切换。

右边动画特效需要自己补上。

转载于:https://blog.51cto.com/whatandroid/1006157