使用ViewPager实现屏幕侧滑
最后更新于：2022-04-01 01:39:39
> 编写:[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：
~~~
<!-- fragment_screen_slide_page.xml -->
<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) 的布局：
~~~
<!-- activity_screen_slide.xml -->
<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);
}
}
}
~~~