Android开发之ViewFlipper

/*

* Android开发之ViewFlipper

* 北京Android俱乐部群：167839253

*Created on: 2012-7-25

*Author: blueeagle

* Email:[e-mail]

*/

概述

我们经常在应用中会遇见一种情况：用大拇指左右拨动屏幕，然后屏幕上的内容就发生了变化。这种现象叫做屏幕切换。屏幕切换是指在同一个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文件：

1、flyinleft.xml

2、flyoutleft

3、flyinright.xml

4、flyoutright.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：第1个ACTION_DOWNMotionEvent

e2：最后一个ACTION_MOVEMotionEvent

velocityX：X轴上的移动速度，像素/秒

velocityY：Y轴上的移动速度，像素/秒

最后不要忘记：

       @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;  
 }