Android 繞球心旋轉的引導頁效果

先看一下預覽效果：

splash

嗯，整體效果還算理想，基本實現了頁面繞屏幕底部中心旋轉。

這里我們用到了Android系統的一個組件 ViewFlipper ，該控件的主要作用是為其中的View切換提供動畫效果，主要的方法如下：

setInAnimation：設置View進入屏幕時的動畫。

setOutAnimation：設置View退出屏幕時的動畫。

showNext：調用該方法可以顯示下一個View。

showPrevious：調用該方法可以來顯示上一個View。

setFilpInterval：設置View切換的時間間隔。參數為毫秒。

startFlipping：開始進行View的切換。

stopFlipping：停止View切換。

setAutoStart：設置是否自動開始。如果設置為“true”，當ViewFlipper顯示的時候View的切換會自動開始。

首先看一下布局代碼：

<?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>

主要就是一張在頁面底部的白色半球圖片，以及ViewFlipper內部的三個View，當然可以不用fragment，使用一般的Layout也行。

接下來就是對應的Activity：

public class MainActivity extends AppCompatActivity {
    //處理手勢監聽
    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) { //從右向左滑動
                    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) { //從左向右滑動
                    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);
    }
}

因為要實現手勢滑動來切換頁面，所以要創建一個GestureDetector對象：

detector = new GestureDetector(this, new GestureDetector.SimpleOnGestureListener() {
            @Override
            public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
                //省略......
                return false;
            }
        });

由于我們只關心，手指的左右滑動，所以重寫SimpleOnGestureListener的 onFling() 即可，然后在 onTouchEvent() 進行手勢監聽的綁定。到此我們的Activity就可以相應滑動的手勢了。

在onFling()方法中，當從右向左滑動時，通過 setInAnimation() 、 setOutAnimation() 設置flipper中view從右側進入的動畫和從左側退出的動畫，然后調用 showNext() 方法開始切換到下一頁，這樣就可以看到對應的動畫效果。從左向右滑動時情況類似，同樣需要設置view進入和退出的動畫，然后通過 showPrevious() 方法切換到上一頁。

到此整個實現流程就介紹完了。

來自：http://www.jianshu.com/p/a583f130af53