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;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);flipper=(ViewFlipper) findViewById(R.id.flipper);//动态导入的方式为ViewFlipper加入自Viewfor(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();//开始播放}/*手指滑动导航*/@Overridepublic 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;}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.main, menu);return true;}}

部分代码分析：

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

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

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