先看一下預覽效果:
嗯,整體效果還算理想,基本實現了頁面繞屏幕底部中心旋轉。
這里我們用到了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()
方法切換到上一頁。
具體的動畫文件可以參考源代碼,這里就不貼了。
到此整個實現流程就介紹完了。