Android利用ViewFlipper实现屏幕切换动画效果


1、屏幕切换指的是在同一个Activity内屏幕见的切换，最长见的情况就是在一个FrameLayout内有多个页面，比如一个系统设置页面；一个个性化设置页面。 2、介绍ViewFilpper类

ViewFlipper

extends ViewAnimator
java.lang.Object
   ↳ Android.view.View

    ↳ android.view.ViewGroup
   ↳ android.widget.FrameLayout

   ↳ android.widget.ViewAnimator


   ↳ android.widget.ViewFlipper

Class Overview

Simple ViewAnimator that will animate between two or more views that have been added to it. Only one child is shown at a time. If requested, can automatically flip between each child at a regular interval.

意思是：简单的ViewAnimator之间,两个或两个以上的view加上动画效果。只有一个小孩会显示在一个时间。如果需要,每个孩子能自动翻转之间在固定的时间间隔。
该类继承了Framelayout类，ViewAnimator类的作用是为FrameLayout里面的View切换提供动画效果。

该类有如下几个和动画相关的函数：

 setInAnimation：设置View进入屏幕时候使用的动画，该函数有两个版本，一个接受单个参数，类型为android.view.animation.Animation；一个接受两个参数，类型为Context和int，分别为Context对象和定义Animation的resourceID。  

 setOutAnimation: 设置View退出屏幕时候使用的动画，参数setInAnimation函数一样。

showNext： 调用该函数来显示FrameLayout里面的下一个View。

showPrevious： 调用该函数来显示FrameLayout里面的上一个View。

3、首选看一下定义四个动画的xml文件： in_leftright.xml——从左到右进入屏幕 [html]
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.     <translate  
  4.         android:duration="3000"  
  5.         android:fromXDelta="-100%p"  
  6.         android:toXDelta="0" />  
  7. </set>  
out_leftright.xml——从左到右出去屏幕 [html]
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.     <translate  
  4.         android:duration="3000"  
  5.         android:fromXDelta="0"  
  6.         android:toXDelta="100%p" />  
  7. </set>  
in_rightleft.xml——从右到左进入屏幕 [html]
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.     <translate  
  4.         android:duration="3000"  
  5.         android:fromXDelta="100%p"  
  6.         android:toXDelta="0" />  
  7. </set>  

out_rightleft.xml——从右到左出去屏幕 [html]
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.     <translate  
  4.         android:duration="3000"  
  5.         android:fromXDelta="100%p"  
  6.         android:toXDelta="0" />  
  7. </set>  
4、定义main.xml文件 [html]
  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" android:layout_height="fill_parent"  
  4.     android:orientation="vertical">  
  5.     <ViewFlipper android:id="@+id/viewFlipper"  
  6.         android:layout_width="fill_parent" android:layout_height="fill_parent">  
  7.         <!-- 第一个页面 -->  
  8.         <LinearLayout android:layout_width="fill_parent"  
  9.             android:layout_height="fill_parent" android:gravity="center">  
  10.             <ImageView android:layout_width="wrap_content"  
  11.                 android:layout_height="wrap_content" android:src="@drawable/a1" />  
  12.         </LinearLayout>  
  13.         <!-- 第二个页面 -->  
  14.         <LinearLayout android:layout_width="fill_parent"  
  15.             android:layout_height="fill_parent" android:gravity="center">  
  16.             <ImageView android:layout_width="wrap_content"  
  17.                 android:layout_height="wrap_content" android:src="@drawable/a2"  
  18.                 android:gravity="center" />  
  19.         </LinearLayout>  
  20.         <!-- 第三个页面 -->  
  21.         <LinearLayout android:layout_width="fill_parent"  
  22.             android:layout_height="fill_parent" android:gravity="center">  
  23.   
  24.             <ImageView android:layout_width="wrap_content"  
  25.                 android:layout_height="wrap_content" android:src="@drawable/a3"  
  26.                 android:gravity="center" />  
  27.         </LinearLayout>  
  28.         <!-- 第四个页面 -->  
  29.         <LinearLayout android:layout_width="fill_parent"  
  30.             android:layout_height="fill_parent" android:gravity="center">  
  31.   
  32.             <ImageView android:layout_width="wrap_content"  
  33.                 android:layout_height="wrap_content" android:src="@drawable/a4"  
  34.                 android:gravity="center" />  
  35.         </LinearLayout>  
  36.     </ViewFlipper>  
  37. </LinearLayout>  
5、java代码实现：
[java]
  1. public class SwitchTest2Activity extends Activity {  
  2.   
  3.     ViewFlipper viewFlipper = null;  
  4.     float startX;  
  5.   
  6.     public void onCreate(Bundle savedInstanceState) {  
  7.         super.onCreate(savedInstanceState);  
  8.         setContentView(R.layout.main);  
  9.   
  10.         init();  
  11.     }  
  12.   
  13.     private void init() {  
  14.         viewFlipper = (ViewFlipper) this.findViewById(R.id.viewFlipper);  
  15.     }  
  16.   
  17.     public boolean onTouchEvent(MotionEvent event) {  
  18.         switch (event.getAction()) {  
  19.         case MotionEvent.ACTION_DOWN:  
  20.             startX = event.getX();  
  21.             break;  
  22.         case MotionEvent.ACTION_UP:  
  23.   
  24.             if (event.getX() > startX) { // 向右滑动   
  25.                 viewFlipper.setInAnimation(this, R.anim.in_leftright);  
  26.                 viewFlipper.setOutAnimation(this, R.anim.out_leftright);  
  27.                 viewFlipper.showNext();  
  28.             } else if (event.getX() < startX) { // 向左滑动   
  29.                 viewFlipper.setInAnimation(this, R.anim.in_rightleft);  
  30.                 viewFlipper.setOutAnimation(this, R.anim.out_rightleft);  
  31.                 viewFlipper.showPrevious();  
  32.             }  
  33.             break;  
  34.         }  
  35.   
  36.         return super.onTouchEvent(event);  
  37.     }  
  38.   
  39. }  
6、效果图： 在这里看不出效果图，我贴几张图片吧！！  从左向右滑滑到的结果

相关内容