Android模擬翻書效果

 在android中實現手勢翻頁效果，主要用到ViewFlipper和GestureDetector.
ViewFlipper變化當前顯示內容,GestureDetector監聽手勢. 用於多頁的展示非常酷.

         以下是簡略說明：

         首先創建工程：TestFlip,創建主Activity：TestFlip.
         在res/layout/main.xml中添加flipper信息，如下：

<?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/ViewFlipper01"
        android:layout_width="fill_parent" android:layout_height="fill_parent">
    </ViewFlipper>
</LinearLayout>

         然後將TestFlip實現OnGestureListener接口,並實現所有抽象方法,然後開始改造這個類.
首先,聲明兩個私有成員.

private ViewFlipper flipper;//ViewFlipper實例
private GestureDetector detector;//觸摸監聽實例

         然後在onCreate方法中添加成員初始化.

detector = new GestureDetector(this);//初始化觸摸探測
flipper = (ViewFlipper) this.findViewById(R.id.ViewFlipper01);//獲得ViewFlipper實例
 
flipper.addView(addTextView("step 1"));//將View添加到flipper隊列中
flipper.addView(addTextView("step 2"));
flipper.addView(addTextView("step 3"));
flipper.addView(addTextView("step 4"));
flipper.addView(addTextView("step 5"));

          addTextView方法如下：

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

          flipper將按照你的添加順序排列這些View,並通過flipper.showNext()和flipper.showPrevious()顯示.
還需要多重寫一個方法：onTouchEvent(MotionEvent event),否則detector檢測不到觸摸,這個方法非常簡單.

@Override
 public boolean onTouchEvent(MotionEvent event) {
            return this.detector.onTouchEvent(event);
 }

         現在開始做動作監聽，在onFling方法中加入以下內容：

@Override
 public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
           float velocityY) {
           this.flipper.showNext();//顯示flipper中的下一個view
           return true;
 }

         現在可以運行一下看看效果了.你會發現當鼠標滑動時畫面只是很簡單的從Step 1變成Step 2,並沒有那種畫面滑動的效果,而且無論你從左向右滑動還是從右向左滑動都是按照同一個順序,現在我們修改一些,讓效果更炫一點. 
         先在res目錄下創建anim目錄,並創建4個基於Animation的xml文件,分別命名爲：left_in.xml,left_out.xml,right_in.xml,right_left.xml
         內容分別爲：

left_in.xml:

<?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"
  android:duration="500" />
</set>

left_out.xml:

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

right_in.xml:

<?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"
  android:duration="500" />
</set>

right_out.xml:

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

        主要是做一個translation動畫,fromXDelta：動畫的開始X位置，toXDelta:動畫的結束X位置，duration：持續時間.
         然後將onFling方法修改爲如下：

 @Override
 public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
   float velocityY) {
  if (e1.getX() - e2.getX() > 120) {//如果是從右向左滑動
      //註冊flipper的進出效果
   this.flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.left_in));
   this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.left_out));
   this.flipper.showNext();
   return true;
  } else if (e1.getX() - e2.getX() < -120) {//如果是從左向右滑動
   this.flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.right_in));
   this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.right_out));
   this.flipper.showPrevious();
   return true;
  }
  return false;
 }

        然後重新運行看看效果,如果圖片之類的多，還可以在animation里加入alpha的效果，如下
<alpha android:fromAlpha="0.1" android:toAlpha="1.0"
  android:duration="500" />