使用手势实现翻页效果

上一篇博客我们讨论了手势侦测类GestureDetector,这次我们继续一个实例，

用手势来实现翻页，这样我们就可以理解我们在手机上翻照片的原理了。

首先界面是ViewFlipper实现的，我们简单地看一下界面代码（其实就是之前哪个代码）：

<ViewFlipper
            android:id="@+id/mViewFliper_vf"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
				            <LinearLayout 
				        android:layout_width="match_parent"
				        android:layout_height="wrap_content">
				        <ImageView 
				            android:layout_width="match_parent"
				            android:layout_height="160dip"
				            android:background="@drawable/default_pic_1"/>
				    </LinearLayout>
				      <LinearLayout 
				        android:layout_width="match_parent"
				        android:layout_height="wrap_content"
				        android:orientation="vertical">
				        <ImageView 
				            android:layout_width="match_parent"
				            android:layout_height="160dip"
				            android:background="@drawable/default_pic_2"/>
				    </LinearLayout>
				      <LinearLayout 
				        android:layout_width="match_parent"
				        android:layout_height="wrap_content"
				        android:orientation="vertical">
				        <ImageView 
				            android:layout_width="match_parent"
				            android:layout_height="160dip"
				            android:background="@drawable/default_pic_3"/>
				    </LinearLayout>
				      <LinearLayout 
				        android:layout_width="match_parent"
				        android:layout_height="wrap_content"
				        android:orientation="vertical">
				        <ImageView 
				            android:layout_width="match_parent"
				            android:layout_height="160dip"
				            android:background="@drawable/default_pic_4"/>
				    </LinearLayout>
        </ViewFlipper>

ViewFlipper中设计四张图片，在同一个界面内用来切换。

再来看Activity代码：

public class TestUIActivity extends Activity implements OnGestureListener, OnTouchListener {
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.main);
        date_TextView = (TextView) findViewById(R.id.home_date_tv);
        date_TextView.setText(getDate());
      
	//视图切换
        viewFlipper = (ViewFlipper) findViewById(R.id.mViewFliper_vf);
        mGestureDetector = new GestureDetector(this);
        viewFlipper.setOnTouchListener(this);	//设置触摸监听器
        viewFlipper.setLongClickable(true);		
        viewFlipper.setOnClickListener(clickListener);	//设置按下监听器
        displayRatio_selelct(currentPage);
        
        
        MyScrollView myScrollView = (MyScrollView) findViewById(R.id.viewflipper_scrollview);
        myScrollView.setOnTouchListener(onTouchListener);
        //设置手势侦探
        myScrollView.setGestureDetector(mGestureDetector);
        thread.start();
    }
private OnTouchListener onTouchListener = new OnTouchListener() {
		
		@Override
		public boolean onTouch(View v, MotionEvent event) {
			// TODO Auto-generated method stub
			return mGestureDetector.onTouchEvent(event);
		}
	};


//重写OnGestureListener的一些方法
	//
	@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) {
		// TODO Auto-generated method stub
		Log.e("view", "onFling");
		if (e1.getX() - e2.getX()> FLING_MIN_DISTANCE  
                && Math.abs(velocityX) > FLING_MIN_VELOCITY ) {
			Log.e("fling", "left");
			showNextView();
			showNext = true;
			return true;
		} else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE  
                && Math.abs(velocityX) > FLING_MIN_VELOCITY){
			Log.e("fling", "right");
			showPreviousView();
			showNext = false;
			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) {
		
	}
	@Override
	public boolean onSingleTapUp(MotionEvent e) {
		return false;
	}

这样，当我们在屏幕上交互时，比如从左向右滑动或者从右向左滑动，屏幕图片发生改变：

滑动手指：

这样就实现了翻页效果。