`
yunlonglove
  • 浏览: 238953 次
社区版块
存档分类
最新评论

Android开发之ViewFlipper

 
阅读更多

Android开发之ViewFlipper

/*

* Android开发之ViewFlipper

* 北京Android俱乐部群:167839253

*Created on: 2012-7-25

*Author: blueeagle

* Email:liujiaxiang@gmail.com

*/

概述

我们经常在应用中会遇见一种情况:用大拇指左右拨动屏幕,然后屏幕上的内容就发生了变化。这种现象叫做屏幕切换。屏幕切换是指在同一个Activcity内的切换,而并不涉及Activity的改变。

完成这个效果,需要用到Android中的一个类:ViewFlipper。在SDK中,ViewFliper被定义为是一个简单的ViewAnimator,可以实现在两个或多个被添加在其中的View进行动态切换,并且一次只显示一个View。如果需要的话,可以在这些View中按一定的间隔来自动切换。

继续深入查看ViewAnimator这个类。继承与FrameLayout,作用就是为FrameLayout里面的View切换提供动画效果。主要的成员方法如下:

void setInAnimation(Context context, intresourceID)

void setInAnimation(Animation inAnimation)

设置View进入屏幕时候使用的动画

void setOutAnimation(Animation outAnimation)

void setOutAnimation(Context context, intresourceID)

设置View退出屏幕时候使用的动画

void showNext()

显示FrameLayout里面的下一个View。

void showPrevious()

该函数来显示FrameLayout里面的上一个View

ViewFlipper则为ViewAnimator类的子类,ViewFlipper可以用来指定FrameLayout内多个View之间的切换效果,可以一次指定也可以每次切换的时候都指定单独的效果。深入考察这个类,可以知道其XML属性和主要的成员方法:

XML属性

属性名称

描述

android:autoStart

当设为true时,自动启动动画

此时必须是一个布尔值,属性值为true或false

(对应于全局资源属性R.attr.autoStart)

android:flipInterval

显示下一个视图的时间间隔

成员方法

public bool isAutoStart ()

如果视图显示到窗口上时会自动调用startFlipping()方法,则返回true

public bool isFlipping()

用来判断View切换是否正在进行,如果在进行则返回true

public bool setAutoStart (boolautoStart)

设置视图显示到窗口上时是否会自动调用startFlipping()方法

public bool setFlipInterval (intmilliseconds)

View间切换的时间间隔

参数milliseconds 毫秒数

public bool startFlipping ()

开始在View间定时循环切换

public bool stopFlipping ()

停止切换

一个简单的例子

ViewFlipper是继承至FrameLayout的,所以它是一个Layout里面可以放置多个View。定义一个ViewFlipper,里面包含三个ViewGroup作为示例的三个屏幕,每个ViewGroup中包含一个TextView一个Button和一个ImageView,点击按钮则显示下一个屏幕。代码如下:

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" 
    android:background="#ffffff" 
    > 
    <ViewFlipper android:id="@+id/myViewFlipper" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent">   
        <LinearLayout 
           android:orientation="vertical" 
           android:layout_width="fill_parent" 
           android:layout_height="fill_parent" 
           android:background="#ffffff"> 
 
            <TextView android:id="@+id/myTextView01" 
           android:layout_width="fill_parent" 
           android:layout_height="wrap_content" 
           android:textColor="#000000" 
           android:textStyle="bold" 
           android:textSize="18px" 
           > 
            </TextView> 
            <ImageView 
           android:id="@+id/myImageView01" 
           android:layout_width="fill_parent" 
           android:layout_height="wrap_content"
           android:src="@drawable/digital_1" > 
            </ImageView> 
            <Button android:text="Next1" 
           android:id="@+id/myButton01"  
           android:textSize="18px" 
           android:layout_width="fill_parent" 
           android:layout_height="wrap_content"> 
        </Button> 
        </LinearLayout>  
 
        <LinearLayout 
           android:orientation="vertical" 
           android:layout_width="fill_parent" 
           android:layout_height="fill_parent" 
           android:background="#ffffff"> 
 
            <TextView android:id="@+id/myTextView02" 
           android:layout_width="fill_parent" 
           android:layout_height="wrap_content" 
           android:textColor="#000000" 
           android:textStyle="bold" 
           android:textSize="18px" 
            > 
            </TextView> 
            <ImageView  
           android:id="@+id/myImageView02" 
           android:layout_width="fill_parent" 
           android:layout_height="wrap_content"
           android:src="@drawable/digital_2" > 
            </ImageView> 
            <Button android:text="Next2" 
           android:id="@+id/myButton02"  
           android:textSize="18px" 
           android:layout_width="fill_parent" 
           android:layout_height="wrap_content"> 
        </Button> 
        </LinearLayout>
        <LinearLayout 
           android:orientation="vertical" 
           android:layout_width="fill_parent" 
           android:layout_height="fill_parent" 
           android:background="#ffffff"> 
            <TextView android:id="@+id/myTextView03" 
           android:layout_width="fill_parent" 
           android:layout_height="wrap_content" 
           android:textColor="#000000" 
           android:textStyle="bold" 
           android:textSize="18px" 
            > 
            </TextView> 
            <ImageView 
           android:id="@+id/myImageView03" 
           android:layout_width="fill_parent" 
           android:layout_height="wrap_content"
           android:src="@drawable/digital_3"  > 
            </ImageView> 
            <Button android:text="Next3" 
           android:id="@+id/myButton03"  
           android:textSize="18px" 
           android:layout_width="fill_parent" 
           android:layout_height="wrap_content"> 
        </Button> 
        </LinearLayout> 
    </ViewFlipper>         
</LinearLayout>

JAVA文件中如下编写:

public class ViewFlipperDemoActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);   
        Button myButtonNext1 = (Button)findViewById(R.id.myButton01); 
        Button myButtonNext2 = (Button)findViewById(R.id.myButton02);
        Button myButtonNext3 = (Button)findViewById(R.id.myButton03);
        myButtonNext1.setOnClickListener(newView.OnClickListener() { 
            public void onClick(View view) { 
                ViewFlipper myViewFlipper =(ViewFlipper) findViewById(R.id.myViewFlipper); 
               myViewFlipper.setAnimation(AnimationUtils.loadAnimation(view.getContext(),android.R.anim.slide_in_left)); 
                myViewFlipper.showNext(); 
        } 
        }); 
        myButtonNext2.setOnClickListener(newView.OnClickListener() { 
            public void onClick(View view) { 
                ViewFlipper myViewFlipper =(ViewFlipper) findViewById(R.id.myViewFlipper);  
                myViewFlipper.setAnimation(AnimationUtils.loadAnimation(view.getContext(),android.R.anim.slide_in_left)); 
                myViewFlipper.showNext(); 
        } 
        }); 
        myButtonNext3.setOnClickListener(newView.OnClickListener() { 
            public void onClick(View view) { 
                ViewFlipper myViewFlipper =(ViewFlipper) findViewById(R.id.myViewFlipper); 
               myViewFlipper.setAnimation(AnimationUtils.loadAnimation(view.getContext(),android.R.anim.slide_in_left)); 
                myViewFlipper.showNext(); 
        } 
        }); 
    }
}

值得注意的是当ViewFlipper到最后一屏的时候,继续调用showNext()函数,则会返回去调用第一个屏幕。这也是ViewFlipper比较智能的地方。

效果如下图所示:下图为点击第一个屏上的按钮后第二屏正在出现的情形。


用触摸代替按钮

我们在应用程序中,很少遇见用按钮来实现左右切换屏幕的,都是用手指去控制左右切换屏幕,那么这种情况又该如何处理呢?

我们只需要将上述XML文件中的按钮去掉。并给LinearLayout加一个id,用来触发触屏事件。

实现一个OnTouchListener接口,然后添加代码:

        LinearLayout myLinearLayoutMain =(LinearLayout) findViewById(R.id.myLinearLayoutMain); 
       myLinearLayoutMain.setOnTouchListener((OnTouchListener) this);
    @Override
    public boolean onTouch(View v, MotionEvent event) {
               switch(event.getAction()) 
               { 
                   case MotionEvent.ACTION_DOWN: 
                   {  
                       downXValue =event.getX(); 
                       break; 
                   } 
                   case MotionEvent.ACTION_UP: 
                   { 
                       float currentX =event.getX();             
                       if (downXValue <currentX) 
                       { 
                           ViewFlipper myViewFlipper = (ViewFlipper) findViewById(R.id.myViewFlipper); 
                           myViewFlipper.setAnimation(AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right )); 
                           myViewFlipper.showPrevious(); 
                       }  
                       if (downXValue >currentX) 
                       { 
                          ViewFlipper myViewFlipper = (ViewFlipper) findViewById(R.id.myViewFlipper); 
                          myViewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right));   
                          myViewFlipper.showNext(); 
                       } 
                       break; 
                   } 
               } 
               return true;
 
           }

这样就可以实现用手指左右上下滑动,从而得到下一个或者上一个屏的操作。其具体表现在线判断手指初始触屏的位置,再判断手指离开屏的位置,根据位置坐标的上下左右对应关系来判断手指移动的方向,从而做出切屏的操作。

更加复杂的操作

我们在做切屏的时候,还可以利用类SimpleOnGestureListener或者是实现OnGestureListener接口来进行对手势的操作。同样,我们还可以利用自定义动画来做为切屏时候的效果。可以让切屏的动画按自己想要的方式来进行。

首先,我们先写几个动画的XML文件:

1flyinleft.xml

2flyoutleft

3flyinright.xml

4flyoutright.xml

具体动画效果,请参照自定义动画去实现。

下面我们用实现OnGestureListener接口来实现用手势切屏的效果。

1.首先需要定义GestureDetector myGestureDetector;

2.然后New出来myGestureDetector = new GestureDetector(this);

3.实现OnGestureListener接口,重点是onFling函数。

onFling函数代码如下:

    public boolean onFling(MotionEvente1, MotionEvent e2, float velocityX,
           float velocityY) { 
        ViewFlipper myViewFlipper =(ViewFlipper) findViewById(R.id.myViewFlipper); 
      if(e1.getX() >e2.getX()+10) {       //向左划超过10px
                myViewFlipper.setInAnimation(getApplicationContext(),R.anim.flyoutleft); 
              myViewFlipper.showNext();   
            }
         else if(e1.getX() <e2.getX()+10) {     //向右划超过10px
                myViewFlipper.setInAnimation(getApplicationContext(),R.anim.flyinleft);      
               myViewFlipper.showPrevious();      
            }
            else {   
                return false;   
            }   
            return true;  
}

函数参数说明:

e1:第1ACTION_DOWNMotionEvent

e2:最后一个ACTION_MOVEMotionEvent

velocityXX轴上的移动速度,像素/

velocityYY轴上的移动速度,像素/

最后不要忘记:

       @Override 
           public boolean onTouchEvent(MotionEventevent) { 
               returnthis.detector.onTouchEvent(event); 
}

小结:

至此ViewFlipper的相关内容我们就学习完了。当然我们还可以进行更深一步的学习。比如我们可以对接口OnDoubleTapListener进行实现。

实现接口的函数public booleanonDoubleTap(MotionEvent e) 在双击的时候触发,比如,如果我们使用了myViewFlipper.startFlipping();图片将不停在切换,但是如果我们双击屏幕,将停止不停切换,变为正常的情况下,用手势或者按钮切换,当我们再次双击的时候,又不停地切换了。那么这个函数就应该写成如下形式:

 publicboolean onDoubleTap(MotionEvent e) {  

  if(mViewFlipper.isFlipping()) {    
           mViewFlipper.stopFlipping();    
        }else {    
           mViewFlipper.startFlipping();    
        }    
        return true;  
 }


分享到:
评论

相关推荐

    Android开发之ViewFlipper最新版本

    本文档主要讲述的是Android开发之ViewFlipper;希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看

    Android开发之ViewFlipper自动播放图片功能实现方法示例

    本文实例讲述了Android开发之ViewFlipper自动播放图片功能实现方法。分享给大家供大家参考,具体如下: 简介: 1.ViewFlipper继承了ViewAnimator 可以调用addView()添加组件 2.ViewAnimator与AdapterViewFlipper类似...

    Android 滑动效果ViewFlipper

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

    Android GridView + ViewFlipper布局界面,模仿“机锋市场.zip

    在Android开发中,GridView与ViewFlipper是两种常用的布局组件,它们可以被巧妙地结合以创建出丰富的用户界面。在本示例中,“Android GridView + ViewFlipper布局界面,模仿“机锋市场”是一个源码项目,旨在演示...

    Android ActivtiyGroup和ViewFlipper实现Activity滑屏切换

    在Android开发中,Activity是应用程序的基本构建块,用于呈现用户界面和处理用户交互。而滑屏切换是一种常见的用户界面交互模式,特别是在设计多页面应用时。`ActivityGroup`和`ViewFlipper`是两种可以用来实现...

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

    在Android开发中,ViewFlipper是一个非常有用的布局控件,它允许我们轻松地实现滑动翻页的效果。这个示例将向我们展示如何在应用程序中使用ViewFlipper来创建一个动态翻页界面,使得用户可以通过手势或编程方式切换...

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

    在Android开发中,ViewFlipper是一个非常有用的布局组件,它允许开发者轻松地在多个视图之间切换,并且可以添加各种动画效果,使用户界面更加生动和互动。本篇将深入探讨如何利用ViewFlipper实现Switch动画特效,...

    安卓Android源码——ViewFlipper1.rar

    在Android开发中,ViewFlipper是一个非常实用的控件,用于在多个视图之间进行切换,常用于实现轮播图、动画效果等场景。在这个"安卓Android源码——ViewFlipper1.rar"压缩包中,我们可以期待看到一个关于ViewFlipper...

    安卓Android源码——ViewFlipper水平滑动.rar

    【标题】"安卓Android源码——ViewFlipper水平滑动.rar"揭示了关于Android平台下ViewFlipper组件的实现细节,特别关注其水平滑动功能。ViewFlipper是Android SDK提供的一种视图容器,用于在多个视图之间进行平滑切换...

    Android GridView + ViewFlipper布局界面,模仿“机锋市场.rar

    在Android开发中,GridView和ViewFlipper是两个重要的布局组件,它们可以被巧妙地结合以创建出复杂的用户界面。在本示例中,“Android GridView + ViewFlipper布局界面,模仿“机锋市场”是一个源码项目,旨在帮助...

    Android GridView + ViewFlipper布局界面,模仿“机锋市场.

    在Android开发中,创建吸引人的用户界面是至关重要的。"Android GridView + ViewFlipper布局界面,模仿“机锋市场”"这个项目旨在教你如何利用这两种布局组件构建类似“机锋市场”的多列展示效果和动态切换功能。接...

    android viewflipper 图片滑动demo

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

    Android ViewFlipper实现页面的滑动切换

    在Android开发中,ViewFlipper是一个非常实用的控件,用于在多个视图之间进行切换,通常用于实现页面滑动效果。ViewFlipper是ViewAnimator的子类,它提供了自动翻页、手动翻页以及动画过渡等特性。下面将详细探讨...

    Android中利用viewflipper动画切换屏幕效果

    在Android开发中,ViewFlipper是一个非常有用的布局组件,它允许开发者轻松地在多个视图之间进行切换,通常用于创建动态、交互式的用户界面。在本项目中,开发者利用ViewFlipper来实现屏幕间的动画切换效果,使得...

    Android ViewFlipper 的使用

    在Android开发中,ViewFlipper是一个非常实用的控件,它允许我们轻松地在多个视图之间进行切换,常用于实现动画效果,如轮播图、广告栏等。本篇文章将深入探讨`ViewFlipper`的使用方法及其背后的实现原理。 `...

    android ViewFlipper

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

    Android应用源码之ViewFlipper水平滑动.zip

    在Android开发中,ViewFlipper是一个非常实用的控件,它允许我们轻松地在多个视图之间进行切换,通常用于实现动画效果,如水平滑动。这个压缩包"Android应用源码之ViewFlipper水平滑动.zip"包含了如何在Android应用...

    android中的viewFlipper

    在Android开发中,ViewFlipper是一个非常实用的控件,它允许我们轻松地在多个视图之间进行切换,常用于实现轮播图、动画效果或者简单的页面切换。本篇文章将深入探讨`ViewFlipper`的工作原理及其应用。 首先,我们...

Global site tag (gtag.js) - Google Analytics