Android中利用ViewFliper实现屏幕切换效果

程序结构图：

ViewFliper中的代码

1.package com.scnu.mc.myviewfliper;
2.
3.import Android.app.Activity;
4.import android.os.Bundle;
5.import android.view.MotionEvent;
6.import android.widget.ViewFlipper;
7.
8.public class ViewFliper extends Activity {
9.
10.    ViewFlipper viewFlipper = null;
11.    float startX;
12.
13.    @Override
14.    public void onCreate(Bundle savedInstanceState) {
15.        super.onCreate(savedInstanceState);
16.        setContentView(R.layout.main);
17.
18.        init();
19.    }
20.
21.    private void init() {
22.        viewFlipper = (ViewFlipper) this.findViewById(R.id.viewFlipper);
23.    }
24.
25.    @Override
26.    public boolean onTouchEvent(MotionEvent event) {
27.        switch (event.getAction()) {
28.        case MotionEvent.ACTION_DOWN:
29.            startX = event.getX();
30.            break;
31.        case MotionEvent.ACTION_UP:
32.
33.            if (event.getX() > startX) { // 向右滑动
34.                viewFlipper.setInAnimation(this, R.anim.in_left2right);
35.                viewFlipper.setOutAnimation(this, R.anim.out_left2right);
36.                viewFlipper.showNext();
37.            } else if (event.getX() < startX) { // 向左滑动
38.                viewFlipper.setInAnimation(this, R.anim.in_right2left);
39.                viewFlipper.setOutAnimation(this, R.anim.out_right2left);
40.                viewFlipper.showPrevious();
41.            }
42.            break;
43.        }
44.
45.        return super.onTouchEvent(event);
46.    }
47.
48.}

main.xml代码

1.<?xml version="1.0" encoding="utf-8"?>
2.<LinearLayout xmlns:Android="http://schemas.android.com/apk/res/android"
3.    Android:layout_width="fill_parent" android:layout_height="fill_parent"
4.    Android:orientation="vertical">
5.    <ViewFlipper Android:id="@+id/viewFlipper"
6.        Android:layout_width="fill_parent" android:layout_height="fill_parent">
7.        <!-- 第一个页面 -->
8.        <LinearLayout Android:layout_width="fill_parent"
9.            Android:layout_height="fill_parent" android:gravity="center">
10.            <ImageView Android:layout_width="wrap_content"
11.                Android:layout_height="wrap_content" android:src="@drawable/a1" />
12.        </LinearLayout>
13.        <!-- 第二个页面 -->
14.        <LinearLayout Android:layout_width="fill_parent"
15.            Android:layout_height="fill_parent" android:gravity="center">
16.            <ImageView Android:layout_width="wrap_content"
17.                Android:layout_height="wrap_content" android:src="@drawable/a2"
18.                Android:gravity="center" />
19.        </LinearLayout>
20.        <!-- 第三个页面 -->
21.        <LinearLayout Android:layout_width="fill_parent"
22.            Android:layout_height="fill_parent" android:gravity="center">
23.
24.            <ImageView Android:layout_width="wrap_content"
25.                Android:layout_height="wrap_content" android:src="@drawable/a3"
26.                Android:gravity="center" />
27.        </LinearLayout>
28.        <!-- 第四个页面 -->
29.        <LinearLayout Android:layout_width="fill_parent"
30.            Android:layout_height="fill_parent" android:gravity="center">
31.
32.            <ImageView Android:layout_width="wrap_content"
33.                Android:layout_height="wrap_content" android:src="@drawable/a4"
34.                Android:gravity="center" />
35.        </LinearLayout>
36.    </ViewFlipper>
37.</LinearLayout>

4个动画效果的xml文件

in_left2right----从左到右进入屏幕

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

in_right2left----从右至左进入屏幕

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

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

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

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

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

注：fromXDelta和toXDelta代表控件相对应parent的偏移距离，个人理解是"100%p"代表控件向右跑到屏幕的外面，"-100%p"代表控件向左跑到屏幕的外部。下面附上个人理解的图。