Android—使用ViewPager来实现屏幕滑动效果

本文译自:http://developer.android.com/training/animation/screen-slide.html

本文示例代码:http://download.csdn.net/detail/fireofstar/6211781

屏幕滑动是两个整屏窗口之间切换的一种效果,并且常用于安装向导或幻灯片。本文介绍如何通过supportlibrary类库提供的ViewPager类来实现这种效果。ViewPager类能够自动的完成滑屏的动画效果。

创建View

创建一个稍后给Fragment显示内容所要使用的布局文件。下例包含了一个要显示文本的TextView视图:

<com.example.android.animationsdemo.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” />
</com.example.android.animationsdemo.ScrollView>

创建Fragment

创建一个Fragment类,并在它的onCreateView()方法中返回你刚刚创建的那个布局文件。然后需要的时候,在该Fragment所在的父Activity中创建它的实例:

publicclassScreenSlidePageFragmentextendsFragment{

@Override
public View onCreateView(LayoutInflaterinflater, ViewGroup container,
Bundle savedInstanceState) {
ViewGroup rootView = (ViewGroup) inflater.inflate(
R.layout.fragment_screen_slide_page, container, false);

return rootView;
}
}

添加ViewPager

ViewPager类有内置的切换手势,用于页面间的过度。并且默认的情况下,它们会在屏幕上显示滑动的动画,因此你不需要创建任何东西。因为ViewPager要使用PagerAdapter来提供用于显示的新的页面,所以PagerAdapter会使用上面创建的Fragment类。

首先,创建一个包含一个ViewPager类的布局:

<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

1. 把带有ViewPager类的布局设置给一个内容视图;

2. 创建一个继承于FragmentStatePagerAdapter抽象类的类,并实现它的getItem()方法,以便提供一个ScreenSlidePageFragment实例来作为新的页面。这个也适配器还要求你实现getCount()方法,它会返回这个页面适配器所创建的页面的个数(本例中是5个)。

3. 把页面适配器(PagerAdapter)挂靠到ViewPager上;

4. 处理设备的回退按钮,以便在Fragment的虚拟堆栈中向后移动。如果用户已经在第一个页面,那么就会返回到Activity所在的回退堆栈。

publicclassScreenSlidePagerActivityextendsFragmentActivity{
/**
* The number of pages (wizard steps) toshow in this demo.
*/
private static final int NUM_PAGES = 5;

/**
* The pager widget, which handles animationand allows swiping horizontally to access previous
* and next wizard steps.
*/
private ViewPager mPager;

/**
* The pager adapter, which provides thepages to the view pager widget.
*/
private PagerAdaptermPagerAdapter;

@Override
protected void onCreate(BundlesavedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_screen_slide_pager);

//Instantiate a ViewPager and a PagerAdapter.
mPager = (ViewPager) findViewById(R.id.pager);
mPagerAdapter = new ScreenSlidePagerAdapter(getFragmentManager());
mPager.setAdapter(mPagerAdapter);
}

@Override
public void onBackPressed() {
if (mPager.getCurrentItem() == 0) {
// If the user is currently looking at the first step, allow the systemto handle the
// Back button. This calls finish() on this activity and pops theback stack.
super.onBackPressed();
} else {
// Otherwise, select the previous step.
mPager.setCurrentItem(mPager.getCurrentItem() – 1);
}
}

/**
* A simple pager adapter that represents 5ScreenSlidePageFragment objects, in
* sequence.
*/
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接口,并把它提供给对应的视图页面。这个接口只暴露了一个方法—transformPage()。通常在屏幕过渡时,这个方法会被调用一次,用于显示页面(一般只有一个可见页面)和关闭相邻的页面。例如,如果页面三可见,并且用户向页面四的方向拖动该页,transformPage()方法就会手势执行阶段,被页面二、页面三、页面四调用。

在你的transformPage()实现中,基于屏幕上页面的位置,来判断那个页面需要变换,以便创建自定义滑动动画。从transformPage()方法的position参数中可以获得页面的位置。

position参数指明给定页面相对于屏幕中心的位置。它是一个动态属性,会随着页面的滚动而改变。当一个页面填充整个屏幕是,它的值是0,当一个页面刚刚离开屏幕的右边时,它的值是1。当两个也页面分别滚动到一半时,其中一个页面的位置是-0.5,另一个页面的位置是0.5。基于屏幕上页面的位置,通过使用诸如setAlpha()、setTranslationX()、或setScaleY()方法来设置页面的属性,来创建自定义的滑动动画。

当有了一个PageTransformer接口实现时,就可以调用你实现的setPageTransformer()方法来应用自定义动画。例如,如果你的PageTransformer实现被命名为ZoomOutPageTransformer,就可以像下面这样来设置自定义动画:

ViewPager pager =(ViewPager)findViewById(R.id.pager);

pager.setPageTransformer(true, new ZoomOutPageTransformer());

标签