使用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); } } } ~~~