Android中利用ViewFliper實現屏幕切換效果

本示例是用ViewFliper實現屏幕切換圖片的效果，手指滑動就實現圖片的切換，主要實現效果如下：

程序結構圖：

ViewFliper中的代碼

package com.scnu.mc.myviewfliper;

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

public class ViewFliper extends Activity {

	ViewFlipper viewFlipper = null;
	float startX;

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

		init();
	}

	private void init() {
		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_left2right);
				viewFlipper.setOutAnimation(this, R.anim.out_left2right);
				viewFlipper.showNext();
			} else if (event.getX() < startX) { // 向左滑動
				viewFlipper.setInAnimation(this, R.anim.in_right2left);
				viewFlipper.setOutAnimation(this, R.anim.out_right2left);
				viewFlipper.showPrevious();
			}
			break;
		}

		return super.onTouchEvent(event);
	}

}

main.xml代碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent" android:layout_height="fill_parent"
	android:orientation="vertical">
	<ViewFlipper android:id="@+id/viewFlipper"
		android:layout_width="fill_parent" android:layout_height="fill_parent">
		<!-- 第一個頁面 -->
		<LinearLayout android:layout_width="fill_parent"
			android:layout_height="fill_parent" android:gravity="center">
			<ImageView android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:src="@drawable/a1" />
		</LinearLayout>
		<!-- 第二個頁面 -->
		<LinearLayout android:layout_width="fill_parent"
			android:layout_height="fill_parent" android:gravity="center">
			<ImageView android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:src="@drawable/a2"
				android:gravity="center" />
		</LinearLayout>
		<!-- 第三個頁面 -->
		<LinearLayout android:layout_width="fill_parent"
			android:layout_height="fill_parent" android:gravity="center">

			<ImageView android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:src="@drawable/a3"
				android:gravity="center" />
		</LinearLayout>
		<!-- 第四個頁面 -->
		<LinearLayout android:layout_width="fill_parent"
			android:layout_height="fill_parent" android:gravity="center">

			<ImageView android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:src="@drawable/a4"
				android:gravity="center" />
		</LinearLayout>
	</ViewFlipper>
</LinearLayout>

4個動畫效果的xml文件

in_left2right----從左到右進入屏幕

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

in_right2left----從右至左進入屏幕

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

out_left2right----從左到右退出屏幕

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

out_right2left----從右至左退出屏幕

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

注：fromXDelta和toXDelta代表控件相對應parent的偏移距離，個人理解是"100%p"代表控件向右跑到屏幕的外面，"-100%p"代表控件向左跑到屏幕的外部。下面附上個人理解的圖。