使用手势实现翻页效果

上一篇博客我们讨论了手势侦测类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() {@Overridepublic boolean onTouch(View v, MotionEvent event) {// TODO Auto-generated method stubreturn mGestureDetector.onTouchEvent(event);}};//重写OnGestureListener的一些方法//@Overridepublic boolean onDown(MotionEvent e) {// TODO Auto-generated method stubreturn false;}@Overridepublic boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY) {// TODO Auto-generated method stubLog.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;}@Overridepublic void onLongPress(MotionEvent e) {}@Overridepublic boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,float distanceY) {return false;}@Overridepublic void onShowPress(MotionEvent e) {}@Overridepublic boolean onSingleTapUp(MotionEvent e) {return false;}

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

滑动手指：

这样就实现了翻页效果。