Android中ViewFlipper的使用详解

说到Android的左右滑动效果我们可以说是在每个应用上面都可以看到这样的效果，不管是微博，还是QQ等。

实现左右滑动的方式很多，有ViewPager(不过这个和需要android-support-v4.jar的支持)，自定义实现Viewgroup，gallery等都可以达到这种效果。这里主要是做下ViewFliper来实现左右滑动的效果。

ViewFlipper可以实现滑动ImageView、自定义View、动态添加View等，只要ViewPager能实现的功能它也能实现。好了，废话不说了，直接说怎么实现ViewFlipper吧，这里我还加了一个功能，就是当触摸到ViewFlipper是，就让它停止3秒，然后3秒后再自动切换。

使用ViewFlipper的时候我习惯用动态添加View来做，因为这样可以对View的添加和删除都非常方便，而不必去管xml布局文件。下面就来看看怎么做的吧。

一、基本实现

 

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

1、在XML中的布局：

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
 
 
  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 plaincopy在CODE上查看代码片派生到我的代码片
 
 
 
  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中布好以后，直接就能用了。

但我们这里有个问题在于，我们这里的ImageView是写死的，如果要改显示的视图我们就必须该xml布局文件了，这样很不利代码的后期维护了。所以我们在使用中一般是要动态加入ImageView或自定义View的，这就是下面的内容喽。

二、动态添加图片，并加入手势滑动

我们一般要动态加载View，就要用到ViewFlipper::addView方法了。而如果要用手势滑动效果，就需要用ViewFlipper::showNext();//显示下一个视图， ViewFlipper::showPrevious();//显示上一个视图  的方法了。

先贴xml布局文件吧：

 

[html] view plaincopy
 
 
  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.     android:paddingBottom="@dimen/activity_vertical_margin"  
  6.     android:paddingLeft="@dimen/activity_horizontal_margin"  
  7.     android:paddingRight="@dimen/activity_horizontal_margin"  
  8.     android:paddingTop="@dimen/activity_vertical_margin"  
  9.     tools:context=".MainActivity" >  
  10.   
  11.     <ViewFlipper  
  12.         android:id="@+id/vf"  
  13.         android:layout_width="match_parent"  
  14.         android:layout_height="300dp" >  
  15.     </ViewFlipper>  
  16.   
  17. </RelativeLayout>  

在布局中我们只添加了一个ViewFlipper控件，将来要动态添加ViewFlipper的子控件的时候，就通过ViewFlipper对象来addView()添加View对象了，这里要添加的View对象怎么来呢？当然就是通过代码来写了，比如要添加ImageView，就通过ImageView mImageView = new ImageView（this）;来创建一个对象，然后设置它的一些图片什么的，如果要添加一个自定义View，就可以在layout文件夹下先创建这个自定义的View布局，然后通过LayoutInflater填充器来填充，从而得到一个View对象，就add进去就可以啦。

 

------------------思考：

如果我们在开发中遇到这种情况怎么办呢？我们要用代码动态添加一个自定义布局View对象，那怎么做呢，答案就是首先创建这个布局的根布局对象，比如用LinearLayout布局，就new 一个LinearLayout对象，然后通过再add其它子控件对象进去，这样纯代码就可以写布局啦！！！

 

言归正传，再贴Java代码吧：

 

[java] view plaincopy
 
 
  1. public class MainActivity extends Activity  {  
  2.     private ViewFlipper flipper;  
  3.     private GestureDetector detector;  
  4.     @Override  
  5.     protected void onCreate(Bundle savedInstanceState) {  
  6.         super.onCreate(savedInstanceState);  
  7.         setContentView(R.layout.activity_main);  
  8.         init();  
  9.     }  
  10.     private void init(){  
  11.         flipper = (ViewFlipper) findViewById(R.id.vf);  
  12.         flipper.addView(getImageView(R.drawable.aaaa));//在一个根视图中动态添加子视图，可以根据new对象来进行子视图的增加和删减  
  13.         flipper.addView(getImageView(R.drawable.aa));  
  14.         flipper.addView(getImageView(R.drawable.http_imgload));  
  15.         <span style="white-space:pre">    </span>flipper.setInAnimation(inFromRightAnimation());//设置View进入屏幕时候使用的动画      
  16.         <span style="white-space:pre">    </span>flipper.setOutAnimation(outToLeftAnimation());  //设置View退出屏幕时候使用的动画      
  17.         flipper.setFlipInterval(2000);//设置自动切换的间隔时间  
  18.         flipper.startFlipping();//开启切换效果  
  19.         flipper.setOnTouchListener(new OnTouchListener() {  
  20.             @Override  
  21.             public boolean onTouch(View v, MotionEvent event) {  
  22.                 return MainActivity.this.detector.onTouchEvent(event);//当有触屏事件作用于ViewFlipper时，把这个触屏事件返回给 GestureDetector手势识别器处理  
  23.                 //如果想要把整个屏幕上的触屏事件都返回给 GestureDetector手势识别器处理，  
  24.                 //而不单单是在ViewFlipper上发生触屏事件时就给 GestureDetector处理，  
  25.                 //那么我们就不必为flipper单独设置onTouchListener（）触摸监听器了，就只需要重写Activity中的onTouchEvent()方法，  
  26.                 //在该方法中讲整个屏幕的触摸事件返回给手势识别器处理就行  
  27.             }  
  28.         });  
  29.           
  30.         detector = new GestureDetector(this, new OnGestureListener() {//创建手势识别器并监听手势事件  
  31.               
  32.             @Override  
  33.             public boolean onSingleTapUp(MotionEvent e) {  
  34.                 // TODO Auto-generated method stub  
  35.                 return false;  
  36.             }  
  37.               
  38.             @Override  
  39.             public void onShowPress(MotionEvent e) {  
  40.                 // TODO Auto-generated method stub  
  41.             }  
  42.               
  43.             @Override  
  44.             public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,  
  45.                     float distanceY) {  
  46.                 // TODO Auto-generated method stub  
  47.                 return false;  
  48.             }  
  49.               
  50.             @Override  
  51.             public void onLongPress(MotionEvent e) {  
  52.                 // TODO Auto-generated method stub  
  53.             }  
  54.         <span style="white-space:pre">    </span>/*   
  55.              * 用户按下触摸屏、快速移动后松开即触发这个事件   
  56.              * e1：第1个ACTION_DOWN MotionEvent   
  57.              * e2：最后一个ACTION_MOVE MotionEvent   
  58.              * velocityX：X轴上的移动速度，像素/秒   
  59.              * velocityY：Y轴上的移动速度，像素/秒   
  60.              * 触发条件 ： 
  61.              * X轴的坐标位移大于FLING_MIN_DISTANCE，且移动速度大于FLING_MIN_VELOCITY个像素/秒   
  62.              */  
  63.             @Override  
  64.             public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
  65.                     float velocityY) {//滑动事件回调函数  
  66.                   
  67.             final float FLING_MIN_DISTANCE = 100;//最小滑动像素  
  68.             final float FLING_MIN_VELOCITY = 150;//最小滑动速度  
  69.             if(e1.getX() - e2.getX() > FLING_MIN_DISTANCE &&   
  70.                 Math.abs(velocityX) > FLING_MIN_VELOCITY){//X轴上的移动速度去绝对值进行比较  
  71.             //判断x轴坐标如果第一次按下时的坐标减去第二次离开屏幕时的坐标大于我们设置的位移，因为一个控件的原点是在左上角，就说明此时是向左滑动的  
  72.             <span style="white-space:pre">    </span>//设置View进入屏幕时候使用的动画    
  73.                     <span style="white-space:pre">    </span>flipper.setInAnimation(inFromRightAnimation());    
  74.                     <span style="white-space:pre">    </span>//设置View退出屏幕时候使用的动画    
  75.                     <span style="white-space:pre">    </span>flipper.setOutAnimation(outToLeftAnimation());    
  76.                 flipper.showNext();//显示下一个视图    
  77.                       
  78.             }else if(e2.getX() - e1.getX() > FLING_MIN_DISTANCE &&   
  79.                 Math.abs(velocityX) > FLING_MIN_VELOCITY){  
  80.             //判断x轴坐标如果第二次离开屏幕时的坐标减去第一次按下时的坐标大于我们设置的位移，因为一个控件的原点是在左上角，就说明此时是向右滑动的  
  81.                 flipper.setInAnimation(inFromLeftAnimation());    
  82.                     <span style="white-space:pre">    </span>flipper.setOutAnimation(outToRightAnimation());    
  83.                 flipper.showPrevious();//显示上一个视图    
  84.             }  
  85.                 return true;  
  86.             }  
  87.   
  88.             @Override  
  89.             public boolean onDown(MotionEvent e) {//手指按下屏幕时触发  
  90.                 flipper.stopFlipping();//当触摸到ViewFlipper时，就让它停止自动滑动，如果要触摸到整个屏幕的任意一处就让它停止滑动，就按上面那个方法，不用设置ViewFlipper的触摸事件监听了  
  91.                 new Handler().postDelayed(new Runnable() {//在当前线程（也即主线程中）开启一个消息处理器，并在3秒后发送flipper.startFlipping();这个消息给主线程，再让它自动滑动，从而来更新UI  
  92.                     @Override  
  93.                     public void run() {  
  94.                         flipper.startFlipping();//3秒后执行，让它又开始滑动  
  95.                     }  
  96.                 }, 3000);             
  97.                 return true;  
  98.             }  
  99.         });  
  100.     }  
  101.     //创建一个ImageView对象  
  102.     private ImageView getImageView(int id){  
  103.         <span style="white-space:pre">    </span>ImageView imageView = new ImageView(this);  
  104.         <span style="white-space:pre">    </span>imageView.setImageResource(id);  
  105.         <span style="white-space:pre">    </span>return imageView;  
  106.     }  
  107.     /**   
  108.      * 定义从右侧进入的动画效果   
  109.      * @return   
  110.      */    
  111.     protected Animation inFromRightAnimation() {    
  112.         <span style="white-space:pre">    </span>Animation inFromRight = new TranslateAnimation(    
  113.                 Animation.RELATIVE_TO_PARENT, +1.0f,    
  114.                 Animation.RELATIVE_TO_PARENT, 0.0f,    
  115.                 Animation.RELATIVE_TO_PARENT, 0.0f,    
  116.                 Animation.RELATIVE_TO_PARENT, 0.0f);    
  117.         <span style="white-space:pre">    </span>inFromRight.setDuration(200);    
  118.         <span style="white-space:pre">    </span>inFromRight.setInterpolator(new AccelerateInterpolator());    
  119.         <span style="white-space:pre">    </span>return inFromRight;    
  120.     }    
  121.      
  122.     /**   
  123.      * 定义从左侧退出的动画效果   
  124.      * @return   
  125.      */    
  126.     protected Animation outToLeftAnimation() {    
  127.         Animation outtoLeft = new TranslateAnimation(    
  128.                 Animation.RELATIVE_TO_PARENT, 0.0f,    
  129.                 Animation.RELATIVE_TO_PARENT, -1.0f,    
  130.                 Animation.RELATIVE_TO_PARENT, 0.0f,    
  131.                 Animation.RELATIVE_TO_PARENT, 0.0f);    
  132.         outtoLeft.setDuration(200);    
  133.         outtoLeft.setInterpolator(new AccelerateInterpolator());    
  134.         return outtoLeft;    
  135.     }    
  136.      
  137.     /**   
  138.      * 定义从左侧进入的动画效果   
  139.      * @return   
  140.      */    
  141.     protected Animation inFromLeftAnimation() {    
  142.         Animation inFromLeft = new TranslateAnimation(    
  143.                 Animation.RELATIVE_TO_PARENT, -1.0f,    
  144.                 Animation.RELATIVE_TO_PARENT, 0.0f,    
  145.                 Animation.RELATIVE_TO_PARENT, 0.0f,    
  146.                 Animation.RELATIVE_TO_PARENT, 0.0f);    
  147.         inFromLeft.setDuration(200);    
  148.         inFromLeft.setInterpolator(new AccelerateInterpolator());    
  149.         return inFromLeft;    
  150.     }    
  151.       
  152.     /**   
  153.      * 定义从右侧退出时的动画效果   
  154.      * @return   
  155.      */    
  156.     protected Animation outToRightAnimation() {    
  157.         Animation outtoRight = new TranslateAnimation(    
  158.                 Animation.RELATIVE_TO_PARENT, 0.0f,    
  159.                 Animation.RELATIVE_TO_PARENT, +1.0f,    
  160.                 Animation.RELATIVE_TO_PARENT, 0.0f,    
  161.                 Animation.RELATIVE_TO_PARENT, 0.0f);    
  162.         outtoRight.setDuration(200);    
  163.         outtoRight.setInterpolator(new AccelerateInterpolator());    
  164.         return outtoRight;    
  165.     }    
  166.   
  167. }  


好了，代码上的注释已经很明显了，还有那个动画Animation，这里就不再说了，自己去查下。

 

再贴张图吧，自己画的。

 

最后，再总结一下ViewFlipper的使用步骤吧：

1、首先在xml布局中创建ViewFlipper控件

2、在java文件中实例化ViewFlipper控件

3、动态为ViewFlipper添加View子控件，并设置响应的动画效果或者自动切换时间，并开启自动切换

4、设置ViewFlipper的onTouchListener()触摸事件，（如果要实现只触摸ViewFlipper时对手势滑动事件有效就设置ViewFlipper的onTouchListener，并返回触摸事件给手势识别器处理。如果对整个屏幕触摸有效，就不必设置这个了，直接重写activity中的onTouchEvent（）方法，在这个方法中拦截触摸事件交给手势识别器处理）

5、创建手势识别器GestureDetector并监听，重写它的onFling（）方法。

 

流程就是这样的！！！

源码上传至http://download.csdn.NET/detail/u010687392/8458475

请大家尊重原创者版权，转载请标明出处-------------谢谢

posted @ 2016-11-28 12:41  天涯海角路  阅读(169)  评论(0)    收藏  举报