Android-ViewFlipper动画导航（可手动翻页）

目标效果：

     

一共四个导航页面，程序运行自动播放，当手指向左翻或者向右翻，也能对应显示导航页面。

1.activity_main.xml页面放置ViewFlipper控件。

activity_main.xml页面：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
	
    <ViewFlipper 
        android:id="@+id/flipper"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
    </ViewFlipper>

</LinearLayout>

2.在res文件夹下新建animator文件夹，用于存放编写的动画效果的xml页面。一共有四个页面，分别是left_in.xml,left_out.xml,right_in.xml,right_out.xml页面，代表左进入，左出去，右进入，右出去，代码基本相似，就是起始坐标和终止坐标还有透明度的变化需要改动，以left_in.xml页面为例。

left_in.xml页面：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 
    	fromXDelta为动画起始时X坐标位置
    	toXDelta为动画结束时X坐标位置
    	duration为动画完成移动需要的时间
    -->
    <translate
    	android:duration="2000"
    	android:fromXDelta="-100%"
    	android:toXDelta="0"/>
   
    <!--
     	fromAlpha为动画起始时透明度
     	toAlpha为动画结束时透明度
     	duration为透明度完成改变需要的时间
    -->
    <alpha
        android:fromAlpha="0.3"
        android:toAlpha="1"
        android:duration="2000"/>
</set>

3.MainActivity.java页面处理动画播放以及滑动事件。

MainActivity.java页面：

package com.example.viewflipper;

import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.view.MotionEvent;
import android.widget.ImageView;
import android.widget.ViewFlipper;

public class MainActivity extends Activity {

	private ViewFlipper flipper;
	private int[]resId={R.drawable.guide_1,R.drawable.guide_2,R.drawable.guide_3,R.drawable.guide_4};
	private float X;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		flipper=(ViewFlipper) findViewById(R.id.flipper);
		
		//动态导入的方式为ViewFlipper加入自View
		for(int i=0;i<resId.length;i++){
			flipper.addView(getImageView(resId[i]));
		}
		
		/*自动导航*/
		flipper.setInAnimation(this,R.animator.right_in);//进入时图片效果
		flipper.setOutAnimation(this,R.animator.left_out);//出去时图片效果
		flipper.setFlipInterval(3000);//视图切换的时间间隔（移动时间+停留时间）
		flipper.startFlipping();//开始播放
	}
	
	/*手指滑动导航*/
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		switch(event.getAction()){
		//手指点到屏幕上
		case MotionEvent.ACTION_DOWN:{
			X=event.getX(); 
			break;
		}
		//手指滑动
		case MotionEvent.ACTION_MOVE:{
			//向右滑动看前一页
			if(event.getX()-X>100){
				flipper.stopFlipping();//手动翻动时暂停播放
				flipper.setInAnimation(this,R.animator.left_in);
				flipper.setOutAnimation(this,R.animator.right_out);
				flipper.showPrevious();//查看前一页
				flipper.startFlipping();//开始播放
			}
			//向左滑动看后一页
			if(X-event.getX()>100){
				flipper.stopFlipping();//手动翻动时暂停播放
				flipper.setInAnimation(this,R.animator.right_in);
				flipper.setOutAnimation(this,R.animator.left_out);
				flipper.showNext();//查看后一页
				flipper.startFlipping();//开始播放
			}
			break;
		}
		//手指抬起
		case MotionEvent.ACTION_UP:{
			break;
		}
		
		}
		
		flipper.setInAnimation(this,R.animator.right_in);//进入时图片效果
		flipper.setOutAnimation(this,R.animator.left_out);//出去时图片效果
		flipper.setFlipInterval(3000);//视图切换的时间间隔（移动时间+停留时间）
		
		return super.onTouchEvent(event);
	}
	
	private ImageView getImageView(int resId){
		ImageView image=new ImageView(this);
		image.setBackgroundResource(resId);//全屏显示图片
		return image;
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

部分代码分析：

（1）.滑动事件中判断向左或者向右后，需要让自动播放停止，不然手动翻的页面和自动播放的页面混乱影响效果，当显示完后再次进行播放。

（2）.判断手指滑动方向后，跳出switch语句，需要再重新设置一下动画效果，因为动画默认是从左到右播放的，当向左翻查看左边页面时，如果不重新设置，导航会一直向左播放。

4.运行就可以显示目标效果了。