ViewFlipper的使用

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

通过查看OPhone API文档可以发现，有个android.widget.ViewAnimator类继承至FrameLayout，ViewAnimator类的作用是为FrameLayout里面的View切换提供动画效果。该类有如下几个和动画相关的函数：

l 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 的使用，其他的使用方式是类似的。详细信息可以参考文档：

http://androidappdocs-staging.appspot.com/reference/android/widget/ViewAnimator.html

 

ViewFlipper示例

记住，ViewFlipper是继承至FrameLayout的，所以它是一个Layout里面可以放置多个View。在示例中定义一个ViewFlipper，里面包含三个ViewGroup作为示例的三个屏幕，每个ViewGroup中包含一个按钮和一张图片，点击按钮则显示下一个屏幕。代码如下（res\layout\main.xml）：

view plaincopy to clipboardprint?

  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/details"  
  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. >    
  15.        <LinearLayout   
  16.            android:orientation="vertical"  
  17.            android:layout_width="fill_parent"    
  18.            android:layout_height="fill_parent">   
  19.            <Button   
  20.               android:text="Next"    
  21.               android:id="@+id/Button_next1"  
  22.               android:layout_width="fill_parent"    
  23.               android:layout_height="wrap_content">   
  24.            </Button>   
  25.            <ImageView   
  26.               android:id="@+id/image1"    
  27.               android:src="@drawable/dell1"  
  28.               android:layout_width="fill_parent"  
  29.               android:layout_height="wrap_content">   
  30.            </ImageView>   
  31.        </LinearLayout>   
  32.     
  33.        <LinearLayout   
  34.            android:orientation="vertical"  
  35.            android:layout_width="fill_parent"    
  36.            android:layout_height="fill_parent">   
  37.            <Button   
  38.               android:text="Next"    
  39.               android:id="@+id/Button_next2"  
  40.               android:layout_width="fill_parent"    
  41.               android:layout_height="wrap_content">   
  42.            </Button>   
  43.            <ImageView   
  44.               android:id="@+id/image2"    
  45.               android:src="@drawable/lg"  
  46.               android:layout_width="fill_parent"  
  47.               android:layout_height="wrap_content">   
  48.            </ImageView>   
  49.        </LinearLayout>   
  50.           
  51.        <LinearLayout   
  52.            android:orientation="vertical"  
  53.            android:layout_width="fill_parent"    
  54.            android:layout_height="fill_parent">   
  55.            <Button   
  56.               android:text="Next"    
  57.               android:id="@+id/Button_next3"  
  58.               android:layout_width="fill_parent"    
  59.               android:layout_height="wrap_content">   
  60.            </Button>   
  61.            <ImageView   
  62.               android:id="@+id/image3"    
  63.               android:src="@drawable/lenovo"  
  64.               android:layout_width="fill_parent"  
  65.               android:layout_height="wrap_content">   
  66.            </ImageView>   
  67.        </LinearLayout>   
  68.     
  69.     </ViewFlipper>   
  70.     
  71. </LinearLayout>  

 

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

view plaincopy to clipboardprint?

  1. res\anim\push_left_in.xml   
  2. <?xml version="1.0" encoding="utf-8"?>   
  3. <set xmlns:android="http://schemas.android.com/apk/res/android">   
  4.     <translate   
  5.     android:fromXDelta="100%p"    
  6.     android:toXDelta="0"    
  7.     android:duration="500"/>   
  8.     <alpha   
  9.     android:fromAlpha="0.0"    
  10.     android:toAlpha="1.0"  
  11.     android:duration="500" />   
  12. </set>   
  13. res\anim\push_left_out.xml   
  14. <?xml version="1.0" encoding="utf-8"?>   
  15. <set xmlns:android="http://schemas.android.com/apk/res/android">   
  16.     <translate   
  17.     android:fromXDelta="0"    
  18.     android:toXDelta="-100%p"    
  19.     android:duration="500"/>   
  20.     <alpha   
  21.     android:fromAlpha="1.0"    
  22.     android:toAlpha="0.0"    
  23.     android:duration="500" />   
  24. </set>  

Activity代码如下（src\cc\c\TestActivity.java）：

view plaincopy to clipboardprint?

  1. public class TestActivity extends Activity {   
  2.     private ViewFlipper mViewFlipper;   
  3.     @Override  
  4.     public void onCreate(Bundle savedInstanceState) {   
  5.         super.onCreate(savedInstanceState);   
  6.         setContentView(R.layout.main);   
  7.            
  8.         Button buttonNext1 = (Button) findViewById(R.id.Button_next1);   
  9.         mViewFlipper = (ViewFlipper) findViewById(R.id.flipper);   
  10.         buttonNext1.setOnClickListener(new View.OnClickListener() {   
  11.             public void onClick(View view) {   
  12.                 //在layout中定义的属性，也可以在代码中指定   
  13. //             mViewFlipper.setInAnimation(getApplicationContext(), R.anim.push_left_in);   
  14. //             mViewFlipper.setOutAnimation(getApplicationContext(), R.anim.push_left_out);   
  15. //             mViewFlipper.setPersistentDrawingCache(ViewGroup.PERSISTENT_ALL_CACHES);   
  16. //             mViewFlipper.setFlipInterval(1000);   
  17.                 mViewFlipper.showNext();   
  18.                 //调用下面的函数将会循环显示mViewFlipper内的所有View。   
  19. //             mViewFlipper.startFlipping();   
  20.         }   
  21.         });   
  22.     
  23.         Button buttonNext2 = (Button) findViewById(R.id.Button_next2);   
  24.         buttonNext2.setOnClickListener(new View.OnClickListener() {   
  25.             public void onClick(View view) {   
  26.                 mViewFlipper.showNext();   
  27.         }   
  28.     
  29.         });      
  30.         Button buttonNext3 = (Button) findViewById(R.id.Button_next3);   
  31.         buttonNext3.setOnClickListener(new View.OnClickListener() {   
  32.             public void onClick(View view) {   
  33.                 mViewFlipper.showNext();   
  34.         }   
  35.     
  36.         });   
  37.     
  38.     }   
  39.     }  

通过手势移动屏幕

上面是通过屏幕上的按钮来在屏幕间切换的，这看起来多少有点不符合OPhone的风格，如果要是能通过手势的左右滑动来实现屏幕的切换就比较优雅了。

通过android.view.GestureDetector类可以检测各种手势事件，该类有两个回调接口分别用来通知具体的事件：

 

GestureDetector.OnDoubleTapListener：用来通知DoubleTap事件，类似于鼠标的双击事件，该接口有如下三个回调函数：

 

1.   onDoubleTap(MotionEvent e)：通知DoubleTap手势，

2.   onDoubleTapEvent(MotionEvent e)：通知DoubleTap手势中的事件，包含down、up和move事件（这里指的是在双击之间发生的事件，例如在同一个地方双击会产生DoubleTap手势，而在DoubleTap手势里面还会发生down和up事件，这两个事件由该函数通知）；

3.   onSingleTapConfirmed(MotionEvent e)：用来判定该次点击是SingleTap而不是DoubleTap，如果连续点击两次就是DoubleTap手势，如果只点击一次，OPhone系统等待一段时间后没有收到第二次点击则判定该次点击为SingleTap而不是DoubleTap，然后触发SingleTapConfirmed事件。

GestureDetector.OnGestureListener：用来通知普通的手势事件，该接口有如下六个回调函数：

1.   onDown(MotionEvent e)：down事件；

2.   onSingleTapUp(MotionEvent e)：一次点击up事件；

3.   onShowPress(MotionEvent e)：down事件发生而move或则up还没发生前触发该事件；

4.   onLongPress(MotionEvent e)：长按事件；

5.   onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)：滑动手势事件；

6.   onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)：在屏幕上拖动事件。

 

这些事件有些定义的不太容易理解，在示例项目中实现了所有的回调函数，在每个函数中输出相关的日志，对这些事件不理解的可以运行项目，通过不同的操作来触发事件，然后观看logcat输出日志可有助于对这些事件的理解。

 

在上述事件中，如果在程序中处理的该事件就返回true否则返回false，在GestureDetector中也定义了一个SimpleOnGestureListener类，这是个助手类，实现了上述的所有函数并且都返回false。如果在项目中只需要监听某个事件继承这个类可以少些几个空回调函数。

 

要走上面的程序中添加滑动手势来实现屏幕切换的话，首先需要定义一个GestureDetector：

private GestureDetector mGestureDetector;

 

并在onCreate函数中初始化：

mGestureDetector = new GestureDetector(this);

 

参数是OnGestureListener，然后让TestActivity实现 OnGestureListener 和OnDoubleTapListener接口：

 

 

view plaincopy to clipboardprint?

  1. class TestActivity extends Activity implements OnGestureListener , OnDoubleTapListener  

然后在onFling函数中实现切换屏幕的功能：

view plaincopy to clipboardprint?

  1. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,   
  2.            float velocityY) {   
  3.        Log.d(tag, "...onFling...");   
  4.        if(e1.getX() > e2.getX()) {//move to left   
  5.            mViewFlipper.showNext();   
  6.        }else if(e1.getX() < e2.getX()) {   
  7.            mViewFlipper.setInAnimation(getApplicationContext(), R.anim.push_right_in);   
  8.            mViewFlipper.setOutAnimation(getApplicationContext(), R.anim.push_right_out);   
  9.            mViewFlipper.showPrevious();   
  10.            mViewFlipper.setInAnimation(getApplicationContext(), R.anim.push_left_in);   
  11.            mViewFlipper.setOutAnimation(getApplicationContext(), R.anim.push_left_out);   
  12.        }else {   
  13.            return false;   
  14.        }   
  15.        return true;   
  16.     }  

 

这里实现的功能是从右往左滑动则切换到上一个View，从左往右滑动则切换到下一个View，并且使用不同的in、out 动画使切换效果看起来统一一些。

然后在onDoubleTap中实现双击自动切换的效果，再次双击则停止：

   

view plaincopy to clipboardprint?

  1. public boolean onDoubleTap(MotionEvent e) {   
  2.        Log.d(tag, "...onDoubleTap...");   
  3.        if(mViewFlipper.isFlipping()) {   
  4.            mViewFlipper.stopFlipping();   
  5.        }else {   
  6.            mViewFlipper.startFlipping();   
  7.        }   
  8.        return true;   
  9.     }  

 

到这里手势代码就完成了，现在可以通过左右滑动切换View并且双击可以自动切换View。细心的读者这里可能会发现一个问题，上面在创建mGestureDetector 的时候使用的是如下代码：

mGestureDetector = new GestureDetector(this);

 

这里的参数为OnGestureListener，而且GestureDetector有个函数setOnDoubleTapListener来设置OnDoubleTapListener，在上面的代码中并没有设置OnDoubleTapListener，那么onDoubleTap事件是如何调用的呢？这里的玄机就要去探探 GestureDetector(OnGestureListener l)这个构造函数的源代码了：

view plaincopy to clipboardprint?

  1.     public GestureDetector(OnGestureListener listener) {   
  2.         this(null, listener, null);   
  3. }  

 

调用了另外一个构造函数：

   

view plaincopy to clipboardprint?

  1. public GestureDetector(Context context, OnGestureListener listener, Handler handler) {   
  2.        if (handler != null) {   
  3.            mHandler = new GestureHandler(handler);   
  4.        } else {   
  5.            mHandler = new GestureHandler();   
  6.        }   
  7.        mListener = listener;   
  8.        if (listener instanceof OnDoubleTapListener) {   
  9.            setOnDoubleTapListener((OnDoubleTapListener) listener);   
  10.        }   
  11.        init(context);   

 

注意到listener instanceof OnDoubleTapListener没有？现在明白了吧。

时间： 2024-09-16 19:46:06

ViewFlipper的使用的相关文章

Android滑动效果入门篇（一） ViewFlipper

ViewFilpper 是Android官方提供的一个View容器类,继承于ViewAnimator类,用于实现页面切换,也可以设定时间间隔,让 它自动播放. 又ViewAnimator继承至于FrameLayout的,所以ViewFilpper的Layout里面可以放置多个View,继承关系如下: 本示例 通过ViewFlipper和GestureDetector.OnGestureListener实现自动播放和手势滑屏事件,先看效果: Activity import android.app.

Android使用ViewFlipper实现左右滑动效果面

效果看完了就来实现这个效果. 1.布局文件 主界面使用下面的布局:   <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height=&q

Android ViewFlipper简单用法解析_Android

ViewFlipper和ViewPager挺像的,都是一个view容器.内部可以添加多个view,只是viewpager可以通过左右滑动来切换view,而viewFlipper则没有这个功能,所以需要在它上面监听手势.比较方便的是它不用使用适配器就能添加view,所以比较方便.   首先在布局文件中定义这个控件:  <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=

android-安卓开发ViewFlipper和ViewPager的问题

问题描述 安卓开发ViewFlipper和ViewPager的问题 两个都能实现滑动屏幕切换View的效果吧,那么我想问两者有什么区别?ViewFlipper能够滑动切换Fragment吗?能够滑动切换Actionbar的Tab页面吗?什么时候用ViewFlipper?什么时候用ViewPager? 解决方案 ViewFlipper&ViewPager 解决方案二: 一般情况下都是用ViewPager 来实现的 因为安卓市场现在用的比较普遍 viewPager可以兼容低版本,而ViewFlipp

viewflipper-android ViewFlipper管理的子页面中Button设置setEnabled(false)后执行无效，在线急等

问题描述 android ViewFlipper管理的子页面中Button设置setEnabled(false)后执行无效,在线急等 android FrameLayout布局中ViewFlipper管理的子页面中添加添加控件Button.SeekBar等控件,代码动态设置这些控件为不可用setEnabled(false) 代码执行后无效,控件还是可以继续使用,求高手解答...在线等.. 如果对activity中的控件 该控件未在ViewFlipper管理的子页面中,如对Button设置 set

ViewFlipper用法

 ViewFlipper可以添加任意view对象,包括图片,文本,按钮,listview等. 示例代码: view plaincopy to clipboardprint? import android.app.Activity;   import android.os.Bundle;   import android.view.View;   import android.view.View.OnClickListener;   import android.view.ViewGroup.La

Android零基础入门第56节：翻转视图ViewFlipper打造引导页和轮播图

原文:Android零基础入门第56节:翻转视图ViewFlipper打造引导页和轮播图    前面两期学习了 ViewAnimator及其子类ViewSwitcher的使用,以及ViewSwitcher的子类ImageSwitcher和TextSwitcher的使用,你都掌握了吗?本期我们一起来学习ViewAnimator另一个子类 ViewFlipper组件的使用.     一.ViewFlipper概述       ViewFlipper组件继承了 ViewAnimator,它可调用add

viewflipper-Android中ViewFlipper图片切换动画怎么写？

问题描述 Android中ViewFlipper图片切换动画怎么写? 布局如上所示,上面是一个button,下面是ViewFlipper,点击button后ViewFlipper中的图片自动切换,实现一个广告轮播效果.目前效果是右边出来把左边推出去,但是我想要不同的切换效果,比如写一个前面图片淡出显示出后面第二张图片,比如前面第一张缩小至一个点然后小时,后面第二张图片完全显示. 跪求大神指导,在线等,有点急. 解决方案 用timer,控制它的的showPrevious,showNext等

Android ViewFlipper触摸动画

 今天给大家介绍一下如何实现androd主页面的左右拖动效果.实现起来很简单,就是使用ViewFlipper来将您要来回拖动的View装在一起,然后与GestureDetector手势识别类来联动,确定要显示哪个View,加上一点点动画效果即可.比如当手指向左快速滑动时跳转到上一个View,手指向右快速滑动时跳转到下一个View,本例中使用图片作为各个View的页面,实现左右快速滑动显示不同的图片. 首先来看看我们的layout,如下所示: <linearlayout android:layou