ViewFlipper使用详解

本文转载自：http://blog.csdn.net/harvic880925/article/details/39585347

一、基本实现

ViewFlipper是一个切换控件，一般用于图片的切换，当然它是可以添加View的，而不限定只用于ImageView，当然我们也可以自定义View，只是我们经常利用ViewFlipper来实现的是ImageView的切换，如果切换自定义的View，倒还不如使用ViewPager来做。

下面先看一下实现的效果：（实现四张图片的自动切换）

1、在XML中的布局：

[html] view plain copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5.   
6.     <ViewFlipper  
7.         android:id="@+id/flipper"  
8.         android:layout_width="match_parent"  
9.         android:layout_height="wrap_content"  
10.         android:layout_alignParentTop="true"  
11.         android:layout_marginTop="10dp"  
12.         android:flipInterval="2000" >  
13.         <ImageView   
14.             android:layout_width="fill_parent"  
15.             android:layout_height="300dip"  
16.             android:scaleType="fitXY"  
17.             android:src="@drawable/img_1"/>  
18.         <ImageView   
19.             android:layout_width="fill_parent"  
20.             android:layout_height="300dip"  
21.             android:scaleType="fitXY"  
22.             android:src="@drawable/img_2"/>  
23.         <ImageView   
24.             android:layout_width="fill_parent"  
25.             android:layout_height="300dip"  
26.             android:scaleType="fitXY"  
27.             android:src="@drawable/img_3"/>  
28.         <ImageView   
29.             android:layout_width="fill_parent"  
30.             android:layout_height="300dip"  
31.             android:scaleType="fitXY"  
32.             android:src="@drawable/img_4"/>  
33.     </ViewFlipper>  
34.   
35. </RelativeLayout>  

在ViewFlipper中，加入四个ImageView控件，其中flipInterval属性是用来设置多少毫秒自动显示下一个示图;

2、JAVA代码：

[java] view plain copy

1. public class MainActivity extends Activity {  
2.   
3.     ViewFlipper flipper;  
4.     @Override  
5.     public void onCreate(Bundle savedInstanceState) {  
6.         super.onCreate(savedInstanceState);  
7.         setContentView(R.layout.activity_main);  
8.         flipper = (ViewFlipper) findViewById(R.id.flipper);  
9.         flipper.startFlipping();  
10.     }  
11.       
12. }  

这部分代码非常简单，直接调用ViewFlipper的startFlipping（）函数，开始滑动。
可见，ViewFlipper使用起来非常简单，直接在xml中布好以后，直接就能用了。

源码在文章底部提供下载；

二、高级实现——实现手势滑动

这部分根据用户向左，向右滑的手拔势来判断当前是显示前一张图片，还是后一张图片，效果图如下：

找到了一个Gif录像工具：http://blog.bahraniapps.com/gifcam/  挺好，还不需要安装。

首先，这里涉及到两个方面的内容：

（1）显示ViewFlipper中，当前图片的上一张，和下一张图片的接口：

[java] view plain copy

1. ViewFlipper::showNext();  //显示下一个视图  
2. ViewFlipper::showPrevious(); //显示上一个视图  

（2）用户手势检测

这里要用到GestureDetector,我这里也会简单提一下GestureDetector的使用方法,更详细的请参看《用户手势检测-GestureDetector使用详解》

1、XML中布局不变：

[html] view plain copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5.   
6.     <ViewFlipper  
7.         android:id="@+id/flipper"  
8.         android:layout_width="match_parent"  
9.         android:layout_height="wrap_content"  
10.         android:layout_alignParentTop="true"  
11.         android:layout_marginTop="10dp"  
12.         android:flipInterval="2000" >  
13.         <ImageView   
14.             android:layout_width="fill_parent"  
15.             android:layout_height="300dip"  
16.             android:scaleType="fitXY"  
17.             android:src="@drawable/img_1"/>  
18.         <ImageView   
19.             android:layout_width="fill_parent"  
20.             android:layout_height="300dip"  
21.             android:scaleType="fitXY"  
22.             android:src="@drawable/img_2"/>  
23.         <ImageView   
24.             android:layout_width="fill_parent"  
25.             android:layout_height="300dip"  
26.             android:scaleType="fitXY"  
27.             android:src="@drawable/img_3"/>  
28.         <ImageView   
29.             android:layout_width="fill_parent"  
30.             android:layout_height="300dip"  
31.             android:scaleType="fitXY"  
32.             android:src="@drawable/img_4"/>  
33.     </ViewFlipper>  
34.   
35. </RelativeLayout>  

2、JAVA代码

同样，先给出完整代码，然后逐步讲解：

[java] view plain copy

1. public class MainActivity extends Activity implements OnTouchListener {  
2.   
3.     private ViewFlipper mFlipper;  
4.     private GestureDetector mDetector; //手势检测  
5.     @Override  
6.     protected void onCreate(Bundle savedInstanceState) {  
7.         super.onCreate(savedInstanceState);  
8.         setContentView(R.layout.activity_main);  
9.           
10.         mFlipper = (ViewFlipper) findViewById(R.id.flipper);      
11.         mFlipper.setOnTouchListener(this);  
12.           
13.         mDetector = new GestureDetector(new simpleGestureListener());  
14.     }  
15.       
16.     public boolean onTouch(View v, MotionEvent event) {  
17.         return mDetector.onTouchEvent(event);  
18.     }  
19.       
20.     private class simpleGestureListener extends GestureDetector.SimpleOnGestureListener{  
21.         final int FLING_MIN_DISTANCE = 100, FLING_MIN_VELOCITY = 200;    
22.           
23.         //不知道为什么，不加上onDown函数的话，onFling就不会响应，真是奇怪  
24.         @Override  
25.         public boolean onDown(MotionEvent e) {  
26.             // TODO Auto-generated method stub  
27.             Toast.makeText(MainActivity.this, "ondown", Toast.LENGTH_SHORT).show();     
28.             return true;  
29.         }  
30.         @Override  
31.         public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
32.                 float velocityY) {  
33.             // Fling left       
34.             if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE      
35.                     && Math.abs(velocityX) > FLING_MIN_VELOCITY) {      
36.   
37.                 mFlipper.showNext();  
38.   
39.                 Toast.makeText(MainActivity.this, "Fling Left", Toast.LENGTH_SHORT).show();      
40.             } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE      
41.                     && Math.abs(velocityX) > FLING_MIN_VELOCITY) {      
42.                 // Fling right       
43.    
44.                 mFlipper.showPrevious();  
45.                   
46.                 Toast.makeText(MainActivity.this, "Fling Right", Toast.LENGTH_SHORT).show();      
47.             }        
48.             return true;    
49.         }  
50.     }  
51.   
52. }  

根据《用户手势检测-GestureDetector使用详解》 中GestureDector的四步走策略来看这段代码：

（1） 创建OnGestureListener监听函数：
我们这里使用SimpleOnGestureListener类来实现监听函数，因为这里不需要必须写出接口中的所有没必要的函数，（不知道为什么，我这里必须要实现OnDown函数，如果没有这个函数的重写，OnFling就不会响应，真是奇怪），然后在OnFling中根据X轴方向移动的距离和速度来判断当前用户是向左滑还是向右滑，从而利用showPrevious()或者showNext()来显示上一张或者下一张图片。关于这一部分代码，如果有不理解的同学，还是乖乖看 《用户手势检测-GestureDetector使用详解》这篇文章吧，这段代码在这篇文章的第五部分（五、OnFling应用——识别向左滑还是向右滑）

[java] view plain copy

1. private class simpleGestureListener extends GestureDetector.SimpleOnGestureListener{  
2.     final int FLING_MIN_DISTANCE = 100, FLING_MIN_VELOCITY = 200;    
3.       
4.     //不知道为什么，不加上onDown函数的话，onFling就不会响应，真是奇怪  
5.     @Override  
6.     public boolean onDown(MotionEvent e) {  
7.         // TODO Auto-generated method stub  
8.         Toast.makeText(MainActivity.this, "ondown", Toast.LENGTH_SHORT).show();     
9.         return true;  
10.     }  
11.     @Override  
12.     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
13.             float velocityY) {  
14.         // Fling left       
15.         if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE      
16.                    && Math.abs(velocityX) > FLING_MIN_VELOCITY) {      
17.   
18.             mFlipper.showNext();  
19.   
20.                Toast.makeText(MainActivity.this, "Fling Left", Toast.LENGTH_SHORT).show();      
21.            } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE      
22.                    && Math.abs(velocityX) > FLING_MIN_VELOCITY) {      
23.                // Fling right       
24.   
25.             mFlipper.showPrevious();  
26.               
27.                Toast.makeText(MainActivity.this, "Fling Right", Toast.LENGTH_SHORT).show();      
28.            }        
29.            return true;    
30.     }  
31. }  

2、 创建GestureDetector实例mGestureDetector：

[java] view plain copy

1. private GestureDetector mDetector;  

3、 onTouch(View v, MotionEvent event)中拦截：

[java] view plain copy

1. public boolean onTouch(View v, MotionEvent event) {  
2.     return mDetector.onTouchEvent(event);  
3. }  

4、控件绑定

[java] view plain copy

1. mFlipper = (ViewFlipper) findViewById(R.id.flipper);      
2. mFlipper.setOnTouchListener(this);  

根据这四步，代码也就结束了。

源码在文章底部提供下载；

但我们这里有个问题在于，我们这里的ImageView是写死的，但我们在使用中一般是要动态加入ImageView的，这就是下面的内容喽。

三、动态添加图片

上面，我们都是在ViewFlipper里直接加入ImageView来实现本地加载的VIew序列，但在程序中，我们一般是要动态加载View的，动态加载View，用到了ViewFlipper::addView函数。下面在上面的例子基础上更改一下，实现同样的功能：

1、XML代码：

[java] view plain copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:context="com.example.viewflipperpart3.MainActivity" >  
6.   
7.     <ViewFlipper  
8.         android:id="@+id/flipper"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="wrap_content"  
11.         android:layout_alignParentTop="true"  
12.         android:layout_marginTop="10dp"  
13.         android:flipInterval="2000" />  
14.   
15. </RelativeLayout>  

2、JAVA代码：

[java] view plain copy

1. public class MainActivity extends Activity implements OnTouchListener {  
2.   
3.     private ViewFlipper mFlipper;  
4.     private GestureDetector mDetector; //手势检测  
5.     @Override  
6.     protected void onCreate(Bundle savedInstanceState) {  
7.         super.onCreate(savedInstanceState);  
8.         setContentView(R.layout.activity_main);  
9.           
10.         mFlipper = (ViewFlipper) findViewById(R.id.flipper);      
11.         mFlipper.addView(getImageView(R.drawable.img_1));  
12.         mFlipper.addView(getImageView(R.drawable.img_2));  
13.         mFlipper.addView(getImageView(R.drawable.img_3));  
14.         mFlipper.addView(getImageView(R.drawable.img_4));  
15.         mFlipper.setOnTouchListener(this);  
16.           
17.         mDetector = new GestureDetector(new simpleGestureListener());  
18.     }  
19.       
20.     private ImageView getImageView(int id){  
21.       ImageView imageView = new ImageView(this);  
22.       imageView.setImageResource(id);  
23.       return imageView;  
24.     }  
25.       
26.     public boolean onTouch(View v, MotionEvent event) {  
27.         return mDetector.onTouchEvent(event);  
28.     }  
29.       
30.     private class simpleGestureListener extends GestureDetector.SimpleOnGestureListener{  
31.         final int FLING_MIN_DISTANCE = 100, FLING_MIN_VELOCITY = 200;    
32.           
33.         //不知道为什么，不加上onDown函数的话，onFling就不会响应，真是奇怪  
34.         @Override  
35.         public boolean onDown(MotionEvent e) {  
36.             // TODO Auto-generated method stub  
37.             Toast.makeText(MainActivity.this, "ondown", Toast.LENGTH_SHORT).show();     
38.             return true;  
39.         }  
40.         @Override  
41.         public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
42.                 float velocityY) {  
43.             // Fling left       
44.             if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE      
45.                     && Math.abs(velocityX) > FLING_MIN_VELOCITY) {      
46.   
47.                 mFlipper.showNext();  
48.   
49.                 Toast.makeText(MainActivity.this, "Fling Left", Toast.LENGTH_SHORT).show();      
50.             } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE      
51.                     && Math.abs(velocityX) > FLING_MIN_VELOCITY) {      
52.                 // Fling right       
53.    
54.                 mFlipper.showPrevious();  
55.                   
56.                 Toast.makeText(MainActivity.this, "Fling Right", Toast.LENGTH_SHORT).show();      
57.             }        
58.             return true;    
59.         }  
60.     }  
61.   
62. }  

在上面这段代码中，一切都没变，只是多了一个函数和几个addView()

[java] view plain copy

1. private ImageView getImageView(int id){  
2.   ImageView imageView = new ImageView(this);  
3.   imageView.setImageResource(id);  
4.   return imageView;  
5. }  

这段代码是自己写的，通过传进去图片的resourceID，来构造对应的ImageView，然后利用addView（）添加到ViewFlipper中：

[java] view plain copy

1. mFlipper = (ViewFlipper) findViewById(R.id.flipper);      
2. mFlipper.addView(getImageView(R.drawable.img_1));  
3. mFlipper.addView(getImageView(R.drawable.img_2));  
4. mFlipper.addView(getImageView(R.drawable.img_3));  
5. mFlipper.addView(getImageView(R.drawable.img_4));  

OK啦，到这就讲完了。