`

android ViewFlipper的使用

阅读更多

http://blog.sina.com.cn/s/blog_78e3ae430100py4p.html

  

屏幕切换指的是在同一个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而是使用它的两个子类ViewFlipperViewSwitcher。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):

<?xml version="1.0" encoding="utf-8"?>   
<LinearLayout   
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:orientation="vertical"    
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent">   
    <ViewFlipper android:id="@+id/details"  
       android:layout_width="fill_parent"    
       android:layout_height="fill_parent"  
       android:persistentDrawingCache="animation"  
       android:flipInterval="1000"  
       android:inAnimation="@anim/push_left_in"  
android:outAnimation="@anim/push_left_out"  
>    
       <LinearLayout   
           android:orientation="vertical"  
           android:layout_width="fill_parent"    
           android:layout_height="fill_parent">   
           <Button   
              android:text="Next"    
              android:id="@+id/Button_next1"  
              android:layout_width="fill_parent"    
              android:layout_height="wrap_content">   
           </Button>   
           <ImageView   
              android:id="@+id/image1"    
              android:src="@drawable/dell1"  
              android:layout_width="fill_parent"  
              android:layout_height="wrap_content">   
           </ImageView>   
       </LinearLayout>   
    
       <LinearLayout   
           android:orientation="vertical"  
           android:layout_width="fill_parent"    
           android:layout_height="fill_parent">   
           <Button   
              android:text="Next"    
              android:id="@+id/Button_next2"  
              android:layout_width="fill_parent"    
              android:layout_height="wrap_content">   
           </Button>   
           <ImageView   
              android:id="@+id/image2"    
              android:src="@drawable/lg"  
              android:layout_width="fill_parent"  
              android:layout_height="wrap_content">   
           </ImageView>   
       </LinearLayout>   
          
       <LinearLayout   
           android:orientation="vertical"  
           android:layout_width="fill_parent"    
           android:layout_height="fill_parent">   
           <Button   
              android:text="Next"    
              android:id="@+id/Button_next3"  
              android:layout_width="fill_parent"    
              android:layout_height="wrap_content">   
           </Button>   
           <ImageView   
              android:id="@+id/image3"    
              android:src="@drawable/lenovo"  
              android:layout_width="fill_parent"  
              android:layout_height="wrap_content">   
           </ImageView>   
       </LinearLayout>   
    
    </ViewFlipper>   
    
</LinearLayout>  
 

 

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

res\anim\push_left_in.xml   

<?xml version="1.0" encoding="utf-8"?>   
<set xmlns:android="http://schemas.android.com/apk/res/android">   
    <translate   
    android:fromXDelta="100%p"    
    android:toXDelta="0"    
    android:duration="500"/>   
    <alpha   
    android:fromAlpha="0.0"    
    android:toAlpha="1.0"  
    android:duration="500" />   
</set>   

 

res\anim\push_left_out.xml   

<?xml version="1.0" encoding="utf-8"?>   
<set xmlns:android="http://schemas.android.com/apk/res/android">   
    <translate   
    android:fromXDelta="0"    
    android:toXDelta="-100%p"    
    android:duration="500"/>   
    <alpha   
    android:fromAlpha="1.0"    
    android:toAlpha="0.0"    
    android:duration="500" />   
</set>  
 

 

Activity代码如下(src\cc\c\TestActivity.java):

public class TestActivity extends Activity {   
    private ViewFlipper mViewFlipper;   
    @Override  
    public void onCreate(Bundle savedInstanceState) {   
        super.onCreate(savedInstanceState);   
        setContentView(R.layout.main);   
           
        Button buttonNext1 = (Button) findViewById(R.id.Button_next1);   
        mViewFlipper = (ViewFlipper) findViewById(R.id.flipper);   
        buttonNext1.setOnClickListener(new View.OnClickListener() {   
            public void onClick(View view) {   
                //在layout中定义的属性,也可以在代码中指定   
//             mViewFlipper.setInAnimation(getApplicationContext(), R.anim.push_left_in);   
//             mViewFlipper.setOutAnimation(getApplicationContext(), R.anim.push_left_out);   
//             mViewFlipper.setPersistentDrawingCache(ViewGroup.PERSISTENT_ALL_CACHES);   
//             mViewFlipper.setFlipInterval(1000);   
                mViewFlipper.showNext();   
                //调用下面的函数将会循环显示mViewFlipper内的所有View。   
//             mViewFlipper.startFlipping();   
        }   
        });   
    
        Button buttonNext2 = (Button) findViewById(R.id.Button_next2);   
        buttonNext2.setOnClickListener(new View.OnClickListener() {   
            public void onClick(View view) {   
                mViewFlipper.showNext();   
        }   
    
        });      
        Button buttonNext3 = (Button) findViewById(R.id.Button_next3);   
        buttonNext3.setOnClickListener(new View.OnClickListener() {   
            public void onClick(View view) {   
                mViewFlipper.showNext();   
        }   
    
        });   
    
    }   
    }  

 

通过手势移动屏幕

上面是通过屏幕上的按钮来在屏幕间切换的,这看起来多少有点不符合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接口:

class TestActivity extends Activity implements OnGestureListener , OnDoubleTapListener  

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

public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,   
           float velocityY) {   
       Log.d(tag, "...onFling...");   
       if(e1.getX() > e2.getX()) {//move to left   
           mViewFlipper.showNext();   
       }else if(e1.getX() < e2.getX()) {   
           mViewFlipper.setInAnimation(getApplicationContext(), R.anim.push_right_in);   
           mViewFlipper.setOutAnimation(getApplicationContext(), R.anim.push_right_out);   
           mViewFlipper.showPrevious();   
           mViewFlipper.setInAnimation(getApplicationContext(), R.anim.push_left_in);   
           mViewFlipper.setOutAnimation(getApplicationContext(), R.anim.push_left_out);   
       }else {   
           return false;   
       }   
       return true;   
    }  
 

 

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

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

 

public boolean onDoubleTap(MotionEvent e) {   
       Log.d(tag, "...onDoubleTap...");   
       if(mViewFlipper.isFlipping()) {   
           mViewFlipper.stopFlipping();   
       }else {   
           mViewFlipper.startFlipping();   
       }   
       return true;   
    }  
 

 

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

mGestureDetector = new GestureDetector(this);

 

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

   

 public GestureDetector(OnGestureListener listener) {   
        this(null, listener, null);   
}  

 

 

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

   

public GestureDetector(Context context, OnGestureListener listener, Handler handler) {   
       if (handler != null) {   
           mHandler = new GestureHandler(handler);   
       } else {   
           mHandler = new GestureHandler();   
       }   
       mListener = listener;   
       if (listener instanceof OnDoubleTapListener) {   
           setOnDoubleTapListener((OnDoubleTapListener) listener);   
       }   
       init(context);  

  

 

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

 
分享到:
评论

相关推荐

    android ViewFlipper使用示例(注册引导页)

    android ViewFlipper使用示例(注册引导页)。做设定好的流程类的填写注册(就例如用户注册,帮助手册,引导页面也可以)。我的博客地址:http://blog.csdn.net/qq_16064871。

    Android ViewFlipper 的使用

    在Android开发中,...以上就是关于Android中的`ViewFlipper`控件的使用和理解,熟练掌握这些知识点,可以帮助开发者构建出更具交互性和动态性的用户界面。在实际项目中,可以根据需求灵活运用,提升用户体验。

    android viewflipper 图片滑动demo

    在Android开发中,ViewFlipper是一个非常有用的布局组件,它允许开发者轻松地在多个视图之间切换,常用于实现滑动浏览效果,如教程、引导页或者轮播图等。本示例“android viewflipper 图片滑动demo”正是这样一个...

    Android ViewFlipper Animation 使用

    本篇文章将详细探讨如何在Android应用程序中使用ViewFlipper以及如何实现动画效果。 首先,我们需要了解ViewFlipper的基本概念。ViewFlipper是LinearLayout的子类,它可以包含多个子视图,并在需要时显示其中一个。...

    android ViewFlipper

    在Android开发中,`ViewFlipper`是一个非常实用的视图切换组件,它允许开发者轻松地在多个子视图之间进行动画切换。本项目提供了一个简单的`ViewFlipper`实现,便于初学者理解和掌握其用法。下面我们将深入探讨`...

    android viewflipper手势拖动效果(An-Beer工作室)

    【Android ViewFlipper 手势拖动效果详解】 在 Android 应用开发中,ViewFlipper 是一个非常有用的布局组件,它可以实现多个视图(View)之间的切换,并且支持手势滑动切换效果,使得用户界面更加生动和交互性更强...

    Android ViewFlipper实现页面的滑动切换

    下面将详细探讨如何在Android应用中使用ViewFlipper来实现页面的滑动切换。 首先,我们需要了解ViewFlipper的基本结构。一个ViewFlipper可以包含多个子视图,如ImageView、TextView或自定义布局。在初始化时,...

    Android ViewFlipper的简单使用

    本文将详细介绍如何在Android项目中使用ViewFlipper,包括基本的布局设置、动态添加视图以及添加切换动画。 首先,我们来看一下ViewFlipper的基本使用。与ViewPager不同,ViewFlipper不需要依赖任何适配器,它可以...

    Android使用ViewFlipper做页面切换,与手势滑动切换的使用

    Android系统自带有一个多页面管理的控件:ViewFlipper. 它可以简单实现子页面的切换,,, 它只需使用addView方法添加几个View,每个View对应的是一个页面,即可完成对于多页面的管理,,, 在android上实现手势...

    Android 滑动效果ViewFlipper

    **Android滑动效果ViewFlipper详解** 在Android开发中,我们常常需要实现各种动画效果来提升用户体验,其中滑动切换视图是一种常见的交互方式。`ViewFlipper`是Android SDK提供的一种布局容器,它允许我们在多个子...

    Android viewFlipper学习使用.zip

    Android viewFlipper学习使用针对viewFlipper设计,ViewFilpper 是Android官方提供的一个View容器类,继承于ViewAnimator类,用于实现页面切换,也可以设定时间间隔,让它自动播放。 又ViewAnimator继承至于...

    Android ViewFlipper简单用法解析

    Android ViewFlipper是一种用于在多个视图之间进行切换的组件,它可以轻松地在布局中实现动画效果。在本文中,我们将深入探讨ViewFlipper的基本用法,并与ViewPager进行对比,以便更好地理解其特点和应用场景。 ...

    android中使用ViewFlipper实现滑动翻页示例

    下面是一个基本的ViewFlipper使用示例: ```xml &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" ...

    Android ViewFlipper水平滑动Demo.zip

    在Android开发中,ViewFlipper是一个非常实用的控件,它允许开发者轻松地在多个视图之间进行切换,常用于实现动画效果,如轮播图、广告栏等。本示例"Android ViewFlipper水平滑动Demo"着重展示了如何利用ViewFlipper...

    Android使用ViewFlipper实现Switch动画特效。

    对于ViewFlipper的Switch动画,我们可以使用视图动画来实现。 在`res/anim`目录下,创建两个XML文件,分别定义开关动画的开启和关闭效果。例如,可以创建`slide_in_left.xml`和`slide_out_right.xml`,用于表示视图...

    Android ViewFlipper翻转视图使用详解

    Android ViewFlipper 翻转视图使用详解 Android ViewFlipper 是 Android 系统自带的一个多页面管理控件,可以自动播放。它和 ViewPager 有所不同,ViewPager 继承自 ViewGroup,是一页一页的,可以带动画效果,可以...

    Android ViewFlipper左右自动滑屏 源码

    在Android开发中,ViewFlipper是一个非常有用的布局控件,它可以轻松实现多个视图之间的切换,比如我们在很多应用中看到的广告轮播效果。本文将深入讲解如何利用ViewFlipper实现左右自动滑屏功能,并结合源码分析其...

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

    在Android开发中,ViewFlipper是一个非常实用的控件,它允许我们轻松地在多个视图之间进行切换,常用于实现动画效果,如轮播图、广告条等。本篇文章将详细讲解如何利用ViewFlipper来创建一个类似淘宝头条垂直广告条...

    最简单的ViewFlipper实现图片跟随手势滑动

    在Android开发中,ViewFlipper是一个非常有用的控件,它允许开发者轻松地在多个视图之间切换,通常用于实现类似轮播图或者卡片翻页的效果。在这个“最简单的ViewFlipper实现图片跟随手势滑动”的教程中,我们将深入...

Global site tag (gtag.js) - Google Analytics