使用ViewPager實現屏幕側滑 · Android Training官方培訓課程中文版

> 編寫:[XizhiXu](https://github.com/XizhiXu) - 原文:[http://developer.android.com/training/animation/screen-slide.html](http://developer.android.com/training/animation/screen-slide.html) 滑屏是在兩個完整界面間的轉換，它在一些 UI 中很常見，比如設置導向和幻燈放映。這節課將告訴你怎樣通過[支持庫（support library](http://developer.android.com/tools/support-library/index.html)提供的[ViewPager](http://developer.android.com/reference/android/support/v4/view/ViewPager.html)實現滑屏。[ViewPager](http://developer.android.com/reference/android/support/v4/view/ViewPager.html)能自動實現滑屏動畫。下面展示了從一個內容界面到一下界面的滑屏轉換是什么樣子。如果你想跳過看整個例子，[下載](http://developer.android.com/shareables/training/Animations.zip) App 樣例然后運行屏幕滑動例子。查看下列文件中的代碼實現： - src/ScreenSlidePageFragment.java - src/ScreenSlideActivity.java - layout/activity_screen_slide.xml - layout/fragment_screen_slide_page.xml ### 創建View 創建你之后會為 Fragment 內容使用的布局文件。下面例子包含一個展示文本的 text view： ~~~  <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView style="?android:textAppearanceMedium" android:padding="16dp" android:lineSpacingMultiplier="1.2" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/lorem_ipsum" /> </ScrollView> ~~~ 同時也為 fragment 內容定義了一個字符串。 ### 創建Fragment 創建一個 [Fragment](http://developer.android.com/reference/android/support/v4/app/Fragment.html) 子類，它從[ onCreateView() ](http://developer.android.com/reference/android/app/Fragment.html#onCreateView(android.view.LayoutInflater, android.view.ViewGroup, android.os.Bundle))方法中返回你剛創建的布局。無論什么時候，如果你需要為用戶展示一個頁面，你可以在它的父 [activity](# "An activity represents a single screen with a user interface.") 中為這個 fragment 新建實例： ~~~ import android.support.v4.app.Fragment; ... public class ScreenSlidePageFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { ViewGroup rootView = (ViewGroup) inflater.inflate( R.layout.fragment_screen_slide_page, container, false); return rootView; } } ~~~ ### 添加ViewPager [ViewPager](http://developer.android.com/reference/android/support/v4/view/ViewPager.html) 有內建的滑動手勢用來在頁面間轉換，并且他默認使用滑屏動畫，所以你不用自己創建。[ViewPager](http://developer.android.com/reference/android/support/v4/view/ViewPager.html) 使用 [PagerAdapter](http://developer.android.com/reference/android/support/v4/view/PagerAdapter.html) 來補充新頁面，所以 [PagerAdapter](http://developer.android.com/reference/android/support/v4/view/PagerAdapter.html) 會用到你之前新建 fragment 類。開始之前，創建一個包含 [ViewPager](http://developer.android.com/reference/android/support/v4/view/ViewPager.html) 的布局： ~~~  <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" /> ~~~ 創建一個 [activity](# "An activity represents a single screen with a user interface.") 做下面這些事情： - 把 content view 設置成這個包含 [ViewPager](http://developer.android.com/reference/android/support/v4/view/ViewPager.html) 的布局。 - 創建一個繼承自 [FragmentStatePagerAdapter ](http://developer.android.com/reference/android/support/v13/app/FragmentStatePagerAdapter.html) 抽象類的類，然后實現[ getItem() ](http://developer.android.com/reference/android/support/v4/app/FragmentStatePagerAdapter.html#getItem(int))方法來把 ScreenSlidePageFragment 實例作為新頁面補充進來。pager adapter還需要實現[ getCount() ](http://developer.android.com/reference/android/support/v4/view/PagerAdapter.html#getCount())方法，它返回 adapter 將要創建頁面的總數（例如5個）。 - 把 [PagerAdapter](http://developer.android.com/reference/android/support/v4/view/PagerAdapter.html) 和 [ViewPager](http://developer.android.com/reference/android/support/v4/view/ViewPager.html) 關聯起來。 - 處理 Back 按鈕，按下變為在虛擬的 fragment 棧中回退。如果用戶已經在第一個頁面了，則在 [activity](# "An activity represents a single screen with a user interface.") 的 back stack 中回退。 ~~~ import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; ... public class ScreenSlidePagerActivity extends FragmentActivity { /** * 本演示代碼的顯示頁數 (看作向導步驟). */ private static final int NUM_PAGES = 5; /** * Pager控件，用來處理動畫并允許整頁橫向滑動來展示上一個和下一個“向導步驟” */ private ViewPager mPager; /** * Pager適配器，用于提供ViewPager控件的具體頁面。 */ private PagerAdapter mPagerAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_screen_slide); // 初始化 ViewPager 和 PagerAdapter. mPager = (ViewPager) findViewById(R.id.pager); mPagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager()); mPager.setAdapter(mPagerAdapter); } @Override public void onBackPressed() { if (mPager.getCurrentItem() == 0) { // 如果用戶當前正在看第一步（也就是第一頁），那就要讓系統來處理返回按鈕。 //這個是結束（finish()）當前活動并彈出回退棧。 super.onBackPressed(); } else { // 否則，返回前一頁 mPager.setCurrentItem(mPager.getCurrentItem() - 1); } } /** * 一個簡單的Pager控件適配器，它順序地展示了5個ScreenSlidePageFragment對象 */ private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter { public ScreenSlidePagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return new ScreenSlidePageFragment(); } @Override public int getCount() { return NUM_PAGES; } } } ~~~ ### 用PageTransformer自定義動畫為展示不同于默認滑屏效果的動畫，實現 [ViewPager.PageTransformer](http://developer.android.com/reference/android/support/v4/view/ViewPager.PageTransformer.html) 接口，然后把它補充到 view pager 里。這接口只暴露了一個方法，[ transformPage() ](http://developer.android.com/reference/android/support/v4/view/ViewPager.PageTransformer.html#transformPage(android.view.View, float))。每次界面切換，這個方法都會為每個可見頁面和界面中消失的相鄰界面調用一次（通常只有一個頁面可見）。例如，第三頁可見而且用戶向第四頁拖動，[ transformPage() ](http://developer.android.com/reference/android/support/v4/view/ViewPager.PageTransformer.html#transformPage(android.view.View, float))在手勢的各個階段為第二，三，四頁分別調用。在你[ transformPage() ](http://developer.android.com/reference/android/support/v4/view/ViewPager.PageTransformer.html#transformPage(android.view.View, float))的實現中，基于當前界面上頁面的 `position`（`position` 由[ transformPage() ](http://developer.android.com/reference/android/support/v4/view/ViewPager.PageTransformer.html#transformPage(android.view.View, float))方法的參數給出）決定哪些頁面需要被動畫轉換，通過這樣你就能新建自己的動畫。 `position` 參數表示給定頁面相對于屏幕中的頁面的位置。它的值在用戶滑動頁面過程中動態變化。當頁面填充屏幕，它的值為 0。當頁面剛從屏幕右邊拖走，它的值為 1。如果用戶在頁面一和頁面二間滑動到一半，那么頁面一的 position 為 -0.5 并且頁面二的 position 為 0.5。根據屏幕上頁面的 position，你可以通過[ setAlpha() ](http://developer.android.com/reference/android/view/View.html#setAlpha(float))，[ setTranslationX() ](http://developer.android.com/reference/android/view/View.html#setTranslationX(float))或[ setScaleY() ](http://developer.android.com/reference/android/view/View.html#setScaleY(float))這些方法設定頁面屬性來自定義滑動動畫。當你實現了 [PageTransformer](http://developer.android.com/reference/android/support/v4/view/ViewPager.PageTransformer.html) 后，用你的實現調用[ setPageTransformer() ](http://developer.android.com/reference/android/support/v4/view/ViewPager.html#setPageTransformer(boolean, android.support.v4.view.ViewPager.PageTransformer))來應用這些自定義動畫。例如，如果你有一個叫做`ZoomOutPageTransformer`的[PageTransformer](http://developer.android.com/reference/android/support/v4/view/ViewPager.PageTransformer.html)，你可以這樣設置自定義動畫： ~~~ ViewPager mPager = (ViewPager) findViewById(R.id.pager); ... mPager.setPageTransformer(true, new ZoomOutPageTransformer()); ~~~ 詳情查看[縮放型 Page Transformer](#)和[潛藏型 Page Transformer](#)部分和 [PageTransformer](http://developer.android.com/reference/android/support/v4/view/ViewPager.PageTransformer.html) 視頻。 ### 縮放PageTransformer 當在相鄰界面滑動時，這個page transformer使頁面收縮并褪色。當頁面越靠近中心，它將漸漸還原到正常大小并且圖像漸明。 ~~~ public class ZoomOutPageTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.85f; private static final float MIN_ALPHA = 0.5f; public void transformPage(View view, float position) { int pageWidth = view.getWidth(); int pageHeight = view.getHeight(); if (position < -1) { // [-∞,-1) // 這一頁已經是最左邊的屏幕頁 view.setAlpha(0); } else if (position <= 1) { // [-1,1] // 修改默認的滑動過渡效果為縮放效果 float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position)); float vertMargin = pageHeight * (1 - scaleFactor) / 2; float horzMargin = pageWidth * (1 - scaleFactor) / 2; if (position < 0) { view.setTranslationX(horzMargin - vertMargin / 2); } else { view.setTranslationX(-horzMargin + vertMargin / 2); } // 開始根據縮放系數進行變化 (在 MIN_SCALE 和 1 之間變化) view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); // 根據大小（縮放系數）變化化透明度實現淡化頁面效果 view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA)); } else { // (1,+∞ ] // 這一頁已經是最右邊的屏幕頁 view.setAlpha(0); } } } ~~~ ### 潛藏型PageTransformer（頁面轉換動畫）這個page transformer使用默認動畫的屏幕左滑動畫。但是為右滑使用一種“潛藏”效果的動畫。潛藏動畫淡出頁面，并且線性縮小它。 > **注意：**在潛藏過程中，默認動畫（屏幕滑動）是仍舊發生的，所以你必須用負的 X平移來抵消它。例如： ~~~ view.setTranslationX(-1 * view.getWidth() * position); ~~~ 下面的例子展示了如何抵消默認滑屏動畫： ~~~ public class DepthPageTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.75f; public void transformPage(View view, float position) { int pageWidth = view.getWidth(); if (position < -1) { // [-∞ ,-1) // 這一頁已經是最左邊的屏幕頁 view.setAlpha(0); } else if (position <= 0) { // [-1,0] // 向左面滑屏使用默認的過渡動畫 view.setAlpha(1); view.setTranslationX(0); view.setScaleX(1); view.setScaleY(1); } else if (position <= 1) { // (0,1] // 淡出頁面 view.setAlpha(1 - position); // 抵消默認的整頁過渡 view.setTranslationX(pageWidth * -position); // 根據縮放系數變化 (在 MIN_SCALE 和 1 之間變化) float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position)); view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); } else { // (1,+∞] // 這一頁已經是最右邊的屏幕頁 view.setAlpha(0); } } } ~~~