Android ViewFilpper的简单使用

浏览数：20 / 时间：2015年06月11日

屏幕切换指的是在同一个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

其他的不多说了，还是举个例子吧：

首先呢是一个布局文件 main.xml:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="fill_parent" 
 4     android:layout_height="fill_parent"
 5     android:orientation="vertical">
 6     <ViewFlipper 
 7         android:id="@+id/myViewFlipper"
 8         android:layout_width="fill_parent" 
 9         android:layout_height="fill_parent">
10         <!-- 第一个页面 -->
11         <LinearLayout 
12             android:layout_width="fill_parent"
13             android:layout_height="fill_parent" 
14             android:gravity="center">
15             <ImageView 
16                 android:layout_width="wrap_content"
17                 android:layout_height="wrap_content" 
18                 android:src="@drawable/image01" 
19                 android:gravity="center" />
20         </LinearLayout>
21         <!-- 第二个页面 -->
22         <LinearLayout 
23             android:layout_width="fill_parent"
24             android:layout_height="fill_parent" 
25             android:gravity="center">
26             <ImageView 
27                 android:layout_width="wrap_content"
28                 android:layout_height="wrap_content" 
29                 android:src="@drawable/image02"
30                 android:gravity="center" />
31         </LinearLayout>
32         <!-- 第三个页面 -->
33         <LinearLayout 
34             android:layout_width="fill_parent"
35             android:layout_height="fill_parent" 
36             android:gravity="center">
37             <ImageView 
38                 android:layout_width="wrap_content"
39                 android:layout_height="wrap_content" 
40                 android:src="@drawable/image03"
41                 android:gravity="center" />
42         </LinearLayout>
43         <!-- 第四个页面 -->
44         <LinearLayout 
45             android:layout_width="fill_parent"
46             android:layout_height="fill_parent" 
47             android:gravity="center">
48             <ImageView 
49                 android:layout_width="wrap_content"
50                 android:layout_height="wrap_content" 
51                 android:src="@drawable/image04"
52                 android:gravity="center" />
53         </LinearLayout>
54     </ViewFlipper>
55 </LinearLayout>

接着就是anim文件下动画：

in_leftright.xml

1 <?xml version="1.0" encoding="utf-8"?>
2 <set xmlns:android="http://schemas.android.com/apk/res/android" >
3     <translate
4         android:duration="500"
5         android:fromXDelta="-100%p"
6         android:toXDelta="0" />
7 </set>

in_rightleft.xml

1 <?xml version="1.0" encoding="utf-8"?>
2 <set xmlns:android="http://schemas.android.com/apk/res/android" >
3     <translate
4         android:duration="500"
5         android:fromXDelta="100%p"
6         android:toXDelta="0" />
7 </set>

out_rightleft.xml

1 <?xml version="1.0" encoding="utf-8"?>
2 <set xmlns:android="http://schemas.android.com/apk/res/android" >
3     <translate
4         android:duration="500"
5         android:fromXDelta="0"
6         android:toXDelta="100%p" />
7 </set>

out_leftright.xml

1 <?xml version="1.0" encoding="utf-8"?>
2 <set xmlns:android="http://schemas.android.com/apk/res/android" >
3     <translate
4         android:duration="500"
5         android:fromXDelta="0"
6         android:toXDelta="-100%p" />
7 </set>

最后呢就是手势操作的核心代码：

 1 package cn.cw.android.app;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.util.EventLog.Event;
 6 import android.view.MotionEvent;
 7 import android.widget.ViewFlipper;
 8 
 9 public class ViewFillperTestActivity extends Activity {
10     /** Called when the activity is first created. */
11 
12     private ViewFlipper flipper;
13     float startX;
14     @Override
15     public void onCreate(Bundle savedInstanceState) {
16         super.onCreate(savedInstanceState);
17         setContentView(R.layout.main);
18 
19         flipper = (ViewFlipper) findViewById(R.id.viewFlipper);
20         // flipper.startFlipping();
21 
22     }
23 
24     @Override
25     public boolean onTouchEvent(MotionEvent event) {
26 
27         
28         switch (event.getAction()) {
29         case MotionEvent.ACTION_DOWN:
30             System.out.println("下");
31             startX = event.getX();// 得到点下时x的坐标
32             break;
33         case MotionEvent.ACTION_UP:
34             if (event.getX() > startX) { // 向右滑动
35 
36                 flipper.setInAnimation(this, R.anim.in_leftright); 
37                 flipper.setOutAnimation(this, R.anim.out_leftright); 
38                 flipper.showNext();
39 
40             } else if (event.getX() < startX) { // 向左滑动 
41                 flipper.setInAnimation(this, R.anim.in_rightleft);
42                 flipper.setOutAnimation(this, R.anim.out_rightleft);
43                 flipper.showPrevious();
44             }
45 
46             break;
47 
48         }
49 
50         return super.onTouchEvent(event);
51     }
52 }