先看一下預(yù)覽效果：
嗯地粪，整體效果還算理想，基本實(shí)現(xiàn)了頁面繞屏幕底部中心旋轉(zhuǎn)。
這里我們用到了Android系統(tǒng)的一個(gè)組件ViewFlipper，該控件的主要作用是為其中的View切換提供動(dòng)畫效果拐云，主要的方法如下：
setInAnimation：設(shè)置View進(jìn)入屏幕時(shí)的動(dòng)畫。
setOutAnimation：設(shè)置View退出屏幕時(shí)的動(dòng)畫近她。
showNext：調(diào)用該方法可以顯示下一個(gè)View叉瘩。
showPrevious：調(diào)用該方法可以來顯示上一個(gè)View。
setFilpInterval：設(shè)置View切換的時(shí)間間隔粘捎。參數(shù)為毫秒薇缅。
startFlipping：開始進(jìn)行View的切換。
stopFlipping：停止View切換攒磨。
setAutoStart：設(shè)置是否自動(dòng)開始泳桦。如果設(shè)置為“true”，當(dāng)ViewFlipper顯示的時(shí)候View的切換會(huì)自動(dòng)開始娩缰。
首先看一下布局代碼：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#440000ff">
<ImageView
android:layout_width="match_parent"
android:layout_height="230dp"
android:layout_alignParentBottom="true"
android:background="@mipmap/guide_bg" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ViewFlipper
android:id="@+id/vf"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
class="com.example.dell.guide.GuideOneFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<fragment
class="com.example.dell.guide.GuideTwoFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<fragment
class="com.example.dell.guide.GuideThreeFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</ViewFlipper>
</RelativeLayout>
</RelativeLayout>
主要就是一張?jiān)陧撁娴撞康陌咨肭驁D片灸撰，以及ViewFlipper內(nèi)部的三個(gè)View，當(dāng)然可以不用fragment漆羔，使用一般的Layout也行梧奢。
接下來就是對(duì)應(yīng)的Activity：
public class MainActivity extends AppCompatActivity {
//處理手勢監(jiān)聽
private GestureDetector detector;
private ViewFlipper flipper;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
flipper = (ViewFlipper) findViewById(R.id.vf);
detector = new GestureDetector(this, new GestureDetector.SimpleOnGestureListener() {
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
if (e1.getX() - e2.getX() > 120.0F) { //從右向左滑動(dòng)
flipper.setInAnimation(MainActivity.this, R.anim.tip_left_in);
flipper.setOutAnimation(MainActivity.this, R.anim.tip_left_out);
if (flipper.getDisplayedChild() < 2) {
flipper.showNext();
}
} else if (e1.getX() - e2.getX() < -120.0F) { //從左向右滑動(dòng)
flipper.setInAnimation(MainActivity.this, R.anim.tip_right_in);
flipper.setOutAnimation(MainActivity.this, R.anim.tip_right_out);
if (flipper.getDisplayedChild() > 0) {
flipper.showPrevious();
}
}
return false;
}
});
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (detector != null) {
return detector.onTouchEvent(event);
}
return super.onTouchEvent(event);
}
}
因?yàn)橐獙?shí)現(xiàn)手勢滑動(dòng)來切換頁面，所以要?jiǎng)?chuàng)建一個(gè)GestureDetector對(duì)象：
detector = new GestureDetector(this, new GestureDetector.SimpleOnGestureListener() {
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
//省略......
return false;
}
});
由于我們只關(guān)心演痒，手指的左右滑動(dòng)，所以重寫SimpleOnGestureListener的onFling()即可趋惨，然后在onTouchEvent()進(jìn)行手勢監(jiān)聽的綁定鸟顺。到此我們的Activity就可以相應(yīng)滑動(dòng)的手勢了。
在onFling()方法中器虾，當(dāng)從右向左滑動(dòng)時(shí)讯嫂，通過setInAnimation()、setOutAnimation()設(shè)置flipper中view從右側(cè)進(jìn)入的動(dòng)畫和從左側(cè)退出的動(dòng)畫兆沙，然后調(diào)用showNext()方法開始切換到下一頁欧芽，這樣就可以看到對(duì)應(yīng)的動(dòng)畫效果。從左向右滑動(dòng)時(shí)情況類似葛圃，同樣需要設(shè)置view進(jìn)入和退出的動(dòng)畫千扔，然后通過showPrevious()方法切換到上一頁憎妙。
具體的動(dòng)畫文件可以參考源代碼，這里就不貼了曲楚。
到此整個(gè)實(shí)現(xiàn)流程就介紹完了厘唾。
