最简单的ViewFlipper实现图片跟随手势滑动

说到android的左右滑动效果我们可以说是在每个应用上面都可以看到这样的效果，不管是微博，还是QQ等。实现左右滑动的方式很多，有ViewPaer(不过这个和需要android-support-v4.jar的支持)，自定义实现Viewgroup，gallery等都可以达到这种效果。这里做下ViewFliper实现左右滑动的效果。

以下会会用到的技术有：
1、ViewFlipper
2、GestureDetector
3、Animation
第一次在iteye写博文，本人又是菜鸟，不喜勿喷，虚心听取建议。

原理：向左向右滑动主要是依赖手势来控制，手势向右滑动就调用 viewFlipper.showNext();方法，同理，向左滑动就会去调用viewFlipper.showPrevious();方法。
话不多少，直接上代码。

main_activity.xml:

<RelativeLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
    
    <ViewFlipper 
        android:id="@+id/viewFlipper"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"></ViewFlipper>

</RelativeLayout>

下面是MainActivity内容：

package com.zls.viewflipper;

import android.os.Bundle;
import android.app.Activity;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.Window;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.ViewFlipper;
/**
 * 这个程序的功能：手势滑动
 * @author zls
 *
 */
public class MainActivity extends Activity implements OnGestureListener{


	private Animation left_in,left_out,right_in,right_out;
	private ViewFlipper viewFilpper; 
	private GestureDetector detector;									//手势监听

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		this.requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		
		//动画效果
		left_in = AnimationUtils.loadAnimation(this, R.anim.left_in);
		left_out = AnimationUtils.loadAnimation(this, R.anim.left_out);
		right_in = AnimationUtils.loadAnimation(this, R.anim.right_in);
		right_out = AnimationUtils.loadAnimation(this, R.anim.right_out);
		
		//获得viewFlipper
		viewFilpper = (ViewFlipper) findViewById(R.id.viewFlipper);
		detector = new GestureDetector(this);
		
																		//给viewFlipper添加ImageView
		viewFilpper.addView(getImageView(R.drawable.lufei));
		viewFilpper.addView(getImageView(R.drawable.namei));
		viewFilpper.addView(getImageView(R.drawable.solong));
		
	}
	
																		//touch事件交给手势处理
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// TODO Auto-generated method stub
		return this.detector.onTouchEvent(event);
	}
	
	public ImageView getImageView(int id)
	{
		ImageView imageView = new ImageView(this);
		imageView.setImageResource(id);
		return imageView;
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onDown(MotionEvent e) {
		// TODO Auto-generated method stub
		return false;
	}

	@Override
	public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
			float velocityY) {
		if(e2.getX()-e1.getX()<-120)
		{
			viewFilpper.setInAnimation(left_in);
			viewFilpper.setOutAnimation(left_out);
			viewFilpper.showNext();
			return true;
		}
		else if(e2.getX()-e1.getX()>120){
			viewFilpper.setInAnimation(right_in);
			viewFilpper.setOutAnimation(right_out);
			viewFilpper.showPrevious();
			return true;
		}
		return false;
	}

	@Override
	public void onLongPress(MotionEvent e) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
			float distanceY) {
		// TODO Auto-generated method stub
		return false;
	}

	@Override
	public void onShowPress(MotionEvent e) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public boolean onSingleTapUp(MotionEvent e) {
		// TODO Auto-generated method stub
		return false;
	}

}

在res文件夹下新建anim文件夹，在里面建4个animation动画的xml文件，具体代码如下：
Left_in.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="100%p" android:toXDelta="0%p" android:duration="500"/>
    <alpha android:fromAlpha="0.1" android:toAlpha="1.0" android:duration="500"/>

</set>

Left_out.xnl:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0%p" android:toXDelta="-100%p" android:duration="500"/>
    <alpha android:fromAlpha="1.0" android:toAlpha="0.1" android:duration="500"/>

</set>

right_in.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="-100%p" android:toXDelta="0%p" android:duration="500"/>
    <alpha android:fromAlpha="0.1" android:toAlpha="1.0" android:duration="500"/>

</set>

right_out.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0%p" android:toXDelta="100%p" android:duration="500"/>
    <alpha android:fromAlpha="1.0" android:toAlpha="0.1" android:duration="500"/>

</set>