简单的滑动切换页面并且加上类似Ipone的切换效果-优快云博客

本文介绍如何使用ViewFlipper实现视图切换效果，包括通过手势控制切换、设置切换动画及响应按钮触摸事件等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Java代码

public class Main extends Activity implements OnGestureListener,
		OnTouchListener {
	// 一般不直接使用ViewAnimator而是使用它的两个子类ViewFlipper和ViewSwitcher。ViewFlipper可以用来指定FrameLayout内多个View之间的切换效果，可以一次指定也可以每次切换的时候都指定单独的效果。该类额外提供了如下几个函数：
	// isFlipping： 用来判断View切换是否正在进行
	// setFilpInterval：设置View之间切换的时间间隔
	// startFlipping：使用上面设置的时间间隔来开始切换所有的View，切换会循环进行
	// stopFlipping: 停止View切换
	private ViewFlipper viewFlipper;
	private GestureDetector gestureDetector;

	private Button pre1Button;
	private Button next1Button;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		init();
	}

	private void init() {
		pre1Button = (Button) findViewById(R.id.preButton1);
		next1Button = (Button) findViewById(R.id.nextButton1);
		pre1Button.setOnTouchListener(this);
		next1Button.setOnTouchListener(this);
		gestureDetector = new GestureDetector(this);
		viewFlipper = (ViewFlipper) this.findViewById(R.id.ViewFlipper);
	}

	// GestureDetector.OnDoubleTapListener：用来通知DoubleTap事件，类似于鼠标的双击事件，该接口有如下三个回调函数：
	//	 
	// 1. onDoubleTap(MotionEvent e)：通知DoubleTap手势，
	// 2. onDoubleTapEvent(MotionEvent
	// e)：通知DoubleTap手势中的事件，包含down、up和move事件（这里指的是在双击之间发生的事件，例如在同一个地方双击会产生DoubleTap手势，而在DoubleTap手势里面还会发生down和up事件，这两个事件由该函数通知）；
	// 3. onSingleTapConfirmed(MotionEvent
	// e)：用来判定该次点击是SingleTap而不是DoubleTap，如果连续点击两次就是DoubleTap手势，如果只点击一次，OPhone系统等待一段时间后没有收到第二次点击则判定该次点击为SingleTap而不是DoubleTap，然后触发SingleTapConfirmed事件。
	public boolean onDoubleTap(MotionEvent e) {
		if (viewFlipper.isFlipping()) {
			viewFlipper.stopFlipping();
		} else {
			viewFlipper.startFlipping();
		}
		return true;
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		return this.gestureDetector.onTouchEvent(event);
	}

	@Override
	public boolean onDown(MotionEvent e) {
		// down事件
		return false;
	}

	public boolean onFling(//
			MotionEvent e1, // e1:第一个ACTION_DOWN事件（手指按下的那一点）
			MotionEvent e2, // e2:最后一个ACTION_MOVE事件 （手指松开的那一点）
			float velocityX,// velocityX:手指在x轴移动的速度 单位：像素/秒
			float velocityY)// velocityY:手指在y轴移动的速度 单位：像素/秒
	{
		// 滑动手势事件
		if (e1.getX() - e2.getX() > 60) {// 向右滑动，下一页
			// setOutAnimation: 设置View退出屏幕时候使用的动画，参数setInAnimation函数一样。
			this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,
					R.anim.zoomin));
			this.viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,
					R.anim.zoomout));
			this.viewFlipper.showNext();// 调用该函数来显示FrameLayout里面的下一个View。
			return true;
		} else if (e1.getX() - e2.getX() < -60) {// 向左滑动，上一页
			this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,
					R.anim.zoomin));
			this.viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,
					R.anim.zoomout));
			this.viewFlipper.showPrevious();// 调用该函数来显示FrameLayout里面的上一个View。
			return true;
		}
		return false;
	}

	@Override
	public void onLongPress(MotionEvent e) {
		// 长按事件
	}

	@Override
	public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
			float distanceY) {
		// 在屏幕上拖动事件。
		return false;
	}

	@Override
	public void onShowPress(MotionEvent e) {
		// down事件发生而move或则up还没发生前触发该事件；
	}

	@Override
	public boolean onSingleTapUp(MotionEvent e) {
		// 一次点击up事件；
		return false;
	}

	// 按钮触摸事件
	public boolean onTouch(View v, MotionEvent event) {
		switch (v.getId()) {
		case R.id.preButton1:
			if (event.getAction() == MotionEvent.ACTION_DOWN) { // 按钮按下背景图片
				// pre1Button.setBackgroundResource(R.drawable.pre_button1);
			}
			// 按钮up后设置背景图片，并滑动到前一页面
			else if (event.getAction() == MotionEvent.ACTION_UP) {
				// pre1Button.setBackgroundResource(R.drawable.pre_button);
				// flipper.setInAnimation(AnimationUtils.loadAnimation(Main.this,
				// R.anim.push_right_in));
				//
				// flipper.setOutAnimation(AnimationUtils.loadAnimation(Main.this,R.anim.push_right_out));
				viewFlipper.showPrevious();
			}
			break;
		case R.id.nextButton1:
			if (event.getAction() == MotionEvent.ACTION_DOWN) {
				// next1Button.setBackgroundResource(R.drawable.next_button1);
			}
			// 按钮up后设置背景图片，并滑动到后一页面
			else if (event.getAction() == MotionEvent.ACTION_UP) {
				// next1Button.setBackgroundResource(R.drawable.next_button);
				// flipper.setInAnimation(AnimationUtils.loadAnimation(Main.this,
				// R.anim.push_left_in));
				//
				// flipper.setOutAnimation(AnimationUtils.loadAnimation(Main.this,R.anim.push_left_out));
				viewFlipper.showNext();
			}
			break;

		default:
			break;
		}
		return false;
	}
}

Xml代码

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<ViewFlipper android:id="@+id/ViewFlipper"
		android:layout_width="fill_parent" android:layout_height="fill_parent">
		<!-- 第 1 页 -->
		<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
			android:orientation="vertical" android:layout_width="fill_parent"
			android:background="#FFFFFF" android:layout_height="fill_parent">
			<TextView android:text="第 1 页" android:textSize="35dp"
				android:textColor="#000000" android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:layout_x="115dp"
				android:layout_y="20dp" />
		</AbsoluteLayout>
		<!-- 第 2 页 -->
		<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
			android:orientation="vertical" android:layout_width="fill_parent"
			android:background="#FFFF00" android:layout_height="fill_parent">
			<TextView android:text="第 2 页" android:textSize="35dp"
				android:textColor="#000000" android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:layout_x="120dp"
				android:layout_y="20dp" />
		</AbsoluteLayout>
		<!-- 第 3 页 -->
		<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
			android:orientation="vertical" android:layout_width="fill_parent"
			android:background="#99CC33" android:layout_height="fill_parent">
			<TextView android:text="第 3 页" android:textSize="35dp"
				android:textColor="#000000" android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:layout_x="120dp"
				android:layout_y="20dp" />
		</AbsoluteLayout>
	</ViewFlipper>
	<Button android:layout_width="wrap_content" android:text="上一页"
		android:gravity="center" android:textSize="20sp"
		android:layout_height="40dp" android:id="@+id/preButton1"
		android:layout_x="101dp" android:layout_y="300dp" />
	<Button android:layout_width="wrap_content" android:text="下一页"
		android:layout_height="40dp" android:id="@+id/nextButton1"
		android:gravity="center" android:textSize="20sp" android:layout_x="182dp"
		android:layout_y="300dp" />
</AbsoluteLayout>