必威体育Betway必威体育官网
当前位置:首页 > IT技术

ViewFlipper使用详解

时间:2019-06-03 13:44:07来源:IT技术作者:seo实验室小编阅读:64次「手机版」
 

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啦,到这就讲完了。

相关阅读

自定义viewFlipper

自定义viewFlipper的使用 viewFlipper是ViewAnimator的子类,而ViewAnimator又是继承自FrameLayout,而FrameLayout就是平时基本上只

ViewFlipper实现图片轮播

什么是ViewFlipperViewFlipper,它是Android自带的一个多页面管理控件,可以实现引导页图片切换以及广告轮播的效果。其实ViewPager也

Android循环滚动控件——ViewFlipper的使用

假设现在让你实现一个垂直循环滚动的效果,你的第一反应是什么?如果是立马想找第三方或者想着自定义(嘿!真不嫌麻烦),那么你对ViewFlip

深入了解ViewFlipper工作机制

平时我们在使用ViewFlipper的时候一方面感叹ViewFlipper的使用很简单,另一方面,我们时常感叹ViewFlipper给我们的接口方法太少,很多

分享到:

栏目导航

推荐阅读

热门阅读