android ViewFlipper的使用

转载 2013年12月02日 15:58:54

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


通过查看OPhoneAPI文档可以发现,有个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示例
记住,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/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进出使用的动画效果。动画效果定义如下:
  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):
  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(MotionEvente):通知DoubleTap手势中的事件,包含down、up和move事件(这里指的是在双击之间发生的事件,例如在同一个地方双击会产生DoubleTap手势,而在DoubleTap手势里面还会发生down和up事件,这两个事件由该函数通知);
3.  onSingleTapConfirmed(MotionEvente):用来判定该次点击是SingleTap而不是DoubleTap,如果连续点击两次就是DoubleTap手势,如果只点击一次,OPhone系统等待一段时间后没有收到第二次点击则判定该次点击为SingleTap而不是DoubleTap,然后触发SingleTapConfirmed事件。
GestureDetector.OnGestureListener:用来通知普通的手势事件,该接口有如下六个回调函数:
1.  onDown(MotionEvent e):down事件;
2.  onSingleTapUp(MotionEvent e):一次点击up事件;
3.  onShowPress(MotionEvente):down事件发生而move或则up还没发生前触发该事件;
4.  onLongPress(MotionEvent e):长按事件;
5.  onFling(MotionEvent e1, MotionEvent e2, float velocityX, floatvelocityY):滑动手势事件;
6.  onScroll(MotionEvent e1, MotionEvent e2, float distanceX, floatdistanceY):在屏幕上拖动事件。
 
这些事件有些定义的不太容易理解,在示例项目中实现了所有的回调函数,在每个函数中输出相关的日志,对这些事件不理解的可以运行项目,通过不同的操作来触发事件,然后观看logcat输出日志可有助于对这些事件的理解。
 
在上述事件中,如果在程序中处理的该事件就返回true否则返回false,在GestureDetector中也定义了一个SimpleOnGestureListener类,这是个助手类,实现了上述的所有函数并且都返回false。如果在项目中只需要监听某个事件继承这个类可以少些几个空回调函数。
 
要走上面的程序中添加滑动手势来实现屏幕切换的话,首先需要定义一个GestureDetector:
private GestureDetectormGestureDetector;
 
并在onCreate函数中初始化:
mGestureDetector = newGestureDetector(this);
 
参数是OnGestureListener,然后让TestActivity实现 OnGestureListener和OnDoubleTapListener接口:
 
 
  1. class TestActivity extends Activity implements OnGestureListener , OnDoubleTapListener  
然后在onFling函数中实现切换屏幕的功能:
  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中实现双击自动切换的效果,再次双击则停止:
   
  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 = newGestureDetector(this);
 
这里的参数为OnGestureListener,而且GestureDetector有个函数setOnDoubleTapListener来设置OnDoubleTapListener,在上面的代码中并没有设置OnDoubleTapListener,那么onDoubleTap事件是如何调用的呢?这里的玄机就要去探探GestureDetector(OnGestureListener l)这个构造函数的源代码了:
  1.     public GestureDetector(OnGestureListener listener) {  
  2.         this(null, listener, null);  
  3. }  
 
调用了另外一个构造函数:
   
  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 instanceofOnDoubleTapListener没有?现在明白了吧。

Android中的ViewFlipper的简单使用------自动轮播

哈哈,请尊重原创哦,转载请链接:http://blog.csdn.net/elvira_mx/article/details/45334645 简单说一下,ViewFlipper是Andr...
  • Elvira_mx
  • Elvira_mx
  • 2015年04月28日 13:14
  • 1377

Android-ViewFlipper(图片轮播 和 手势控制 实例)

1.回顾    上篇 学习了 ViewPager 的 使用的三种方式,分别通过 PagerAdapter , FragmentPagerAdapter 和 FragmentStatePagerAdap...
  • LABLENET
  • LABLENET
  • 2015年08月25日 11:10
  • 2249

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

假设现在让你实现一个垂直循环滚动的效果,你的第一反应是什么?如果是立马想找第三方或者想着自定义(嘿!真不嫌麻烦),那么你对ViewFlipper是陌生的,说明这篇博客对你是有价值的。请往下看:   V...
  • u011150924
  • u011150924
  • 2017年03月08日 11:10
  • 2395

有关ViewFlipper的使用及设置动画效果的讲解

说到左右滑动,其实实现左右滑动的方式很多,有ViewPaer,自定义实现Viewgroup,gallery等都可以达到这种效果。这里做下ViewFliper实现左右滑动的效果。 会用到以下的技术: 1...
  • loongggdroid
  • loongggdroid
  • 2014年01月14日 14:36
  • 17621

viewpager与viewflipper详解以及横幅轮播页Banner

ViewPager ViewPager的概念 在前面的博文《Android开发笔记(十九)底部标签栏TabBar》中,我们提到可以在一个主页面里通过选项卡方式,切换到不同的子页面。那么在手机上还有...
  • xiaoqiang_0719
  • xiaoqiang_0719
  • 2016年06月23日 17:33
  • 1103

ViewFlipper的使用---自动播放(轮播图)的实现以及多个view进行切换

一、 ViewFlipper的简介  java.lang.Object android.view.View android.view.ViewGroup ...
  • Kikitious_Du
  • Kikitious_Du
  • 2015年12月18日 15:18
  • 1735

ViewFlipper使用详解

前言:
  • harvic880925
  • harvic880925
  • 2014年09月26日 20:32
  • 20778

ViewFlipper使用方法

概念ViewFilpper可以包含多个View,且View之间的切换有动画效果,例如说渐变效果。它也可以根据时间周期切换显示项目,像一个幻灯片播放的效果。 ViewFlipper可以用来指定Layo...
  • qq_25227159
  • qq_25227159
  • 2015年07月11日 18:00
  • 506

Android基础控件——ViewFlipper的使用,仿淘宝头条垂直滚动广告条

ViewFlipper的使用,仿淘宝头条垂直广告条 学习,学习,学以致用 ViewFlipper是安卓自带的控件,很多人可能很少知道这个控件,这个控件很简单,也很好理解,能不能用上实战就看你们的本...
  • qq_30379689
  • qq_30379689
  • 2017年01月07日 18:53
  • 5325

android之viewFlipper简介及简单应用--滑动翻页功能

说到android的左右滑动效果我们可以说是在每个应用上面都可以看到这样的效果,不管是微博,还是QQ等。实现左右滑动的方式很多,有ViewPaer(不过这个和需要android-support-v4....
  • u014608640
  • u014608640
  • 2014年04月11日 09:59
  • 1151
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android ViewFlipper的使用
举报原因:
原因补充:

(最多只允许输入30个字)