使用ViewFlipper和translate动画实现滑屏切换画面——translate

 

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切换

 

注意这里实现的动画是在同一个Activity，不同的画面来自ViewFlipper

第一步，在layout文件夹下创建自己的自己的包含ViewFipper控件的布局文件，其中ViewFlipper中包裹的每一个LinearLayout代表一个画面，默认显示第一个画面，
可以使用ViewFlipper中的showNext()，查看下一个画面，使用showPrevious()方法查看之前的一个画面
我定义的布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 xmlns:android="http://schemas.android.com/apk/res/android">
 <ViewFlipper
  android:id="@+id/viewFlipper"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  
  <!-- 这是当前页第一页 -->
  <LinearLayout
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content">
   <TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="这是第一页"/>
  </LinearLayout>
  
  <!-- 这是第二页 -->
  <LinearLayout
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:background="#FF00FF00">
   <TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="这是第二页"/>
  </LinearLayout>
 </ViewFlipper>
</LinearLayout> 

 

第二步，定义translate动画，分别定义从左向右，和从右向左滑动的动画，注意动画的起始位置和结束位置
动画文件如下：
（1）in_lefttoright.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
 <!-- 定义从左向右滑动时，后一页进入的动画 -->
 <translate 
 android:fromXDelta="-100%"
 android:toXDelta="0"
 android:duration="3000"/>
</set>

（2）in_righttoleft.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
 <!-- 定义从右向左滑动时，后一页进入的动画 -->
 <translate 
 android:fromXDelta="100%"
 android:toXDelta="0"
 android:duration="3000"/>
</set>
 （3）out_lefttoright.xml
 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
 <!-- 定义从左向右滑动时，当前的页面出去的动画 -->
 <translate 
 android:fromXDelta="0"
 android:toXDelta="100%"
 android:duration="3000"/>
</set>

（四）out_righttoleft.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
 <!-- 定义从右向左滑动时，当前页出去的动画 -->
 <translate 
 android:fromXDelta="0"
 android:toXDelta="-100%"
 android:duration="3000"/>
</set>

 

第三步，在Activity中应用我们定义好的动画，调用ViewFlipper中的setInAnimation(Context context,Animation animation)和setOutAnimation(...)方法
注意要在Activity中复写onTouchEvent(MotionEvent event)方法，用来实现滑屏的效果
package com.heima.android.listview;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.ViewFlipper;

public class MyAnimation extends Activity {
 ViewFlipper viewFlipper ;
 float startX;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.viewflipper);
  viewFlipper = (ViewFlipper)this.findViewById(R.id.viewFlipper);
 }
 /**
  * 处理用户滑屏事件
  */
 @Override
 public boolean onTouchEvent(MotionEvent event) {
  switch (event.getAction()) {
  case MotionEvent.ACTION_DOWN:
   startX = event.getX();
   break;

  case MotionEvent.ACTION_UP:
   if(event.getX()>startX){
    viewFlipper.setInAnimation(this, R.anim.in_lefttoright);//定义下一页进来时的动画
    viewFlipper.setOutAnimation(this,R.anim.out_lefttoright);//定义当前页出去的动画
    viewFlipper.showNext();//显示下一页
   }else if(event.getX()<startX){
    viewFlipper.setInAnimation(this, R.anim.in_righttoleft);
    viewFlipper.setOutAnimation(this,R.anim.out_righttoleft);
    viewFlipper.showPrevious();//显示上一页
   }
   break;
  }
  return super.onTouchEvent(event);
 }
 

}