Android 實現滑動翻頁---使用ViewFlipper

屏幕切換指的是在同一個Activity內屏幕見的切換，最長見的情況就是在一個FrameLayout內有多個頁面，比如一個系統設置頁面；一個個性化設置頁面。

通過查看OPhone API文檔可以發現，有個android.widget.ViewAnimator類繼承至FrameLayout，ViewAnimator類的作用是爲FrameLayout裏面的View切換提供動畫效果。該類有如下幾個和動畫相關的函數：

l setInAnimation：設置View進入屏幕時候使用的動畫，該函數有兩個版本，一個接受單個參數，類型爲android.view.animation.Animation；一個接受兩個參數，類型爲Context和int，分別爲Context對象和定義Animation的resourceID。

setOutAnimation: 設置View退出屏幕時候使用的動畫，參數setInAnimation函數一樣。
showNext：調用該函數來顯示FrameLayout裏面的下一個View。
showPrevious：調用該函數來顯示FrameLayout裏面的上一個View。

一般不直接使用ViewAnimator而是使用它的兩個子類ViewFlipper和ViewSwitcher。ViewFlipper可以用來指定FrameLayout內多個View之間的切換效果，可以一次指定也可以每次切換的時候都指定單獨的效果。該類額外提供瞭如下幾個函數：

isFlipping：用來判斷View切換是否正在進行
setFilpInterval：設置View之間切換的時間間隔
startFlipping：使用上面設置的時間間隔來開始切換所有的View，切換會循環進行
stopFlipping: 停止View切換

ViewSwitcher 顧名思義Switcher特指在兩個View之間切換。可以通過該類指定一個ViewSwitcher.ViewFactory 工程類來創建這兩個View。該類也具有兩個子類ImageSwitcher、TextSwitcher分別用於圖片和文本切換。

在教程中通過示例介紹ViewFlipper 的使用，其他的使用方式是類似的。詳細信息可以參考文檔：

http://androidappdocs-staging.appspot.com/reference/android/widget/ViewAnimator.html

現在我就來寫一個使用ViewFlipper來實現頁面切換的功能新建一個項目，如下圖：

step1:設計程序的UI界面 main.xml

<?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:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="@+id/viewFipper">

<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:gravity="center">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="第1頁"
android:textSize="60dip" android:gravity="center"/>
</LinearLayout>


<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#FFFFFF"
android:gravity="center">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="第2頁"
android:textSize="60dip" android:gravity="center"/>
</LinearLayout>


<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#00FF00"
android:gravity="center">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="第3頁"
android:textSize="60dip" android:gravity="center"/>
</LinearLayout>


<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#FF0000"
android:gravity="center">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="第4頁"
android:textSize="60dip" android:gravity="center"/>
</LinearLayout>


<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#FFFF00"
android:gravity="center">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="第5頁"
android:textSize="60dip" android:gravity="center"/>
</LinearLayout>

</ViewFlipper>
</LinearLayout>

說明：

使用RelativeLayout做父容器，添加按鈕在ViewFlipper頂部；
ViewFlipper的每個子頁面並列於該View內；
ViewFlipper的每個子頁面顯示一個TextView；

step2:設置好頁面切換的時候的動畫效果，在切換動畫/res/anim/目錄下的動畫文件

enter_left_to_right.xml

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

enter_right_to_left.xmlenter_right_to_left.xml

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

exit_left_to_right.xmlexit_left_to_right.xml

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

exit_right_to_left.xmlexit_right_to_left.xml

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

step3:MainActivity.java

package cn.roco.animation;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.Window;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ViewFlipper;

public class MainActivity extends Activity {

private ViewFlipper viewFlipper;
/** 用於記錄按下屏幕時刻的x座標 */
private float startX;
/** 用於記錄離開屏幕時刻的x座標 */
private float endX;

private Animation enter_left_to_right;
private Animation exit_left_to_right;

private Animation enter_right_to_left;
private Animation exit_right_to_left;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN); //請求全屏
getWindow().requestFeature(Window.FEATURE_NO_TITLE); //請求沒有標題欄

setContentView(R.layout.main);

viewFlipper = (ViewFlipper) this.findViewById(R.id.viewFipper);
/** 從左到右的兩個動畫 */
enter_left_to_right = AnimationUtils.loadAnimation(this,
R.anim.enter_left_to_right);
exit_left_to_right = AnimationUtils.loadAnimation(this,
R.anim.exit_left_to_right);
/** 從右到左的兩個動畫 */
enter_right_to_left = AnimationUtils.loadAnimation(this,
R.anim.enter_right_to_left);
exit_right_to_left = AnimationUtils.loadAnimation(this,
R.anim.exit_right_to_left);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
startX = event.getX();
break;
}
case MotionEvent.ACTION_UP: {
endX = event.getX();
if (endX > startX) {// 表示向右滑動
showNextView();
} else if (endX < startX) {// 表示向左滑動
showPreviousView();
}
break;
}
}
return super.onTouchEvent(event);
}

/**
* 顯示前一頁
*/
private void showPreviousView() {
// 動畫效果
viewFlipper.setInAnimation(enter_right_to_left);
viewFlipper.setOutAnimation(exit_right_to_left);
viewFlipper.showPrevious();
}

/**
* 顯示下一頁
*/
private void showNextView() {
// 動畫效果
viewFlipper.setInAnimation(enter_left_to_right);
viewFlipper.setOutAnimation(exit_left_to_right);
viewFlipper.showNext();
}
}

step4:AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="cn.roco.animation" android:versionCode="1"
android:versionName="1.0">
<uses-sdk android:minSdkVersion="8" />

<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".MainActivity" android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>