用ViewFlipper和GestureDetector实现手势翻页的效果

首先在布局文件中要有个ViewFlipper，这个可以用来加载View。可以在加载的View中做动画，但只能显示一个View。具体的API中是这样说的：

　　　　Simple ViewAnimator that will animate between two or more views that have been added to it. Only one child is shown at a time. If requested, can automatically flip between each child at a regular interval.

　　所以我在布局文件中放一个ViewFlipper就可以了，然后在向里面加入View：

 

xml version="1.0" encoding="utf-8"?>
 <LinearLayout 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/myviewflipper"
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    />
 LinearLayout>

 

 

　　在代码中加入5个View，TextView是这样的：

 

 

  private TextView addTextView(String str) {
  TextView tv = new TextView(this);
  tv.setText(str);
  tv.setGravity(1);
  return tv;
  }

 

 

 

  vf.addView(addTextView("step1"));
  vf.addView(addTextView("step2"));
  vf.addView(addTextView("step3"));
  vf.addView(addTextView("step4"));
  vf.addView(addTextView("step5"));

 

继承OnGestureListener，同时重写一个onTouchEvent方法：

 

public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
return this.gd.onTouchEvent(event);
}

 

 

　　然后在onFling方法里面做操作，让ViewFlipper显示上一个View还是显示下一个View：

 

public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
            float velocityY) {
        // TODO Auto-generated method stub
        if((e1.getX() - e2.getX()) > 100) {
            this.vf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));
            this.vf.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
            this.vf.showPrevious();
            return true;
        } else if((e1.getX() -e2.getX()) < -100) {
            this.vf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
            this.vf.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));
            this.vf.showNext();
            return true;
        }
        return false;
    }

 

 

　　同时在里面加入了动画，分为从左边进入，从左边出去，从右边进入，从右边出去：

　　animation_left_in:

 

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>

 

 

　　animation_left_out:

 

 

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>

 

 

　　animation_right_in:

 

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>

 

 

　　animation_right_out:

 

 

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>

 

 

　　Activity:

 

package com.android.test;

import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.animation.AnimationUtils;
import android.widget.TextView;
import android.widget.ViewFlipper;

public class TestViewFlipActivity extends Activity implements OnGestureListener {
    
    private GestureDetector gd;
    private ViewFlipper vf;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        gd = new GestureDetector(this);
        vf = (ViewFlipper) findViewById(R.id.myviewflipper);
        vf.addView(addTextView("step1"));
        vf.addView(addTextView("step2"));
        vf.addView(addTextView("step3"));
        vf.addView(addTextView("step4"));
        vf.addView(addTextView("step5"));
    }

    private TextView addTextView(String str) {
        TextView tv = new TextView(this);
        tv.setText(str);
        tv.setGravity(1);
        return tv;
    }
    
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // TODO Auto-generated method stub
        return this.gd.onTouchEvent(event);
    }
    
    @Override
    public boolean onDown(MotionEvent arg0) {
        // TODO Auto-generated method stub
        return false;
    }

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
            float velocityY) {
        // TODO Auto-generated method stub
        if((e1.getX() - e2.getX()) > 100) {
            this.vf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));
            this.vf.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
            this.vf.showPrevious();
            return true;
        } else if((e1.getX() -e2.getX()) < -100) {
            this.vf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
            this.vf.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));
            this.vf.showNext();
            return true;
        }
        return false;
    }

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

    @Override
    public boolean onScroll(MotionEvent arg0, MotionEvent arg1, float arg2,
            float arg3) {
        // TODO Auto-generated method stub
        return false;
    }

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

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