ViewFlipper的使用

2010 - 01 - 17

ViewFlipper的使用

文章分类:移动开发

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

 

ViewFlipper示例

记住， ViewFlipper是继承至FrameLayout的，所以它是一个Layout里面可以放置多个View。在示例中定义一个ViewFlipper，里面包含三个ViewGroup作为示例的三个屏幕，每个ViewGroup中包含一个按钮和一张图片，点击按钮则显示下一个屏幕。代码如下（res/layout/main.xml）：

view plain copy to clipboard print ?

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进出使用的动画效果。动画效果定义如下：

view plain copy to clipboard print ?

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）：

view plain copy to clipboard print ?

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(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接口：

 

 

view plain copy to clipboard print ?

1. class TestActivity extends Activity implements OnGestureListener , OnDoubleTapListener  

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

view plain copy to clipboard print ?

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中实现双击自动切换的效果，再次双击则停止：

   

view plain copy to clipboard print ?

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 =  new GestureDetector( this);

 

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

view plain copy to clipboard print ?

1.     public GestureDetector(OnGestureListener listener) {   
2.         this(null, listener, null);   
3. }  

 

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

   

view plain copy to clipboard print ?

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  instanceof OnDoubleTapListener没有？现在明白了吧。